Update flare-ui/src/app/dialogs/api-edit-dialog/api-edit-dialog.component.html

flare-ui/src/app/dialogs/api-edit-dialog/api-edit-dialog.component.html

@@ -11,430 +11,429 @@
 </h2>
 
 <mat-dialog-content>
-  <form [formGroup]="form">
-    <mat-tab-group[(selectedIndex)]="activeTabIndex">
-      <!-- General Tab -->
-      <mat-tab label="General">
-        <div class="tab-content">
-          <mat-form-field appearance="outline" class="full-width">
-            <mat-label>Name*</mat-label>
-            <input matInput formControlName="name" 
-                   placeholder="e.g., book_flight_api"
-                   [readonly]="data.mode === 'edit'">
-            <mat-hint>Use only letters, numbers, and underscores</mat-hint>
-            <mat-error *ngIf="form.get('name')?.hasError('required')">Name is required</mat-error>
-            <mat-error *ngIf="form.get('name')?.hasError('pattern')">Invalid characters in name</mat-error>
+  <mat-tab-group [(selectedIndex)]="activeTabIndex">
+    <!-- General Tab -->
+    <mat-tab label="General">
+      <div class="tab-content">
+        <mat-form-field appearance="outline">
+          <mat-label>Name</mat-label>
+          <input matInput [formControl]="form.get('name')" placeholder="e.g., get_flights">
+          <mat-hint>Unique identifier for this API</mat-hint>
+          @if (form.get('name')?.hasError('required') && form.get('name')?.touched) {
+            <mat-error>Name is required</mat-error>
+          }
+          @if (form.get('name')?.hasError('pattern') && form.get('name')?.touched) {
+            <mat-error>Only alphanumeric and underscore allowed</mat-error>
+          }
+        </mat-form-field>
+
+        <mat-form-field appearance="outline">
+          <mat-label>URL</mat-label>
+          <input matInput [formControl]="form.get('url')" placeholder="https://api.example.com/endpoint">
+          <mat-hint>Full URL including protocol</mat-hint>
+          @if (form.get('url')?.hasError('required') && form.get('url')?.touched) {
+            <mat-error>URL is required</mat-error>
+          }
+          @if (form.get('url')?.hasError('pattern') && form.get('url')?.touched) {
+            <mat-error>Invalid URL format</mat-error>
+          }
+        </mat-form-field>
+
+        <div class="row">
+          <mat-form-field appearance="outline" class="method-field">
+            <mat-label>Method</mat-label>
+            <mat-select [formControl]="form.get('method')">
+              @for (method of httpMethods; track method) {
+                <mat-option [value]="method">{{ method }}</mat-option>
+              }
+            </mat-select>
           </mat-form-field>
 
-          <mat-form-field appearance="outline" class="full-width">
-            <mat-label>URL*</mat-label>
-            <input matInput formControlName="url" 
-                   placeholder="https://api.example.com/endpoint">
-            <mat-error *ngIf="form.get('url')?.hasError('required')">URL is required</mat-error>
-            <mat-error *ngIf="form.get('url')?.hasError('pattern')">Invalid URL format</mat-error>
+          <mat-form-field appearance="outline" class="timeout-field">
+            <mat-label>Timeout (seconds)</mat-label>
+            <input matInput type="number" [formControl]="form.get('timeout_seconds')">
+            <mat-hint>Request timeout in seconds</mat-hint>
+            @if (form.get('timeout_seconds')?.hasError('min')) {
+              <mat-error>Minimum 1 second</mat-error>
+            }
+            @if (form.get('timeout_seconds')?.hasError('max')) {
+              <mat-error>Maximum 300 seconds</mat-error>
+            }
           </mat-form-field>
+        </div>
 
-          <mat-form-field appearance="outline">
-            <mat-label>Method*</mat-label>
-            <mat-select formControlName="method">
-              <mat-option *ngFor="let method of httpMethods" [value]="method">
-                {{ method }}
-              </mat-option>
-            </mat-select>
-          </mat-form-field>
+        <mat-form-field appearance="outline" class="full-width">
+          <mat-label>Body Template</mat-label>
+          <textarea matInput 
+                    [formControl]="form.get('body_template')" 
+                    rows="8"
+                    placeholder='{"key": "{{variables.value}}"}'
+                    (click)="saveCursorPosition('body_template', $event)"
+                    (keyup)="saveCursorPosition('body_template', $event)"></textarea>
+          <mat-hint>JSON template with {{variables}} support</mat-hint>
+          @if (!validateJSON('body_template')) {
+            <mat-error>Invalid JSON format</mat-error>
+          }
+        </mat-form-field>
+
+        <div class="template-variables">
+          <strong>Available Variables:</strong>
+          <mat-chip-set>
+            @for (variable of getTemplateVariables(false); track variable) {
+              <mat-chip (click)="insertTemplateVariable('body_template', variable)">
+                {{ variable }}
+              </mat-chip>
+            }
+          </mat-chip-set>
+        </div>
 
-          <div class="form-section">
-            <label class="section-label">Body Template:</label>
-            <div class="json-editor">
-              <textarea formControlName="body_template" 
-                        placeholder='{"key": "value"}'
-                        rows="8"
-                        class="json-textarea"
-                        (click)="saveCursorPosition('body_template', $event)"
-                        (keyup)="saveCursorPosition('body_template', $event)"></textarea>
-              
-              <button mat-button type="button" 
-                      (click)="validateJSON('body_template')"
-                      [color]="validateJSON('body_template') ? 'primary' : 'warn'">
-                <mat-icon>check_circle</mat-icon>
-                Validate JSON
-              </button>
-            </div>
-            
-            <div class="template-helpers">
-              <mat-expansion-panel>
-                <mat-expansion-panel-header>
-                  <mat-panel-title>
-                    <mat-icon>help_outline</mat-icon>
-                    Template Variables
-                  </mat-panel-title>
-                </mat-expansion-panel-header>
-                <div class="hint-text" style="margin-bottom: 16px; padding: 16px; background-color: #e3f2fd; border-radius: 4px;">
-                  <mat-icon style="vertical-align: middle; color: #1976d2;">info</mat-icon>
-                  <strong style="color: #1976d2;">Important:</strong><br>
-                  Write all variables <strong>without quotes</strong>: <code>{{ '{' }}{{ '{' }}variables.pnr{{ '}' }}{{ '}' }}</code><br>
-                  The system will automatically add quotes for string values during execution.<br><br>
-                  <strong>Examples:</strong><br>
-                  • <code>{{ '{' }} "pnr": {{ '{' }}{{ '{' }}variables.pnr{{ '}' }}{{ '}' }} {{ '}' }}</code> → <code>{{ '{' }} "pnr": "ABC123" {{ '}' }}</code><br>
-                  • <code>{{ '{' }} "count": {{ '{' }}{{ '{' }}variables.passenger_count{{ '}' }}{{ '}' }} {{ '}' }}</code> → <code>{{ '{' }} "count": 2 {{ '}' }}</code><br>
-                  • <code>{{ '{' }} "active": {{ '{' }}{{ '{' }}variables.enabled{{ '}' }}{{ '}' }} {{ '}' }}</code> → <code>{{ '{' }} "active": true {{ '}' }}</code>
-                </div>
-                <div class="template-list">
-                  <mat-chip *ngFor="let templateVar of getTemplateVariables()" 
-                            (click)="insertTemplateVariable('body_template', templateVar)"
-                            class="template-chip">
-                    {{ templateVar }}
-                  </mat-chip>
-                </div>
-              </mat-expansion-panel>
-            </div>
+        <mat-form-field appearance="outline">
+          <mat-label>Proxy URL (Optional)</mat-label>
+          <input matInput [formControl]="form.get('proxy')" placeholder="http://proxy.example.com:8080">
+          <mat-hint>HTTP proxy for this API call</mat-hint>
+        </mat-form-field>
+      </div>
+    </mat-tab>
+
+    <!-- Headers Tab -->
+    <mat-tab label="Headers">
+      <div class="tab-content">
+        <div class="array-section">
+          <div class="section-header">
+            <h3>Request Headers</h3>
+            <button mat-button color="primary" (click)="addHeader()">
+              <mat-icon>add</mat-icon>
+              Add Header
+            </button>
           </div>
 
-          <mat-form-field appearance="outline">
-            <mat-label>Timeout (seconds)*</mat-label>
-            <input matInput type="number" formControlName="timeout_seconds">
-            <mat-error *ngIf="form.get('timeout_seconds')?.hasError('required')">Timeout is required</mat-error>
-            <mat-error *ngIf="form.get('timeout_seconds')?.hasError('min')">Minimum 1 second</mat-error>
-            <mat-error *ngIf="form.get('timeout_seconds')?.hasError('max')">Maximum 300 seconds</mat-error>
-          </mat-form-field>
+          @if (headers.length === 0) {
+            <p class="empty-message">No headers configured. Click "Add Header" to add one.</p>
+          }
 
-          <div class="form-section">
-            <h4>Retry Settings</h4>
-            <div formGroupName="retry" class="retry-settings">
-              <mat-form-field appearance="outline">
-                <mat-label>Retry Count*</mat-label>
-                <input matInput type="number" formControlName="retry_count">
+          @for (header of headers.controls; track header; let i = $index) {
+            <div class="array-item" [formGroup]="header">
+              <mat-form-field appearance="outline" class="key-field">
+                <mat-label>Header Name</mat-label>
+                <input matInput formControlName="key" placeholder="Content-Type">
               </mat-form-field>
 
-              <mat-form-field appearance="outline">
-                <mat-label>Backoff (seconds)*</mat-label>
-                <input matInput type="number" formControlName="backoff_seconds">
+              <mat-form-field appearance="outline" class="value-field">
+                <mat-label>Header Value</mat-label>
+                <input matInput formControlName="value" placeholder="application/json">
+                <button mat-icon-button matSuffix [matMenuTriggerFor]="headerMenu">
+                  <mat-icon>code</mat-icon>
+                </button>
+                <mat-menu #headerMenu="matMenu">
+                  @for (variable of getTemplateVariables(); track variable) {
+                    <button mat-menu-item (click)="insertHeaderValue(i, variable)">
+                      {{ variable }}
+                    </button>
+                  }
+                </mat-menu>
               </mat-form-field>
 
-              <mat-form-field appearance="outline">
-                <mat-label>Strategy*</mat-label>
-                <mat-select formControlName="strategy">
-                  <mat-option value="static">Static</mat-option>
-                  <mat-option value="exponential">Exponential</mat-option>
-                </mat-select>
-              </mat-form-field>
-            </div>
-          </div>
-
-          <mat-form-field appearance="outline" class="full-width">
-            <mat-label>Response Prompt</mat-label>
-            <textarea matInput formControlName="response_prompt" 
-                      rows="4"
-                      placeholder="Convert the API response to human-friendly text..."></textarea>
-            <mat-hint>Use {{ '{' }}{{ '{' }}api_response{{ '}' }}{{ '}' }} to reference the API response</mat-hint>
-          </mat-form-field>
-
-          <div class="form-section">
-            <div class="section-header">
-              <h4>Response Mappings</h4>
-              <button mat-raised-button color="primary" type="button" (click)="addResponseMapping()">
-                <mat-icon>add</mat-icon>
-                Add Mapping
+              <button mat-icon-button color="warn" (click)="removeHeader(i)">
+                <mat-icon>delete</mat-icon>
               </button>
             </div>
+          }
+        </div>
+      </div>
+    </mat-tab>
+
+    <!-- Response Tab -->
+    <mat-tab label="Response">
+      <div class="tab-content">
+        <mat-form-field appearance="outline" class="full-width">
+          <mat-label>Response Prompt</mat-label>
+          <textarea matInput 
+                    [formControl]="form.get('response_prompt')" 
+                    rows="4"
+                    placeholder="Optional instructions for processing the response"></textarea>
+          <mat-hint>Instructions for AI to process the response (optional)</mat-hint>
+        </mat-form-field>
+
+        <mat-divider></mat-divider>
+
+        <div class="array-section">
+          <div class="section-header">
+            <h3>Response Mappings</h3>
+            <button mat-button color="primary" (click)="addResponseMapping()">
+              <mat-icon>add</mat-icon>
+              Add Mapping
+            </button>
+          </div>
 
-            <div formArrayName="response_mappings" class="response-mappings-list">
-              <div *ngFor="let mapping of responseMappings.controls; let i = index" 
-                   [formGroupName]="i" 
-                   class="mapping-row">
+          <p class="info-text">
+            Extract values from API response and save them as variables for use in subsequent intents.
+          </p>
+
+          @if (responseMappings.length === 0) {
+            <p class="empty-message">No response mappings configured.</p>
+          }
+
+          @for (mapping of responseMappings.controls; track mapping; let i = $index) {
+            <mat-expansion-panel [formGroup]="mapping">
+              <mat-expansion-panel-header>
+                <mat-panel-title>
+                  {{ mapping.get('variable_name')?.value || 'New Mapping' }}
+                </mat-panel-title>
+                <mat-panel-description>
+                  {{ mapping.get('json_path')?.value || 'Configure mapping' }}
+                </mat-panel-description>
+              </mat-expansion-panel-header>
+
+              <div class="mapping-content">
                 <mat-form-field appearance="outline">
                   <mat-label>Variable Name</mat-label>
-                  <input matInput formControlName="variable_name" placeholder="departure_time">
-                  <mat-hint>snake_case only</mat-hint>
-                </mat-form-field>
-            
-                <mat-form-field appearance="outline">
-                  <mat-label>Type</mat-label>
-                  <mat-select formControlName="type">
-                    <mat-option *ngFor="let type of variableTypes" [value]="type">
-                      {{ type }}
-                    </mat-option>
-                  </mat-select>
-                </mat-form-field>
-            
-                <mat-form-field appearance="outline" class="json-path-field">
-                  <mat-label>JSON Path</mat-label>
-                  <input matInput formControlName="json_path" placeholder="FlightInfo.Details.DepartureTime">
-                  <mat-hint>Use dot notation for nested values</mat-hint>
+                  <input matInput formControlName="variable_name" placeholder="booking_ref">
+                  <mat-hint>Name to store the extracted value</mat-hint>
+                  @if (mapping.get('variable_name')?.hasError('pattern')) {
+                    <mat-error>Lowercase letters, numbers and underscore only</mat-error>
+                  }
                 </mat-form-field>
-            
-                <mat-form-field appearance="outline">
-                  <mat-label>Caption</mat-label>
-                  <input matInput formControlName="caption" placeholder="Kalkış Saati">
-                  <mat-hint>Human-readable label</mat-hint>
-                </mat-form-field>
-            
-                <button mat-icon-button color="warn" type="button" (click)="removeResponseMapping(i)">
-                  <mat-icon>delete</mat-icon>
-                </button>
-              </div>
-            </div>
 
-            <div *ngIf="responseMappings.length === 0" class="empty-state-small">
-              <mat-icon>info</mat-icon>
-              <p>No response mappings defined. Use this to extract values from API responses into session variables.</p>
-            </div>
-          </div>
-
-          <mat-form-field appearance="outline" class="full-width">
-            <mat-label>Proxy URL (Optional)</mat-label>
-            <input matInput formControlName="proxy" 
-                   placeholder="http://proxy.example.com:8080">
-          </mat-form-field>
-        </div>
-      </mat-tab>
-
-      <!-- Headers Tab -->
-      <mat-tab label="Headers">
-        <div class="tab-content">
-          <div class="headers-section">
-            <div class="section-header">
-              <h4>Request Headers</h4>
-              <button mat-raised-button color="primary" type="button" (click)="addHeader()">
-                <mat-icon>add</mat-icon>
-                Add Header
-              </button>
-            </div>
-
-            <div formArrayName="headers" class="headers-list">
-              <div *ngFor="let header of headers.controls; let i = index" 
-                   [formGroupName]="i" 
-                   class="header-row">
                 <mat-form-field appearance="outline">
-                  <mat-label>Key</mat-label>
-                  <input matInput formControlName="key" placeholder="Content-Type">
+                  <mat-label>Caption</mat-label>
+                  <input matInput formControlName="caption" placeholder="Booking Reference">
+                  <mat-hint>Human-readable description</mat-hint>
                 </mat-form-field>
 
-                <mat-form-field appearance="outline" class="header-value">
-                  <mat-label>Value</mat-label>
-                  <input matInput formControlName="value" placeholder="application/json">
-                </mat-form-field>
+                <div class="row">
+                  <mat-form-field appearance="outline" class="type-field">
+                    <mat-label>Type</mat-label>
+                    <mat-select formControlName="type">
+                      @for (type of variableTypes; track type) {
+                        <mat-option [value]="type">{{ type }}</mat-option>
+                      }
+                    </mat-select>
+                  </mat-form-field>
+
+                  <mat-form-field appearance="outline" class="path-field">
+                    <mat-label>JSON Path</mat-label>
+                    <input matInput formControlName="json_path" placeholder="$.data.bookingReference">
+                    <mat-hint>JSONPath expression to extract value</mat-hint>
+                  </mat-form-field>
+                </div>
 
-                <button mat-icon-button color="warn" type="button" (click)="removeHeader(i)">
+                <button mat-button color="warn" (click)="removeResponseMapping(i)">
                   <mat-icon>delete</mat-icon>
+                  Remove Mapping
                 </button>
               </div>
-            </div>
-
-            <div *ngIf="headers.length === 0" class="empty-state">
-              <mat-icon>info</mat-icon>
-              <p>No headers defined. Click "Add Header" to create one.</p>
-            </div>
+            </mat-expansion-panel>
+          }
+        </div>
 
-            <div class="template-helpers">
-              <mat-expansion-panel>
-                <mat-expansion-panel-header>
-                  <mat-panel-title>
-                    <mat-icon>help_outline</mat-icon>
-                    Template Variables for Headers
-                  </mat-panel-title>
-                </mat-expansion-panel-header>
-                <div class="template-list">
-                  <mat-chip *ngFor="let templateVar of getTemplateVariables()" 
-                            class="template-chip">
-                    <span (click)="headers.length > 0 ? insertHeaderValue(headers.length - 1, templateVar) : null">
-                      {{ templateVar }}
-                    </span>
-                  </mat-chip>
-                </div>
-                <p class="hint-text">
-                  Common headers:<br>
-                  <strong>Authorization:</strong> Bearer {{ '{' }}{{ '{' }}auth_tokens.api_name.token{{ '}' }}{{ '}' }}<br>
-                  <strong>Content-Type:</strong> application/json
-                </p>
-              </mat-expansion-panel>
-            </div>
+        <!-- Retry Settings -->
+        <mat-divider></mat-divider>
+
+        <div class="retry-section" [formGroup]="form.get('retry')">
+          <h3>Retry Settings</h3>
+          
+          <div class="row">
+            <mat-form-field appearance="outline">
+              <mat-label>Retry Count</mat-label>
+              <input matInput type="number" formControlName="retry_count">
+              <mat-hint>Number of retry attempts</mat-hint>
+            </mat-form-field>
+
+            <mat-form-field appearance="outline">
+              <mat-label>Backoff (seconds)</mat-label>
+              <input matInput type="number" formControlName="backoff_seconds">
+              <mat-hint>Delay between retries</mat-hint>
+            </mat-form-field>
+
+            <mat-form-field appearance="outline">
+              <mat-label>Strategy</mat-label>
+              <mat-select formControlName="strategy">
+                @for (strategy of retryStrategies; track strategy) {
+                  <mat-option [value]="strategy">{{ strategy }}</mat-option>
+                }
+              </mat-select>
+            </mat-form-field>
           </div>
         </div>
-      </mat-tab>
-
-      <!-- Auth Tab -->
-      <mat-tab label="Auth">
-        <div class="tab-content">
-          <div formGroupName="auth">
-            <mat-checkbox formControlName="enabled">
-              Enable Authentication
-            </mat-checkbox>
-
-            <div *ngIf="form.get('auth.enabled')?.value" class="auth-settings">
-              <mat-form-field appearance="outline" class="full-width">
-                <mat-label>Token Endpoint*</mat-label>
-                <input matInput formControlName="token_endpoint" 
-                       placeholder="https://api.example.com/auth">
-                <mat-error *ngIf="form.get('auth.token_endpoint')?.hasError('required')">
-                  Token endpoint is required when auth is enabled
-                </mat-error>
-              </mat-form-field>
-
-              <mat-form-field appearance="outline" class="full-width">
-                <mat-label>Response Token Path*</mat-label>
-                <input matInput formControlName="response_token_path" 
-                       placeholder="access_token or data.token">
-                <mat-hint>JSON path to extract token from response (e.g., data.token)</mat-hint>
-                <mat-error *ngIf="form.get('auth.response_token_path')?.hasError('required')">
-                  Token path is required when auth is enabled
-                </mat-error>
-              </mat-form-field>
-
-              <div class="form-section">
-                <label class="section-label">Token Request Body:</label>
-                <div class="json-editor">
-                  <textarea formControlName="token_request_body" 
-                            placeholder='{"grant_type": "client_credentials"}'
-                            rows="4"
-                            class="json-textarea"
-                            (click)="saveCursorPosition('auth.token_request_body', $event)"
-                            (keyup)="saveCursorPosition('auth.token_request_body', $event)"></textarea>
-                  <div class="template-helpers">
-                    <mat-expansion-panel>
-                      <mat-expansion-panel-header>
-                        <mat-panel-title>
-                          <mat-icon>help_outline</mat-icon>
-                          Template Variables
-                        </mat-panel-title>
-                      </mat-expansion-panel-header>
-                      <div class="hint-text" style="margin-bottom: 16px; padding: 16px; background-color: #e3f2fd; border-radius: 4px;">
-                        <mat-icon style="vertical-align: middle; color: #1976d2;">info</mat-icon>
-                        <strong style="color: #1976d2;">Important:</strong><br>
-                        Write all variables <strong>without quotes</strong>: <code>{{ '{' }}{{ '{' }}variables.pnr{{ '}' }}{{ '}' }}</code><br>
-                        The system will automatically add quotes for string values during execution.<br><br>
-                        <strong>Examples:</strong><br>
-                        • <code>{{ '{' }} "pnr": {{ '{' }}{{ '{' }}variables.pnr{{ '}' }}{{ '}' }} {{ '}' }}</code> → <code>{{ '{' }} "pnr": "ABC123" {{ '}' }}</code><br>
-                        • <code>{{ '{' }} "count": {{ '{' }}{{ '{' }}variables.passenger_count{{ '}' }}{{ '}' }} {{ '}' }}</code> → <code>{{ '{' }} "count": 2 {{ '}' }}</code><br>
-                        • <code>{{ '{' }} "active": {{ '{' }}{{ '{' }}variables.enabled{{ '}' }}{{ '}' }} {{ '}' }}</code> → <code>{{ '{' }} "active": true {{ '}' }}</code>
-                      </div>                      
-                      <div class="template-list">
-                        <mat-chip *ngFor="let templateVar of getTemplateVariables(false)" 
-                                  (click)="insertTemplateVariable('auth.token_request_body', templateVar)"
-                                  class="template-chip">
-                          {{ templateVar }}
-                        </mat-chip>
-                      </div>
-                    </mat-expansion-panel>
-                  </div>
-                  <button mat-button type="button" 
-                          (click)="validateJSON('auth.token_request_body')"
-                          [color]="validateJSON('auth.token_request_body') ? 'primary' : 'warn'">
-                    <mat-icon>check_circle</mat-icon>
-                    Validate JSON
-                  </button>
-                </div>
-              </div>
-
-              <mat-divider></mat-divider>
+      </div>
+    </mat-tab>
+
+    <!-- Test Tab -->
+    <mat-tab label="Test">
+      <div class="tab-content">
+        <div class="test-section">
+          <h3>Test API Call</h3>
+          
+          <div class="test-controls">
+            <button mat-raised-button color="primary" 
+                    (click)="testAPI()" 
+                    [disabled]="testing || !form.get('url')?.valid || !form.get('method')?.valid">
+              @if (testing) {
+                <mat-icon class="spin">sync</mat-icon>
+                Testing...
+              } @else {
+                <mat-icon>play_arrow</mat-icon>
+                Test API
+              }
+            </button>
 
-              <h4>Token Refresh (Optional)</h4>
+            <button mat-button (click)="updateTestRequestJson()">
+              <mat-icon>refresh</mat-icon>
+              Generate Test Data
+            </button>
+          </div>
 
-              <mat-form-field appearance="outline" class="full-width">
-                <mat-label>Token Refresh Endpoint</mat-label>
-                <input matInput formControlName="token_refresh_endpoint" 
-                       placeholder="https://api.example.com/refresh">
-              </mat-form-field>
+          <mat-form-field appearance="outline" class="full-width">
+            <mat-label>Test Request Body</mat-label>
+            <textarea matInput 
+                      [(ngModel)]="testRequestJson" 
+                      rows="10"
+                      placeholder="Enter test request JSON here"></textarea>
+            <mat-hint>Variables will be replaced with test values</mat-hint>
+          </mat-form-field>
 
-              <div class="form-section" *ngIf="form.get('auth.token_refresh_endpoint')?.value">
-                <label class="section-label">Token Refresh Body:</label>
-                <div class="json-editor">
-                  <textarea formControlName="token_refresh_body" 
-                            placeholder='{"refresh_token": "value"}'
-                            rows="4"
-                            class="json-textarea"></textarea>
-                  <button mat-button type="button" 
-                          (click)="validateJSON('auth.token_refresh_body')"
-                          [color]="validateJSON('auth.token_refresh_body') ? 'primary' : 'warn'">
-                    <mat-icon>check_circle</mat-icon>
-                    Validate JSON
-                  </button>
+          @if (testResult) {
+            <mat-divider></mat-divider>
+            
+            <div class="test-result" [class.success]="testResult.success" [class.error]="!testResult.success">
+              <h4>Test Result</h4>
+              
+              @if (testResult.success) {
+                <div class="result-status">
+                  <mat-icon>check_circle</mat-icon>
+                  <span>Success ({{ testResult.status_code }})</span>
                 </div>
-              </div>
+              } @else {
+                <div class="result-status">
+                  <mat-icon>error</mat-icon>
+                  <span>Failed: {{ testResult.error }}</span>
+                </div>
+              }
+
+              @if (testResult.response_time) {
+                <p><strong>Response Time:</strong> {{ testResult.response_time }}ms</p>
+              }
+
+              @if (testResult.response_body) {
+                <mat-form-field appearance="outline" class="full-width">
+                  <mat-label>Response Body</mat-label>
+                  <textarea matInput 
+                            [value]="testResult.response_body | json" 
+                            rows="10"
+                            readonly></textarea>
+                </mat-form-field>
+              }
+
+              @if (testResult.request_body) {
+                <mat-form-field appearance="outline" class="full-width">
+                  <mat-label>Actual Request Sent</mat-label>
+                  <textarea matInput 
+                            [value]="testResult.request_body | json" 
+                            rows="8"
+                            readonly></textarea>
+                </mat-form-field>
+              }
             </div>
-          </div>
+          }
         </div>
-      </mat-tab>
-
-      <!-- Test Tab -->
-      <mat-tab label="Test">
-        <div class="tab-content">
-          <div class="test-section">
-            <h4>Test API Configuration</h4>
-            <p>Test your API with sample data before saving.</p>
-
-            <div class="test-info">
-              <mat-chip-listbox>
-                <mat-chip-option selected>{{ form.get('method')?.value || 'POST' }}</mat-chip-option>
-                <mat-chip-option>{{ form.get('url')?.value || 'No URL set' }}</mat-chip-option>
-              </mat-chip-listbox>
-            </div>
-
-            <div class="form-section">
-              <label class="section-label">Test Request JSON:</label>
-              <div class="json-editor">
-                <textarea [(ngModel)]="testRequestJson" 
-                          [ngModelOptions]="{standalone: true}"
-                          rows="8"
-                          class="json-textarea"
-                          placeholder='{"key": "value"}'></textarea>
-                <button mat-button type="button" 
-                        (click)="updateTestRequestJson()">
-                  <mat-icon>refresh</mat-icon>
-                  Reset to Template
-                </button>
-              </div>
-              <p class="hint-text">
-                Edit the JSON above to customize test values. Template variables are replaced with placeholder values.
-              </p>
-            </div>
-
-            <button mat-raised-button color="accent" 
-                    (click)="testAPI()" 
-                    [disabled]="testing || !form.get('url')?.valid">
-              <mat-icon>play_arrow</mat-icon>
-              {{ testing ? 'Testing...' : 'Send Test Request' }}
-            </button>
-
-            <div *ngIf="testResult" class="test-result">
-              <h4>Test Result:</h4>
-              
-              <div class="result-status" [class.success]="testResult.success" [class.error]="!testResult.success">
-                <mat-icon>{{ testResult.success ? 'check_circle' : 'error' }}</mat-icon>
-                <span>{{ testResult.success ? 'Success' : 'Failed' }}</span>
-                <span *ngIf="testResult.status_code" class="status-code">
-                  Status: {{ testResult.status_code }}
-                </span>
-                <span *ngIf="testResult.response_time_ms" class="response-time">
-                  Time: {{ testResult.response_time_ms }}ms
-                </span>
-              </div>
-            
-              <div *ngIf="testResult.error" class="error-message">
-                <mat-icon>error_outline</mat-icon>
-                {{ testResult.error }}
-              </div>
-            
-              <div *ngIf="testResult.headers" class="response-section">
-                <h5>Response Headers:</h5>
-                <pre>{{ testResult.headers | json }}</pre>
-              </div>
-            
-              <div *ngIf="testResult.body !== undefined" class="response-section">
-                <h5>Response Body:</h5>
-                <pre>{{ testResult.body }}</pre>
-              </div>
+      </div>
+    </mat-tab>
+
+    <!-- Auth Tab -->
+    <mat-tab label="Authentication">
+      <div class="tab-content" [formGroup]="form.get('auth')">
+        <mat-checkbox formControlName="enabled">
+          Enable Authentication
+        </mat-checkbox>
+
+        @if (form.get('auth.enabled')?.value) {
+          <mat-divider></mat-divider>
+
+          <div class="auth-section">
+            <h3>Token Configuration</h3>
+
+            <mat-form-field appearance="outline">
+              <mat-label>Token Endpoint</mat-label>
+              <input matInput formControlName="token_endpoint" placeholder="https://api.example.com/auth/token">
+              <mat-hint>URL to obtain authentication token</mat-hint>
+              @if (form.get('auth.token_endpoint')?.hasError('required') && form.get('auth.token_endpoint')?.touched) {
+                <mat-error>Token endpoint is required when auth is enabled</mat-error>
+              }
+            </mat-form-field>
+
+            <mat-form-field appearance="outline">
+              <mat-label>Token Response Path</mat-label>
+              <input matInput formControlName="response_token_path" placeholder="token">
+              <mat-hint>JSON path to extract token from response</mat-hint>
+              @if (form.get('auth.response_token_path')?.hasError('required') && form.get('auth.response_token_path')?.touched) {
+                <mat-error>Token path is required when auth is enabled</mat-error>
+              }
+            </mat-form-field>
+
+            <mat-form-field appearance="outline" class="full-width">
+              <mat-label>Token Request Body</mat-label>
+              <textarea matInput 
+                        formControlName="token_request_body" 
+                        rows="6"
+                        (click)="saveCursorPosition('auth.token_request_body', $event)"
+                        (keyup)="saveCursorPosition('auth.token_request_body', $event)"
+                        placeholder='{"username": "{{config.api_username}}", "password": "{{config.api_password}}"}'></textarea>
+              <mat-hint>JSON body for token request</mat-hint>
+              @if (!validateJSON('auth.token_request_body')) {
+                <mat-error>Invalid JSON format</mat-error>
+              }
+            </mat-form-field>
+
+            <div class="template-variables">
+              <strong>Available Variables:</strong>
+              <mat-chip-set>
+                @for (variable of getTemplateVariables(); track variable) {
+                  <mat-chip (click)="insertTemplateVariable('auth.token_request_body', variable)">
+                    {{ variable }}
+                  </mat-chip>
+                }
+              </mat-chip-set>
             </div>
 
-            <div class="test-note">
-              <mat-icon>info</mat-icon>
-              <p>Note: Test requests use the JSON content from the text area above.</p>
+            <mat-divider></mat-divider>
+
+            <h3>Token Refresh (Optional)</h3>
+
+            <mat-form-field appearance="outline">
+              <mat-label>Refresh Endpoint</mat-label>
+              <input matInput formControlName="token_refresh_endpoint" placeholder="https://api.example.com/auth/refresh">
+              <mat-hint>URL to refresh expired token</mat-hint>
+            </mat-form-field>
+
+            <mat-form-field appearance="outline" class="full-width">
+              <mat-label>Refresh Request Body</mat-label>
+              <textarea matInput 
+                        formControlName="token_refresh_body" 
+                        rows="4"
+                        (click)="saveCursorPosition('auth.token_refresh_body', $event)"
+                        (keyup)="saveCursorPosition('auth.token_refresh_body', $event)"
+                        placeholder='{"refresh_token": "{{auth_tokens.api_name.refresh_token}}"}'></textarea>
+              <mat-hint>JSON body for refresh request</mat-hint>
+              @if (!validateJSON('auth.token_refresh_body')) {
+                <mat-error>Invalid JSON format</mat-error>
+              }
+            </mat-form-field>
+
+            <div class="template-variables">
+              <strong>Available Variables:</strong>
+              <mat-chip-set>
+                @for (variable of getTemplateVariables(); track variable) {
+                  <mat-chip (click)="insertTemplateVariable('auth.token_refresh_body', variable)">
+                    {{ variable }}
+                  </mat-chip>
+                }
+              </mat-chip-set>
             </div>
           </div>
-        </div>
-      </mat-tab>
-    </mat-tab-group>
-  </form>
+        }
+      </div>
+    </mat-tab>
+  </mat-tab-group>
 </mat-dialog-content>
 
 <mat-dialog-actions align="end">