From 394a85ef452c9f3b9ef01f9f0105a980599dd54e Mon Sep 17 00:00:00 2001
From: igor <mino@tpsoft.org>
Date: Sun, 29 Mar 2026 21:51:42 +0200
Subject: [PATCH] added TryIt buttom for HTML help, added Bearer token for
 testing API

---
 AGENTS.md        |    7 +
 README.md        |   13 +
 src/help.tpl.php | 1140 +++++++++++++++++++++++++++++++++++++---------
 3 files changed, 952 insertions(+), 208 deletions(-)

diff --git a/AGENTS.md b/AGENTS.md
index ed33b60..6519bf4 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -7,6 +7,9 @@ The project also generates frontend clients:
 - JavaScript client: `format=javascript` (`.js`)
 - TypeScript client: `format=typescript` (`.ts`, real typed output)
 
+The HTML help page is also interactive:
+- HTML help: `format=html` includes endpoint docs, a built-in request tester, and optional Bearer token support stored in browser `localStorage`
+
 ## Core files
 - `src/APIlite.php`: runtime, routing, docs JSON/HTML/client generation
 - `src/help.tpl.php`: HTML documentation template
@@ -19,7 +22,9 @@ The project also generates frontend clients:
 - Maintain both generated clients:
   - JavaScript stays plain JS.
   - TypeScript stays typed (interfaces + typed method signatures).
+- Keep the HTML help page usable both as documentation and as a lightweight in-browser tester.
 - If you change output field names in JSON help, update README and templates consistently.
+- If you change request metadata or tester behavior, update `README.md` and keep `src/help.tpl.php` aligned with the actual runtime request model.
 - Prefer small, focused changes over broad rewrites.
 
 ## Verification checklist
@@ -29,6 +34,8 @@ The project also generates frontend clients:
   - `php -l src/javascript.tpl.php`
   - `php -l src/typescript.tpl.php`
   - `php -l bin/apilite-files`
+- If HTML help changes, also render it once:
+  - `php test/APIcalculator.php --html`
 - If client generation changes, test with:
   - `php test/APIcalculator.php --javascript`
   - `php test/APIcalculator.php --typescript`
diff --git a/README.md b/README.md
index 2313a64..47d117d 100644
--- a/README.md
+++ b/README.md
@@ -231,6 +231,8 @@ and there is also an HTML version available
 
 <img src="test/Example.APIcalculator.png" />
 
+The HTML documentation page also includes a built-in interactive tester. Each endpoint can be expanded with `Try it`, filled directly in the browser, and executed against the current API endpoint. If needed, you can set a shared Bearer token at the top of the page. The token is stored in `localStorage` and is sent as `Authorization: Bearer ...` for test requests made from that page.
+
 You can also download generated frontend clients:
 
 * JavaScript: `?format=javascript`
@@ -263,3 +265,14 @@ These outputs can also be generated in command line:
 * HTML: `$> php APIcalculator.php --html`
 * JavaScript: `$> php APIcalculator.php --javascript > backend.js` (`--js` alias is available)
 * TypeScript: `$> php APIcalculator.php --typescript > backend.ts`
+
+## HTML help tester notes
+
+The built-in HTML tester currently follows the default APIlite request model:
+
+* request method is `POST`
+* endpoint action is sent as query parameter `action`
+* request fields are sent as top-level form fields
+* object and array field values are serialized as JSON strings
+
+Because the current metadata does not explicitly distinguish path params, query params and request body schemas, the HTML tester renders the parts that are reliably available today and keeps the rest minimal.
diff --git a/src/help.tpl.php b/src/help.tpl.php
index 891f032..3f55fe9 100644
--- a/src/help.tpl.php
+++ b/src/help.tpl.php
@@ -1,4 +1,7 @@
 <?php
+$mainEndpointUrl = $this->getCurrentUrl();
+$tokenStorageKey = 'apilite:' . $this->apiName . ':bearer-token';
+
 $formatTypeLabel = function (mixed $type): string {
 	if (is_array($type)) {
 		return implode(' | ', array_map(function ($item) {
@@ -8,6 +11,17 @@ $formatTypeLabel = function (mixed $type): string {
 	return is_string($type) ? $type : 'mixed';
 };
 
+$formatDefaultValue = function (mixed $value): string {
+	if (is_bool($value)) {
+		return $value ? 'true' : 'false';
+	}
+	if (is_array($value) || is_object($value)) {
+		$json = json_encode($value, JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE);
+		return is_string($json) ? $json : '';
+	}
+	return is_null($value) ? '' : (string) $value;
+};
+
 $renderTypeStructure = function (mixed $structure) use (&$renderTypeStructure, $formatTypeLabel): string {
 	if (!is_array($structure)) {
 		return '';
@@ -20,30 +34,92 @@ $renderTypeStructure = function (mixed $structure) use (&$renderTypeStructure, $
 		if (!is_array($item) || !isset($item['type'])) {
 			continue;
 		}
-		$html .= '<div style="margin-top: 1rem; padding: 1rem; background: #f8fafc; border: 1px solid #e1e5e9; border-radius: 8px;">';
-		$html .= '<div style="font-weight: 600; margin-bottom: 0.75rem;">' . htmlspecialchars($item['type']) . '</div>';
+		$html .= '<div class="type-structure">';
+		$html .= '<div class="type-structure-title">' . htmlspecialchars($item['type']) . '</div>';
 		if (!empty($item['recursive'])) {
-			$html .= '<div style="color: #64748b;">Recursive reference</div>';
+			$html .= '<div class="type-structure-empty">Recursive reference</div>';
 		} else if (!empty($item['properties']) && is_array($item['properties'])) {
-			$html .= '<ul style="margin: 0; padding-left: 1.25rem;">';
+			$html .= '<ul class="type-structure-list">';
 			foreach ($item['properties'] as $property) {
 				if (!is_array($property) || !isset($property['name'])) {
 					continue;
 				}
-				$html .= '<li style="margin-bottom: 0.5rem;">';
-				$html .= htmlspecialchars((string) $property['name']);
+				$html .= '<li class="type-structure-item">';
+				$html .= '<span class="type-structure-name">' . htmlspecialchars((string) $property['name']) . '</span>';
 				$html .= '<code class="parameter-type">' . htmlspecialchars($formatTypeLabel($property['type'] ?? null)) . '</code>';
 				$html .= $renderTypeStructure($property['type_structure'] ?? null);
 				$html .= '</li>';
 			}
 			$html .= '</ul>';
 		} else {
-			$html .= '<div style="color: #64748b;">No public properties</div>';
+			$html .= '<div class="type-structure-empty">No public properties</div>';
 		}
 		$html .= '</div>';
 	}
 	return $html;
 };
+
+$renderParamControl = function (string $methodName, array $param) use ($formatDefaultValue) {
+	$paramName = (string) ($param['name'] ?? '');
+	$paramType = strtolower((string) ($param['type'] ?? 'string'));
+	$paramDoc = (string) ($param['doc'] ?? '');
+	$paramOptional = !empty($param['optional']);
+	$defaultValue = $formatDefaultValue($param['default'] ?? null);
+	$fieldId = 'param-' . preg_replace('/[^a-z0-9_-]+/i', '-', $methodName . '-' . $paramName);
+	$placeholder = $paramOptional ? 'Optional' : 'Required';
+
+	ob_start();
+	?>
+	<div class="tester-field" data-field-wrapper>
+		<label class="tester-label" for="<?php echo htmlspecialchars($fieldId); ?>">
+			<span><?php echo htmlspecialchars($paramName); ?></span>
+			<code class="parameter-type"><?php echo htmlspecialchars((string) ($param['type'] ?? 'string')); ?></code>
+			<?php if ($paramOptional) { ?>
+				<span class="optional-badge">optional</span>
+			<?php } ?>
+		</label>
+		<?php if (in_array($paramType, array('array', 'object'), true)) { ?>
+			<textarea
+				id="<?php echo htmlspecialchars($fieldId); ?>"
+				class="tester-textarea request-field"
+				data-param-name="<?php echo htmlspecialchars($paramName); ?>"
+				data-param-type="<?php echo htmlspecialchars($paramType); ?>"
+				data-param-optional="<?php echo $paramOptional ? '1' : '0'; ?>"
+				placeholder="<?php echo htmlspecialchars($placeholder); ?>"
+				spellcheck="false"
+			><?php echo htmlspecialchars($defaultValue); ?></textarea>
+		<?php } else if (in_array($paramType, array('bool', 'boolean'), true)) { ?>
+			<select
+				id="<?php echo htmlspecialchars($fieldId); ?>"
+				class="tester-input request-field"
+				data-param-name="<?php echo htmlspecialchars($paramName); ?>"
+				data-param-type="<?php echo htmlspecialchars($paramType); ?>"
+				data-param-optional="<?php echo $paramOptional ? '1' : '0'; ?>"
+			>
+				<option value="" <?php echo $defaultValue === '' ? 'selected' : ''; ?>><?php echo $paramOptional ? 'Unset' : 'Select value'; ?></option>
+				<option value="true" <?php echo $defaultValue === 'true' ? 'selected' : ''; ?>>true</option>
+				<option value="false" <?php echo $defaultValue === 'false' ? 'selected' : ''; ?>>false</option>
+			</select>
+		<?php } else { ?>
+			<input
+				id="<?php echo htmlspecialchars($fieldId); ?>"
+				class="tester-input request-field"
+				data-param-name="<?php echo htmlspecialchars($paramName); ?>"
+				data-param-type="<?php echo htmlspecialchars($paramType); ?>"
+				data-param-optional="<?php echo $paramOptional ? '1' : '0'; ?>"
+				type="<?php echo in_array($paramType, array('int', 'integer', 'float', 'double'), true) ? 'number' : 'text'; ?>"
+				<?php if (in_array($paramType, array('float', 'double'), true)) { ?>step="any"<?php } ?>
+				value="<?php echo htmlspecialchars($defaultValue); ?>"
+				placeholder="<?php echo htmlspecialchars($placeholder); ?>"
+			>
+		<?php } ?>
+		<?php if ($paramDoc !== '') { ?>
+			<div class="tester-help"><?php echo htmlspecialchars($paramDoc); ?></div>
+		<?php } ?>
+	</div>
+	<?php
+	return trim((string) ob_get_clean());
+};
 ?>
 <!DOCTYPE html>
 <html lang="en">
@@ -54,7 +130,6 @@ $renderTypeStructure = function (mixed $structure) use (&$renderTypeStructure, $
 	<meta name="generator" content="APIlite">
 	<title><?php echo $this->apiName; ?></title>
 	<style>
-		/* Reset and base styles */
 		* {
 			margin: 0;
 			padding: 0;
@@ -68,14 +143,48 @@ $renderTypeStructure = function (mixed $structure) use (&$renderTypeStructure, $
 			background-color: #FFFFFF;
 		}
 
-		/* Container */
+		a {
+			color: #545BFE;
+			text-decoration: none;
+			font-weight: 500;
+			transition: color 0.3s ease;
+		}
+
+		a:hover {
+			color: #3d42d9;
+			text-decoration: underline;
+		}
+
+		code {
+			background-color: #323F4C;
+			color: #ffffff;
+			padding: 0.3rem 0.6rem;
+			border-radius: 4px;
+			font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+			font-size: 0.9rem;
+			font-weight: 500;
+		}
+
+		pre {
+			margin: 0;
+			font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+			white-space: pre-wrap;
+			word-break: break-word;
+		}
+
+		button,
+		input,
+		select,
+		textarea {
+			font: inherit;
+		}
+
 		.container {
 			max-width: 1200px;
 			margin: 0 auto;
 			padding: 0 20px;
 		}
 
-		/* Header */
 		.header {
 			background-color: #F4F5F8;
 			padding: 2rem;
@@ -87,10 +196,13 @@ $renderTypeStructure = function (mixed $structure) use (&$renderTypeStructure, $
 			font-size: 2.5rem;
 			font-weight: 700;
 			color: #2c3e50;
-			margin-bottom: 1rem;
+			margin-bottom: 0.4rem;
+		}
+
+		.header p {
+			color: #52606d;
 		}
 
-		/* Navigation menu */
 		.nav-menu {
 			background-color: #F4F5F8;
 			padding: 1rem 0;
@@ -105,12 +217,8 @@ $renderTypeStructure = function (mixed $structure) use (&$renderTypeStructure, $
 		}
 
 		.nav-links a {
-			color: #545BFE;
-			text-decoration: none;
-			font-weight: 500;
 			padding: 0.5rem 1rem;
 			border-radius: 6px;
-			transition: all 0.3s ease;
 		}
 
 		.nav-links a:hover {
@@ -119,12 +227,7 @@ $renderTypeStructure = function (mixed $structure) use (&$renderTypeStructure, $
 			transform: translateY(-2px);
 		}
 
-		/* Main content */
-		.main-content {
-			margin-bottom: 3rem;
-		}
-
-		/* Method sections */
+		.auth-panel,
 		.method-section {
 			background-color: #FFFFFF;
 			border: 1px solid #e1e5e9;
@@ -132,17 +235,42 @@ $renderTypeStructure = function (mixed $structure) use (&$renderTypeStructure, $
 			padding: 2rem;
 			margin-bottom: 2rem;
 			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-			transition: box-shadow 0.3s ease;
+		}
+
+		.auth-panel {
+			background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
+		}
+
+		.auth-panel-header {
+			display: flex;
+			justify-content: space-between;
+			gap: 1rem;
+			align-items: flex-start;
+			margin-bottom: 1rem;
+		}
+
+		.auth-panel h2,
+		.methods-section-title,
+		.method-title {
+			color: #2c3e50;
+		}
+
+		.auth-panel p {
+			color: #52606d;
+			margin-top: 0.3rem;
 		}
 
 		.method-section:hover {
 			box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
 		}
 
+		.main-content {
+			margin-bottom: 3rem;
+		}
+
 		.method-title {
 			font-size: 1.8rem;
 			font-weight: 600;
-			color: #2c3e50;
 			margin-bottom: 0.5rem;
 		}
 
@@ -150,10 +278,11 @@ $renderTypeStructure = function (mixed $structure) use (&$renderTypeStructure, $
 			font-style: italic;
 			color: #666;
 			margin-bottom: 1.5rem;
-			font-size: 1.1rem;
+			font-size: 1.05rem;
 		}
 
-		.endpoint-url {
+		.endpoint-url,
+		.info-block {
 			background-color: #F4F5F8;
 			padding: 1rem;
 			border-radius: 8px;
@@ -161,38 +290,15 @@ $renderTypeStructure = function (mixed $structure) use (&$renderTypeStructure, $
 			border-left: 4px solid #545BFE;
 		}
 
-		.endpoint-url strong {
+		.endpoint-url strong,
+		.info-block strong {
 			color: #2c3e50;
 			display: block;
 			margin-bottom: 0.5rem;
 		}
 
-		/* Links */
-		a {
-			color: #545BFE;
-			text-decoration: none;
-			font-weight: 500;
-			transition: color 0.3s ease;
-		}
-
-		a:hover {
-			color: #3d42d9;
-			text-decoration: underline;
-		}
-
-		/* Code styling */
-		code {
-			background-color: #323F4C;
-			color: #ffffff;
-			padding: 0.3rem 0.6rem;
-			border-radius: 4px;
-			font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
-			font-size: 0.9rem;
-			font-weight: 500;
-		}
-
-		/* Parameters */
-		.parameters {
+		.parameters,
+		.return-block {
 			margin-top: 1.5rem;
 		}
 
@@ -229,61 +335,6 @@ $renderTypeStructure = function (mixed $structure) use (&$renderTypeStructure, $
 			margin-left: 0.5rem;
 		}
 
-		/* Footer */
-		.footer {
-			background-color: #F4F5F8;
-			padding: 2rem 0;
-			text-align: center;
-			margin-top: 3rem;
-		}
-
-		/* Responsive design */
-		@media (max-width: 768px) {
-			.container {
-				padding: 0 15px;
-			}
-
-			.header h1 {
-				font-size: 2rem;
-			}
-
-			.nav-links {
-				flex-direction: column;
-				gap: 0.5rem;
-			}
-
-			.method-section {
-				padding: 1.5rem;
-			}
-
-			.method-title {
-				font-size: 1.5rem;
-			}
-
-			.endpoint-url {
-				word-break: break-all;
-			}
-		}
-
-		@media (max-width: 480px) {
-			.header {
-				padding: 1.5rem 0;
-			}
-
-			.header h1 {
-				font-size: 1.8rem;
-			}
-
-			.method-section {
-				padding: 1rem;
-			}
-
-			.method-title {
-				font-size: 1.3rem;
-			}
-		}
-
-		/* Methods grid */
 		.methods-grid {
 			display: grid;
 			grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
@@ -332,35 +383,9 @@ $renderTypeStructure = function (mixed $structure) use (&$renderTypeStructure, $
 			z-index: 1;
 		}
 
-		/*
-		.method-card:nth-child(odd) {
-			background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-		}
-
-		.method-card:nth-child(even) {
-			background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
-		}
-
-		.method-card:nth-child(3n) {
-			background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
-		}
-
-		.method-card:nth-child(4n) {
-			background: linear-gradient(135deg,rgb(86, 209, 127) 0%,rgb(52, 199, 172) 100%);
-		}
-
-		.method-card:nth-child(5n) {
-			background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
-		}
-		*/
-		.method-card {
-			background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-		}
-
 		.methods-section-title {
 			font-size: 2rem;
 			font-weight: 700;
-			color: #2c3e50;
 			margin-bottom: 1.5rem;
 			text-align: center;
 			position: relative;
@@ -378,146 +403,548 @@ $renderTypeStructure = function (mixed $structure) use (&$renderTypeStructure, $
 			border-radius: 2px;
 		}
 
-		/* Responsive adjustments for methods grid */
+		.type-structure {
+			margin-top: 1rem;
+			padding: 1rem;
+			background: #f8fafc;
+			border: 1px solid #e1e5e9;
+			border-radius: 8px;
+		}
+
+		.type-structure-title {
+			font-weight: 600;
+			margin-bottom: 0.75rem;
+		}
+
+		.type-structure-list {
+			margin: 0;
+			padding-left: 1.25rem;
+		}
+
+		.type-structure-item {
+			margin-bottom: 0.5rem;
+		}
+
+		.type-structure-name {
+			font-weight: 600;
+			color: #2c3e50;
+		}
+
+		.type-structure-empty {
+			color: #64748b;
+		}
+
+		.test-controls {
+			display: flex;
+			justify-content: flex-end;
+			margin-top: 1.5rem;
+		}
+
+		.primary-button,
+		.secondary-button {
+			border: 1px solid transparent;
+			border-radius: 8px;
+			padding: 0.8rem 1.1rem;
+			cursor: pointer;
+			font-weight: 600;
+			transition: all 0.2s ease;
+		}
+
+		.primary-button {
+			background: #545BFE;
+			color: #fff;
+		}
+
+		.primary-button:hover {
+			background: #454ce7;
+		}
+
+		.secondary-button {
+			background: #fff;
+			color: #334155;
+			border-color: #cbd5e1;
+		}
+
+		.secondary-button:hover {
+			background: #f8fafc;
+		}
+
+		.link-button {
+			background: transparent;
+			border: none;
+			color: #545BFE;
+			cursor: pointer;
+			font-weight: 600;
+			padding: 0;
+		}
+
+		.link-button:hover {
+			text-decoration: underline;
+		}
+
+		.tester {
+			margin-top: 1.5rem;
+			padding-top: 1.5rem;
+			border-top: 1px solid #e2e8f0;
+		}
+
+		.tester-grid {
+			display: grid;
+			grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
+			gap: 1.5rem;
+		}
+
+		.tester-card {
+			background: #f8fafc;
+			border: 1px solid #dbe4ee;
+			border-radius: 12px;
+			padding: 1.25rem;
+		}
+
+		.tester-card h3 {
+			font-size: 1.1rem;
+			color: #1e293b;
+			margin-bottom: 1rem;
+		}
+
+		.meta-grid,
+		.tester-fields {
+			display: grid;
+			grid-template-columns: repeat(2, minmax(0, 1fr));
+			gap: 1rem;
+		}
+
+		.tester-section {
+			margin-top: 1.25rem;
+		}
+
+		.tester-section h4 {
+			color: #334155;
+			margin-bottom: 0.7rem;
+		}
+
+		.tester-field {
+			display: flex;
+			flex-direction: column;
+			gap: 0.45rem;
+		}
+
+		.tester-label {
+			display: flex;
+			align-items: center;
+			flex-wrap: wrap;
+			gap: 0.4rem;
+			font-weight: 600;
+			color: #334155;
+		}
+
+		.tester-help,
+		.muted {
+			color: #64748b;
+		}
+
+		.tester-input,
+		.tester-textarea {
+			width: 100%;
+			border: 1px solid #cbd5e1;
+			border-radius: 8px;
+			padding: 0.8rem 0.9rem;
+			background: #fff;
+		}
+
+		.tester-input:focus,
+		.tester-textarea:focus {
+			outline: none;
+			border-color: #545BFE;
+			box-shadow: 0 0 0 3px rgba(84, 91, 254, 0.12);
+		}
+
+		.token-input {
+			font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+		}
+
+		.tester-textarea {
+			min-height: 120px;
+			resize: vertical;
+		}
+
+		.body-toolbar,
+		.execute-row {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			gap: 1rem;
+			flex-wrap: wrap;
+			margin-bottom: 0.75rem;
+		}
+
+		.no-data {
+			padding: 0.9rem 1rem;
+			border-radius: 8px;
+			background: #fff;
+			border: 1px dashed #cbd5e1;
+			color: #64748b;
+		}
+
+		.request-state {
+			color: #475569;
+			font-weight: 500;
+		}
+
+		.result-placeholder {
+			padding: 1rem;
+			border-radius: 8px;
+			border: 1px dashed #cbd5e1;
+			background: #fff;
+			color: #64748b;
+		}
+
+		.result-meta {
+			display: grid;
+			grid-template-columns: repeat(2, minmax(0, 1fr));
+			gap: 1rem;
+			margin-bottom: 1rem;
+		}
+
+		.result-meta-item {
+			padding: 0.85rem 1rem;
+			border-radius: 8px;
+			background: #fff;
+			border: 1px solid #dbe4ee;
+		}
+
+		.result-meta-label {
+			display: block;
+			font-size: 0.82rem;
+			text-transform: uppercase;
+			letter-spacing: 0.04em;
+			color: #64748b;
+			margin-bottom: 0.25rem;
+		}
+
+		.result-meta-value {
+			font-weight: 700;
+			color: #1e293b;
+		}
+
+		.result-output.success .result-meta-value.status {
+			color: #15803d;
+		}
+
+		.result-output.error .result-meta-value.status {
+			color: #b91c1c;
+		}
+
+		.response-block + .response-block {
+			margin-top: 1rem;
+		}
+
+		.response-block h4 {
+			color: #334155;
+			margin-bottom: 0.6rem;
+		}
+
+		.response-pre {
+			padding: 1rem;
+			border-radius: 8px;
+			background: #0f172a;
+			color: #e2e8f0;
+			min-height: 70px;
+		}
+
+		.footer {
+			background-color: #F4F5F8;
+			padding: 2rem 0;
+			text-align: center;
+			margin-top: 3rem;
+		}
+
+		.hidden {
+			display: none !important;
+		}
+
+		@media (max-width: 900px) {
+			.tester-grid {
+				grid-template-columns: 1fr;
+			}
+		}
+
 		@media (max-width: 768px) {
-			.methods-grid {
-				grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-				gap: 0.8rem;
+			.container {
+				padding: 0 15px;
 			}
 
-			.method-card {
-				padding: 1.2rem;
+			.header h1 {
+				font-size: 2rem;
 			}
 
-			.method-card a {
-				font-size: 1rem;
+			.nav-links {
+				flex-direction: column;
+				gap: 0.5rem;
 			}
 
-			.methods-section-title {
-				font-size: 1.7rem;
+			.method-section,
+			.auth-panel {
+				padding: 1.5rem;
+			}
+
+			.method-title {
+				font-size: 1.5rem;
+			}
+
+			.meta-grid,
+			.tester-fields,
+			.result-meta {
+				grid-template-columns: 1fr;
 			}
 		}
 
 		@media (max-width: 480px) {
+			.header {
+				padding: 1.5rem 0;
+			}
+
+			.header h1 {
+				font-size: 1.8rem;
+			}
+
+			.method-section,
+			.auth-panel {
+				padding: 1rem;
+			}
+
+			.method-title {
+				font-size: 1.3rem;
+			}
+
 			.methods-grid {
 				grid-template-columns: 1fr;
 				gap: 0.6rem;
 			}
-
-			.method-card {
-				padding: 1rem;
-			}
-
-			.method-card a {
-				font-size: 0.95rem;
-			}
-
-			.methods-section-title {
-				font-size: 1.5rem;
-			}
-		}
-
-		/* Utility classes */
-		.text-center {
-			text-align: center;
-		}
-
-		.mb-2 {
-			margin-bottom: 1rem;
-		}
-
-		.mb-3 {
-			margin-bottom: 1.5rem;
 		}
 	</style>
 </head>
 
 <body>
 	<div class="container">
-		<!-- Header -->
 		<header class="header">
 			<h1><?php echo $this->apiName; ?></h1>
+			<p>Interactive documentation for APIlite endpoints.</p>
 		</header>
 
-		<!-- Navigation Menu -->
 		<nav class="nav-menu">
 			<div class="nav-links">
-				<a href="<?php echo $this->getCurrentUrl(); ?>?format=json">🔗 JSON Documentation</a>
-				<a href="<?php echo $this->getCurrentUrl(); ?>?format=javascript">📄 JavaScript backend script</a>
-				<a href="<?php echo $this->getCurrentUrl(); ?>?format=typescript">📄 TypeScript backend script</a>
+				<a href="<?php echo htmlspecialchars($mainEndpointUrl); ?>?format=json">🔗 JSON Documentation</a>
+				<a href="<?php echo htmlspecialchars($mainEndpointUrl); ?>?format=javascript">📄 JavaScript backend script</a>
+				<a href="<?php echo htmlspecialchars($mainEndpointUrl); ?>?format=typescript">📄 TypeScript backend script</a>
 			</div>
 		</nav>
 
-		<!-- List of Methods -->
+		<section class="auth-panel">
+			<div class="auth-panel-header">
+				<div>
+					<h2>Authorization</h2>
+					<p>Optional Bearer token used for every test request from this page.</p>
+				</div>
+				<button type="button" class="secondary-button" id="clear-bearer-token">Clear token</button>
+			</div>
+			<div class="tester-field">
+				<label class="tester-label" for="bearer-token-input">
+					<span>Bearer token</span>
+				</label>
+				<input
+					id="bearer-token-input"
+					class="tester-input token-input"
+					type="text"
+					placeholder="Paste Bearer token here"
+					autocomplete="off"
+				>
+				<div class="tester-help">Stored locally in this browser and sent as <code>Authorization: Bearer ...</code>.</div>
+			</div>
+		</section>
+
 		<section class="method-section">
 			<h2 class="methods-section-title">List of Methods</h2>
 			<div class="methods-grid">
-				<?php if (is_array($this->methods)) foreach ($this->methods as $index => $method) { ?>
+				<?php if (is_array($this->methods)) foreach ($this->methods as $method) { ?>
 					<div class="method-card">
-						<a href="#<?php echo $method['name']; ?>"><?php echo $method['name']; ?></a>
+						<a href="#<?php echo htmlspecialchars($method['name']); ?>"><?php echo htmlspecialchars($method['name']); ?></a>
 					</div>
 				<?php } ?>
 			</div>
 		</section>
 
-		<!-- Main Content -->
 		<main class="main-content">
-			<div class="endpoint-url mb-3">
+			<div class="endpoint-url">
 				<strong>Main API Endpoint:</strong>
-				<a href="<?php echo $this->getCurrentUrl(); ?>"><?php echo $this->getCurrentUrl(); ?></a>
+				<a href="<?php echo htmlspecialchars($mainEndpointUrl); ?>"><?php echo htmlspecialchars($mainEndpointUrl); ?></a>
 			</div>
 
-			<?php if (is_array($this->methods)) foreach ($this->methods as $index => $method) { ?>
-				<section class="method-section" id="<?php echo $method['name']; ?>">
-					<h2 class="method-title"><?php echo $method['name']; ?></h2>
+			<?php if (is_array($this->methods)) foreach ($this->methods as $method) {
+				$methodName = (string) $method['name'];
+				$methodEndpoint = $mainEndpointUrl . '?action=' . rawurlencode($methodName);
+				$methodParams = is_array($method['params'] ?? null) ? $method['params'] : array();
+				$testerId = 'tester-' . preg_replace('/[^a-z0-9_-]+/i', '-', $methodName);
+			?>
+				<section class="method-section" id="<?php echo htmlspecialchars($methodName); ?>">
+					<h2 class="method-title"><?php echo htmlspecialchars($methodName); ?></h2>
 
 					<?php if (!empty($method['description'])) { ?>
-						<p class="method-description"><?php echo $method['description']; ?></p>
+						<p class="method-description"><?php echo nl2br(htmlspecialchars((string) $method['description'])); ?></p>
 					<?php } ?>
 
 					<div class="endpoint-url">
 						<strong>Endpoint URL:</strong>
-						<a href="<?php echo $this->getCurrentUrl(); ?>?action=<?php echo $method['name']; ?>">
-							<?php echo $this->getCurrentUrl(); ?>?action=<?php echo $method['name']; ?>
-						</a>
+						<a href="<?php echo htmlspecialchars($methodEndpoint); ?>"><?php echo htmlspecialchars($methodEndpoint); ?></a>
 					</div>
 
-					<?php if (is_array($method['params']) && !empty($method['params'])) { ?>
+					<div class="info-block">
+						<strong>HTTP Method:</strong>
+						<code>POST</code>
+					</div>
+
+					<?php if (!empty($methodParams)) { ?>
 						<div class="parameters">
 							<h3 style="margin-bottom: 1rem; color: #2c3e50;">Parameters:</h3>
-
-							<?php foreach ($method['params'] as $param) { ?>
+							<?php foreach ($methodParams as $param) { ?>
 								<div class="parameter">
 									<div class="parameter-name">
-										<?php echo $param['name']; ?>
-										<code class="parameter-type"><?php echo $param['type']; ?></code>
-										<?php if ($param['optional']) { ?>
+										<?php echo htmlspecialchars((string) $param['name']); ?>
+										<code class="parameter-type"><?php echo htmlspecialchars((string) ($param['type'] ?? 'mixed')); ?></code>
+										<?php if (!empty($param['optional'])) { ?>
 											<span class="optional-badge">optional</span>
 										<?php } ?>
 									</div>
-									<div class="parameter-description">
-										<?php echo $param['doc']; ?>
-									</div>
+									<?php if (!empty($param['doc'])) { ?>
+										<div class="parameter-description"><?php echo htmlspecialchars((string) $param['doc']); ?></div>
+									<?php } ?>
 								</div>
 							<?php } ?>
-
-							<h3 style="margin-bottom: 1rem; color: #2c3e50; display: inline-block;">Return:</h3>
-							<?php if (is_string($method['return'])) { ?>
-							<code class="parameter-type"><?php echo $method['return']; ?></code>
-							<?php } ?>
-							<?php if (is_array($method['return'])) foreach ($method['return'] as $return) { ?>
-							<code class="parameter-type"><?php echo $return; ?></code>
-							<?php } ?>
-							<?php echo $renderTypeStructure($method['return_structure'] ?? null); ?>
-
-
 						</div>
 					<?php } ?>
+
+					<div class="return-block">
+						<h3 style="margin-bottom: 1rem; color: #2c3e50;">Return:</h3>
+						<?php if (is_string($method['return'])) { ?>
+							<code class="parameter-type"><?php echo htmlspecialchars($method['return']); ?></code>
+						<?php } ?>
+						<?php if (is_array($method['return'])) foreach ($method['return'] as $return) { ?>
+							<code class="parameter-type"><?php echo htmlspecialchars((string) $return); ?></code>
+						<?php } ?>
+						<?php echo $renderTypeStructure($method['return_structure'] ?? null); ?>
+					</div>
+
+					<div class="test-controls">
+						<button
+							type="button"
+							class="primary-button tester-toggle"
+							data-target="<?php echo htmlspecialchars($testerId); ?>"
+						>Try it</button>
+					</div>
+
+					<div
+						class="tester hidden"
+						id="<?php echo htmlspecialchars($testerId); ?>"
+						data-method-name="<?php echo htmlspecialchars($methodName); ?>"
+						data-endpoint-url="<?php echo htmlspecialchars($mainEndpointUrl); ?>"
+					>
+						<div class="tester-grid">
+							<div class="tester-card">
+								<h3>Request</h3>
+
+								<div class="meta-grid">
+									<div class="tester-field">
+										<label class="tester-label">
+											<span>HTTP method</span>
+										</label>
+										<input class="tester-input" type="text" value="POST" readonly>
+									</div>
+									<div class="tester-field">
+										<label class="tester-label">
+											<span>URL endpoint</span>
+										</label>
+										<input class="tester-input test-url" type="text" value="<?php echo htmlspecialchars($mainEndpointUrl); ?>" readonly>
+									</div>
+								</div>
+
+								<div class="tester-section">
+									<h4>Path parameters</h4>
+									<div class="no-data">No path parameters are available in the current APIlite metadata.</div>
+								</div>
+
+								<div class="tester-section">
+									<h4>Query parameters</h4>
+									<div class="tester-field">
+										<label class="tester-label">
+											<span>action</span>
+											<code class="parameter-type">string</code>
+										</label>
+										<input class="tester-input" type="text" value="<?php echo htmlspecialchars($methodName); ?>" readonly>
+									</div>
+								</div>
+
+								<div class="tester-section">
+									<h4>Request fields</h4>
+									<?php if (!empty($methodParams)) { ?>
+										<div class="tester-fields">
+											<?php foreach ($methodParams as $param) {
+												echo $renderParamControl($methodName, $param);
+											} ?>
+										</div>
+									<?php } else { ?>
+										<div class="no-data">This endpoint has no documented input parameters.</div>
+									<?php } ?>
+								</div>
+
+								<?php if (!empty($methodParams)) { ?>
+									<div class="tester-section">
+										<div class="body-toolbar">
+											<h4>Request body</h4>
+											<button type="button" class="link-button sync-body">Sync from fields</button>
+										</div>
+										<p class="muted" style="margin-bottom: 0.75rem;">Edit JSON if needed. It will be converted into top-level request fields before sending so it stays compatible with the current APIlite backend.</p>
+										<textarea class="tester-textarea request-body" spellcheck="false"></textarea>
+									</div>
+								<?php } ?>
+
+								<div class="tester-section">
+									<div class="execute-row">
+										<button type="button" class="primary-button execute-request">Execute</button>
+										<div class="request-state" aria-live="polite"></div>
+									</div>
+								</div>
+							</div>
+
+							<div class="tester-card">
+								<h3>Response</h3>
+								<div class="result-placeholder">Execute the request to see status, headers and body.</div>
+								<div class="result-output hidden">
+									<div class="result-meta">
+										<div class="result-meta-item">
+											<span class="result-meta-label">HTTP status</span>
+											<strong class="result-meta-value status">-</strong>
+										</div>
+										<div class="result-meta-item">
+											<span class="result-meta-label">Content-Type</span>
+											<strong class="result-meta-value content-type">-</strong>
+										</div>
+									</div>
+									<div class="response-block">
+										<h4>Headers</h4>
+										<pre class="response-pre response-headers"></pre>
+									</div>
+									<div class="response-block">
+										<h4>Body</h4>
+										<pre class="response-pre response-body"></pre>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
 				</section>
 			<?php } ?>
 		</main>
 
-		<!-- Footer -->
 		<footer class="footer">
 			<p>Generated with <a href="https://gitea.tpsoft.org/TPsoft.org/APIlite" target="_blank">APIlite</a>
 				by <a href="https://tpsoft.org" target="_blank">TPsoft.org</a>
@@ -526,6 +953,303 @@ $renderTypeStructure = function (mixed $structure) use (&$renderTypeStructure, $
 			</p>
 		</footer>
 	</div>
+
+	<script>
+	(() => {
+		const tokenStorageKey = <?php echo json_encode($tokenStorageKey); ?>;
+		const bearerInput = document.getElementById('bearer-token-input');
+		const clearTokenButton = document.getElementById('clear-bearer-token');
+		const testerToggles = document.querySelectorAll('.tester-toggle');
+		const testers = document.querySelectorAll('.tester');
+
+		const readStoredToken = () => {
+			try {
+				return window.localStorage.getItem(tokenStorageKey) ?? '';
+			} catch (error) {
+				return '';
+			}
+		};
+
+		const storeToken = (value) => {
+			try {
+				if (value) {
+					window.localStorage.setItem(tokenStorageKey, value);
+				} else {
+					window.localStorage.removeItem(tokenStorageKey);
+				}
+			} catch (error) {
+				// Ignore storage errors and keep the UI usable.
+			}
+		};
+
+		const parseScalarValue = (value, type) => {
+			switch (type) {
+				case 'int':
+				case 'integer':
+					return Number.parseInt(value, 10);
+				case 'float':
+				case 'double':
+					return Number.parseFloat(value);
+				case 'bool':
+				case 'boolean':
+					if (value === 'true') return true;
+					if (value === 'false') return false;
+					return value;
+				default:
+					return value;
+			}
+		};
+
+		const getFieldValue = (field) => {
+			const fieldType = (field.dataset.paramType || 'string').toLowerCase();
+			const rawValue = field.value;
+
+			if (rawValue === '') {
+				return undefined;
+			}
+
+			if (fieldType === 'array' || fieldType === 'object') {
+				try {
+					return JSON.parse(rawValue);
+				} catch (error) {
+					throw new Error(`Parameter "${field.dataset.paramName}" must contain valid JSON.`);
+				}
+			}
+
+			if (fieldType === 'int' || fieldType === 'integer' || fieldType === 'float' || fieldType === 'double') {
+				const numberValue = parseScalarValue(rawValue, fieldType);
+				if (Number.isNaN(numberValue)) {
+					throw new Error(`Parameter "${field.dataset.paramName}" must be a valid number.`);
+				}
+				return numberValue;
+			}
+
+			return parseScalarValue(rawValue, fieldType);
+		};
+
+		const buildPayloadFromFields = (tester) => {
+			const payload = {};
+			const fields = tester.querySelectorAll('.request-field');
+			fields.forEach((field) => {
+				const paramName = field.dataset.paramName;
+				if (!paramName) {
+					return;
+				}
+				const value = getFieldValue(field);
+				if (typeof value !== 'undefined') {
+					payload[paramName] = value;
+				}
+			});
+			return payload;
+		};
+
+		const syncRequestBody = (tester, force = false) => {
+			const textarea = tester.querySelector('.request-body');
+			if (!textarea) {
+				return;
+			}
+			if (!force && textarea.dataset.dirty === 'true') {
+				return;
+			}
+			try {
+				const payload = buildPayloadFromFields(tester);
+				textarea.value = JSON.stringify(payload, null, 2);
+				textarea.dataset.dirty = 'false';
+			} catch (error) {
+				textarea.dataset.dirty = 'false';
+				textarea.value = '{}';
+			}
+		};
+
+		const getPayloadFromTester = (tester) => {
+			const textarea = tester.querySelector('.request-body');
+			if (!textarea) {
+				return buildPayloadFromFields(tester);
+			}
+			const raw = textarea.value.trim();
+			if (raw === '') {
+				return {};
+			}
+			let payload;
+			try {
+				payload = JSON.parse(raw);
+			} catch (error) {
+				throw new Error('Request body must be valid JSON.');
+			}
+			if (payload === null || Array.isArray(payload) || typeof payload !== 'object') {
+				throw new Error('Request body JSON must be an object with top-level fields.');
+			}
+			return payload;
+		};
+
+		const encodePayload = (payload) => {
+			const body = new URLSearchParams();
+			Object.entries(payload).forEach(([key, value]) => {
+				if (typeof value === 'undefined') {
+					return;
+				}
+				if (value !== null && typeof value === 'object') {
+					body.append(key, JSON.stringify(value));
+				} else {
+					body.append(key, String(value));
+				}
+			});
+			return body;
+		};
+
+		const formatHeaders = (headers) => {
+			const lines = [];
+			headers.forEach((value, key) => {
+				lines.push(`${key}: ${value}`);
+			});
+			return lines.length > 0 ? lines.join('\n') : '(no response headers)';
+		};
+
+		const formatBody = (bodyText, contentType) => {
+			const trimmed = bodyText.trim();
+			const looksLikeJson = contentType.includes('application/json') || trimmed.startsWith('{') || trimmed.startsWith('[');
+			if (!looksLikeJson) {
+				return bodyText || '(empty body)';
+			}
+			try {
+				return JSON.stringify(JSON.parse(bodyText), null, 2);
+			} catch (error) {
+				return bodyText || '(empty body)';
+			}
+		};
+
+		const setResult = (tester, options) => {
+			const placeholder = tester.querySelector('.result-placeholder');
+			const output = tester.querySelector('.result-output');
+			const statusNode = tester.querySelector('.result-meta-value.status');
+			const contentTypeNode = tester.querySelector('.result-meta-value.content-type');
+			const headersNode = tester.querySelector('.response-headers');
+			const bodyNode = tester.querySelector('.response-body');
+
+			placeholder.classList.add('hidden');
+			output.classList.remove('hidden');
+			output.classList.remove('success', 'error');
+			output.classList.add(options.ok ? 'success' : 'error');
+			statusNode.textContent = options.statusText;
+			contentTypeNode.textContent = options.contentType || '(unknown)';
+			headersNode.textContent = options.headers;
+			bodyNode.textContent = options.body;
+		};
+
+		const executeTester = async (tester) => {
+			const stateNode = tester.querySelector('.request-state');
+			const methodName = tester.dataset.methodName || '';
+			const endpointUrl = tester.dataset.endpointUrl || window.location.href;
+
+			stateNode.textContent = 'Sending request...';
+
+			try {
+				const payload = getPayloadFromTester(tester);
+				const url = new URL(endpointUrl, window.location.href);
+				url.searchParams.set('action', methodName);
+
+				const headers = {
+					'Accept': 'application/json, text/plain, */*'
+				};
+				const token = bearerInput ? bearerInput.value.trim() : '';
+				if (token !== '') {
+					headers['Authorization'] = `Bearer ${token}`;
+				}
+
+				const body = encodePayload(payload);
+				const fetchOptions = {
+					method: 'POST',
+					headers,
+					body: body.toString()
+				};
+				if (body.toString() !== '') {
+					headers['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
+				} else {
+					delete fetchOptions.body;
+				}
+
+				const response = await fetch(url.toString(), fetchOptions);
+				const responseText = await response.text();
+				const contentType = response.headers.get('content-type') || '';
+
+				setResult(tester, {
+					ok: response.ok,
+					statusText: `${response.status} ${response.statusText}`.trim(),
+					contentType,
+					headers: formatHeaders(response.headers),
+					body: formatBody(responseText, contentType)
+				});
+				stateNode.textContent = response.ok ? 'Request completed.' : 'Request completed with error status.';
+			} catch (error) {
+				setResult(tester, {
+					ok: false,
+					statusText: 'CLIENT ERROR',
+					contentType: 'text/plain',
+					headers: '(no response headers)',
+					body: error instanceof Error ? error.message : String(error)
+				});
+				stateNode.textContent = 'Request failed.';
+			}
+		};
+
+		if (bearerInput) {
+			bearerInput.value = readStoredToken();
+			bearerInput.addEventListener('input', () => {
+				storeToken(bearerInput.value.trim());
+			});
+		}
+
+		if (clearTokenButton && bearerInput) {
+			clearTokenButton.addEventListener('click', () => {
+				bearerInput.value = '';
+				storeToken('');
+			});
+		}
+
+		testerToggles.forEach((toggle) => {
+			toggle.addEventListener('click', () => {
+				const tester = document.getElementById(toggle.dataset.target || '');
+				if (!tester) {
+					return;
+				}
+				const shouldShow = tester.classList.contains('hidden');
+				tester.classList.toggle('hidden', !shouldShow);
+				toggle.textContent = shouldShow ? 'Hide tester' : 'Try it';
+				if (shouldShow) {
+					syncRequestBody(tester, true);
+				}
+			});
+		});
+
+		testers.forEach((tester) => {
+			tester.querySelectorAll('.request-field').forEach((field) => {
+				field.addEventListener('input', () => syncRequestBody(tester));
+				field.addEventListener('change', () => syncRequestBody(tester));
+			});
+
+			const bodyTextarea = tester.querySelector('.request-body');
+			if (bodyTextarea) {
+				bodyTextarea.addEventListener('input', () => {
+					bodyTextarea.dataset.dirty = 'true';
+				});
+			}
+
+			const syncButton = tester.querySelector('.sync-body');
+			if (syncButton) {
+				syncButton.addEventListener('click', () => syncRequestBody(tester, true));
+			}
+
+			const executeButton = tester.querySelector('.execute-request');
+			if (executeButton) {
+				executeButton.addEventListener('click', () => {
+					executeTester(tester);
+				});
+			}
+
+			syncRequestBody(tester, true);
+		});
+	})();
+	</script>
 </body>
 
 </html>