appflare 0.2.30 → 0.2.32

package/cli/templates/dashboard/builders/functions/render-page/scripts.ts

@@ -1,554 +1,554 @@
-import { DiscoveredHandlerOperation } from "../../../../../utils/handler-discovery";
-
-export function renderScripts(h: DiscoveredHandlerOperation): string {
-	const isQuery = h.kind === "query";
-	const routePath = h.routePath;
-	// handlerName matches the key used in realtimeQueryHandlers registry
-	const realtimeQueryName = h.handlerName ?? h.routePath;
-	// Only queries can be subscribed to via realtime
-	const isRealtimeSupported = isQuery;
-
-	return `
-		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css">
-		<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
-
-		<script>
-			// ── Tab switching ──────────────────────────────────────────────────────────
-			window._currentResultTab = 'body';
-
-			window.switchResultTab = function(tab) {
-				window._currentResultTab = tab;
-				['body', 'headers', 'info', 'realtime'].forEach(function(t) {
-					var pane = document.getElementById('result-tab-' + t);
-					var btn = document.getElementById('tab-' + (t === 'headers' ? 'resp-headers' : t));
-					if (pane) pane.classList.toggle('hidden', t !== tab);
-					if (btn) btn.classList.toggle('tab-active', t === tab);
-				});
-			};
-
-			window.switchRequestTab = function(tab) {
-				['args', 'auth', 'headers'].forEach(function(t) {
-					var pane = document.getElementById('request-tab-' + t);
-					var btn = document.getElementById('req-tab-btn-' + t);
-					if (pane) pane.classList.toggle('hidden', t !== tab);
-					if (btn) btn.classList.toggle('tab-active', t === tab);
-				});
-			};
-
-			// ── Header key-value rows ──────────────────────────────────────────────────
-			var _headerRowId = 0;
-
-			window.addHeaderRow = function(key, value) {
-				key = key || '';
-				value = value || '';
-				var id = ++_headerRowId;
-				var container = document.getElementById('headers-rows');
-
-				var row = document.createElement('div');
-				row.id = 'header-row-' + id;
-				row.className = 'flex items-center gap-2';
-
-				var keyInput = document.createElement('input');
-				keyInput.type = 'text';
-				keyInput.placeholder = 'Header-Name';
-				keyInput.setAttribute('data-hdr-key', '');
-				keyInput.value = key;
-				keyInput.className = 'input input-xs input-bordered font-mono w-2/5 bg-base-200/30 focus:bg-base-100 focus:border-primary transition-all rounded-lg border-base-200';
-
-				var valInput = document.createElement('input');
-				valInput.type = 'text';
-				valInput.placeholder = 'value';
-				valInput.setAttribute('data-hdr-val', '');
-				valInput.value = value;
-				valInput.className = 'input input-xs input-bordered font-mono flex-1 bg-base-200/30 focus:bg-base-100 focus:border-primary transition-all rounded-lg border-base-200';
-
-				var removeBtn = document.createElement('button');
-				removeBtn.type = 'button';
-				removeBtn.className = 'btn btn-xs btn-ghost text-error opacity-40 hover:opacity-100 px-1.5';
-				removeBtn.innerHTML = '<iconify-icon icon="solar:close-circle-linear" width="14" height="14"></iconify-icon>';
-				removeBtn.onclick = function() { row.remove(); };
-
-				row.appendChild(keyInput);
-				row.appendChild(valInput);
-				row.appendChild(removeBtn);
-				container.appendChild(row);
-			};
-
-			// ── Collect args from server-rendered inputs ───────────────────────────────
-			function collectArgs() {
-				var result = {};
-				document.querySelectorAll('#args-rows [data-arg-key]').forEach(function(el) {
-					var key = el.getAttribute('data-arg-key');
-					var type = el.getAttribute('data-arg-type');
-					if (!key) return;
-					var value;
-					if (type === 'boolean') {
-						value = el.checked;
-					} else if (type === 'number') {
-						var raw = el.value.trim();
-						value = raw === '' ? undefined : Number(raw);
-					} else {
-						value = el.value;
-					}
-					if (value !== undefined && value !== '') {
-						result[key] = value;
-					}
-				});
-				return result;
-			}
-
-			function collectHeaders() {
-				var result = {};
-				document.querySelectorAll('#headers-rows [data-hdr-key]').forEach(function(keyEl) {
-					var k = keyEl.value.trim();
-					var v = keyEl.parentElement.querySelector('[data-hdr-val]').value;
-					if (k) result[k] = v;
-				});
-				return result;
-			}
-
-			// ── Token visibility ──────────────────────────────────────────────────────
-			window.toggleTokenVisibility = function() {
-				var inp = document.getElementById('bearer-token-input');
-				var icon = document.getElementById('token-eye-icon');
-				if (!inp) return;
-				if (inp.type === 'password') {
-					inp.type = 'text';
-					if (icon) icon.setAttribute('icon', 'solar:eye-closed-linear');
-				} else {
-					inp.type = 'password';
-					if (icon) icon.setAttribute('icon', 'solar:eye-linear');
-				}
-			};
-
-			// ── Render helpers ─────────────────────────────────────────────────────────
-			function esc(str) {
-				return String(str).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
-			}
-
-			function showBodyLoading() {
-				var empty = document.getElementById('result-empty-state');
-				if (empty) empty.classList.add('hidden');
-				var content = document.getElementById('result-body-content');
-				if (content) {
-					content.classList.remove('hidden');
-					content.innerHTML = '<div class="flex items-center justify-center h-full min-h-[200px]"><span class="loading loading-ring loading-md text-primary"></span></div>';
-				}
-			}
-
-			function showBodyError(msg) {
-				var empty = document.getElementById('result-empty-state');
-				if (empty) empty.classList.add('hidden');
-				var content = document.getElementById('result-body-content');
-				if (content) {
-					content.classList.remove('hidden');
-					content.innerHTML = '<div class="p-5 text-error"><p class="font-bold mb-1 text-xs uppercase tracking-wider">Error</p><pre class="text-sm whitespace-pre-wrap">' + esc(msg) + '</pre></div>';
-				}
-			}
-
-			function renderBodyJson(jsonStr) {
-				var empty = document.getElementById('result-empty-state');
-				if (empty) empty.classList.add('hidden');
-				var content = document.getElementById('result-body-content');
-				if (!content) return;
-				content.classList.remove('hidden');
-				content.innerHTML = '<pre style="margin:0;padding:1rem"><code class="language-json">' + esc(jsonStr) + '</code></pre>';
-				if (window.hljs) hljs.highlightAll();
-			}
-
-			function renderBodyText(text) {
-				var empty = document.getElementById('result-empty-state');
-				if (empty) empty.classList.add('hidden');
-				var content = document.getElementById('result-body-content');
-				if (!content) return;
-				content.classList.remove('hidden');
-				content.innerHTML = '<pre style="margin:0;padding:1rem;white-space:pre-wrap;word-break:break-all">' + esc(text) + '</pre>';
-			}
-
-			function renderStatusBadge(status, elapsed) {
-				var badge = document.getElementById('res-status-badge');
-				var elBadge = document.getElementById('res-elapsed-badge');
-				if (badge) {
-					badge.className = 'badge badge-sm font-mono font-bold ' + (status < 300 ? 'badge-success' : status < 400 ? 'badge-warning' : 'badge-error');
-					badge.textContent = status;
-					badge.classList.remove('hidden');
-				}
-				if (elBadge) {
-					elBadge.textContent = elapsed + 'ms';
-					elBadge.classList.remove('hidden');
-				}
-			}
-
-			function renderResponseHeaders(headers) {
-				var el = document.getElementById('result-headers-content');
-				if (!el) return;
-				var entries = Object.entries(headers);
-				if (!entries.length) {
-					el.innerHTML = '<p class="text-xs opacity-40 italic p-2">No headers returned.</p>';
-					return;
-				}
-				var rows = entries.map(function(pair) {
-					return '<tr><td class="font-mono text-xs font-medium opacity-70">' + esc(pair[0]) + '</td><td class="font-mono text-xs opacity-50 break-all">' + esc(pair[1]) + '</td></tr>';
-				}).join('');
-				el.innerHTML = '<table class="table table-xs w-full"><thead><tr>' +
-					'<th class="text-[10px] uppercase tracking-wider opacity-40 font-bold">Header</th>' +
-					'<th class="text-[10px] uppercase tracking-wider opacity-40 font-bold">Value</th>' +
-					'</tr></thead><tbody>' + rows + '</tbody></table>';
-			}
-
-			function renderInfo(data) {
-				var el = document.getElementById('result-info-content');
-				if (!el) return;
-				var items = [
-					{ label: 'Status', value: data.status + ' ' + data.statusText, color: data.status < 300 ? 'text-success' : data.status < 400 ? 'text-warning' : 'text-error' },
-					{ label: 'Elapsed', value: data.elapsed + ' ms', color: '' },
-					{ label: 'Method', value: data.method, color: '' },
-					{ label: 'URL', value: data.url, color: '' },
-					{ label: 'Content-Type', value: data.contentType || '—', color: '' },
-				];
-				var html = '<div class="flex flex-col gap-3 p-4">';
-				items.forEach(function(item) {
-					html += '<div class="flex flex-col gap-0.5">';
-					html += '<span class="text-[10px] font-bold uppercase tracking-wider opacity-40">' + esc(item.label) + '</span>';
-					html += '<span class="font-mono text-sm break-all ' + (item.color || 'opacity-70') + '">' + esc(String(item.value)) + '</span>';
-					html += '</div>';
-				});
-				html += '</div>';
-				el.innerHTML = html;
-			}
-
-			// ── Main execution ─────────────────────────────────────────────────────────
-			window.executeFn = async function() {
-				// If realtime is enabled, connect/reconnect after execute completes
-				var shouldConnectRealtime = _rtEnabled && _isRealtimeSupported;
-				var indicator = document.getElementById('execution-indicator');
-				var headerErr = document.getElementById('headers-error');
-
-				var args = collectArgs();
-				var customHeaders = collectHeaders();
-				var token = (document.getElementById('bearer-token-input') || {}).value || '';
-
-				if (headerErr) headerErr.classList.add('hidden');
-
-				// Show loading
-				if (indicator) indicator.classList.remove('opacity-0');
-				showBodyLoading();
-
-				var isQuery = ${isQuery};
-				var method = isQuery ? 'GET' : 'POST';
-				var pathWithQuery = '${routePath}';
-
-				if (isQuery && Object.keys(args).length > 0) {
-					var params = new URLSearchParams();
-					Object.entries(args).forEach(function(entry) {
-						var key = entry[0];
-						var value = entry[1];
-						if (value !== undefined && value !== null) {
-							if (Array.isArray(value)) {
-								value.forEach(function(v) { params.append(key, typeof v === 'object' ? JSON.stringify(v) : String(v)); });
-							} else if (typeof value === 'object') {
-								params.append(key, JSON.stringify(value));
-							} else {
-								params.append(key, String(value));
-							}
-						}
-					});
-					var qs = params.toString();
-					if (qs) pathWithQuery += '?' + qs;
-				}
-
-				var fetchHeaders = Object.assign({ 'Content-Type': 'application/json' }, customHeaders);
-				if (token) fetchHeaders['Authorization'] = 'Bearer ' + token;
-
-				var startTime = performance.now();
-
-				try {
-					var res = await fetch(pathWithQuery, {
-						method: method,
-						headers: fetchHeaders,
-						body: method === 'POST' ? JSON.stringify(args) : undefined,
-					});
-
-					var elapsed = Math.round(performance.now() - startTime);
-					var contentType = res.headers.get('content-type') || '';
-					var rawBody = await res.text();
-
-					var parsedBody = rawBody;
-					if (rawBody && contentType.includes('application/json')) {
-						try { parsedBody = JSON.parse(rawBody); } catch(e) { parsedBody = rawBody; }
-					}
-
-					renderStatusBadge(res.status, elapsed);
-
-					if (typeof parsedBody === 'object') {
-						renderBodyJson(JSON.stringify(parsedBody, null, 2));
-					} else {
-						renderBodyText(rawBody);
-					}
-
-					renderResponseHeaders(Object.fromEntries(res.headers));
-					renderInfo({ status: res.status, statusText: res.statusText, elapsed: elapsed, method: method, url: pathWithQuery, contentType: contentType });
-
-				} catch(err) {
-					showBodyError('Fetch error: ' + (err.message || String(err)));
-				} finally {
-					if (indicator) indicator.classList.add('opacity-0');
-					// Connect realtime after execute if toggle is on
-					if (shouldConnectRealtime) {
-						switchResultTab('realtime');
-						connectRealtime();
-					}
-				}
-			};
-
-			// ── Realtime WebSocket ─────────────────────────────────────────────────────
-			var _rtSocket = null;
-			var _rtToken = null;
-			var _rtEnabled = false;
-			var _rtEventCount = 0;
-			var _isRealtimeSupported = ${isRealtimeSupported};
-			var _realtimeQueryName = '${realtimeQueryName}';
-			var _rtPingInterval = null;
-
-			function setRtStatus(status) {
-				// status: 'disconnected' | 'connecting' | 'connected' | 'error'
-				var dot = document.getElementById('rt-status-dot');
-				var headerDot = document.getElementById('rt-dot');
-				var text = document.getElementById('rt-status-text');
-				var colorMap = {
-					disconnected: 'bg-base-content/20',
-					connecting: 'bg-warning animate-pulse',
-					connected: 'bg-success animate-pulse',
-					error: 'bg-error',
-				};
-				var headerColorMap = {
-					disconnected: 'bg-base-content/20',
-					connecting: 'bg-warning animate-pulse',
-					connected: 'bg-success animate-pulse',
-					error: 'bg-error',
-				};
-				var labelMap = {
-					disconnected: 'Disconnected',
-					connecting: 'Connecting…',
-					connected: 'Connected',
-					error: 'Error',
-				};
-				if (dot) {
-					dot.className = 'w-2 h-2 rounded-full transition-all duration-300 ' + (colorMap[status] || colorMap.disconnected);
-				}
-				if (headerDot) {
-					headerDot.className = 'w-1.5 h-1.5 rounded-full transition-colors duration-300 ' + (headerColorMap[status] || headerColorMap.disconnected);
-				}
-				if (text) {
-					text.textContent = labelMap[status] || status;
-				}
-			}
-
-			function appendRtEvent(eventName, payload, ts) {
-				var log = document.getElementById('rt-log');
-				var empty = document.getElementById('rt-empty-state');
-				if (!log) return;
-				if (empty) empty.classList.add('hidden');
-
-				_rtEventCount++;
-				var countEl = document.getElementById('rt-event-count');
-				if (countEl) {
-					countEl.textContent = _rtEventCount + ' event' + (_rtEventCount !== 1 ? 's' : '');
-					countEl.classList.remove('hidden');
-				}
-
-				var row = document.createElement('div');
-				row.className = 'flex flex-col gap-0.5 p-2 rounded-lg bg-base-200/40 border border-base-200/60 hover:bg-base-200/70 transition-colors';
-
-				var header = document.createElement('div');
-				header.className = 'flex items-center justify-between';
-
-				var nameSpan = document.createElement('span');
-				nameSpan.className = 'font-semibold text-primary text-[11px] uppercase tracking-wider';
-				nameSpan.textContent = eventName;
-
-				var tsSpan = document.createElement('span');
-				tsSpan.className = 'text-[10px] opacity-30 font-mono';
-				tsSpan.textContent = new Date(ts || Date.now()).toLocaleTimeString();
-
-				header.appendChild(nameSpan);
-				header.appendChild(tsSpan);
-				row.appendChild(header);
-
-				if (payload !== undefined && payload !== null) {
-					var pre = document.createElement('pre');
-					pre.className = 'text-[11px] opacity-60 whitespace-pre-wrap break-all mt-0.5 max-h-32 overflow-auto';
-					try {
-						pre.textContent = typeof payload === 'object' ? JSON.stringify(payload, null, 2) : String(payload);
-					} catch(e) {
-						pre.textContent = String(payload);
-					}
-					row.appendChild(pre);
-				}
-
-				log.appendChild(row);
-				log.scrollTop = log.scrollHeight;
-			}
-
-			function appendRtSystemMsg(msg, type) {
-				var log = document.getElementById('rt-log');
-				if (!log) return;
-				var el = document.createElement('div');
-				el.className = 'text-[10px] font-mono italic opacity-40 px-1 py-0.5 ' + (type === 'error' ? 'text-error opacity-70' : '');
-				el.textContent = '— ' + msg + ' —';
-				log.appendChild(el);
-				log.scrollTop = log.scrollHeight;
-			}
-
-			function disconnectRealtime(silent) {
-				if (_rtPingInterval) { clearInterval(_rtPingInterval); _rtPingInterval = null; }
-				if (_rtSocket) {
-					try { _rtSocket.close(); } catch(e) {}
-					_rtSocket = null;
-				}
-				// Unsubscribe server-side if we have a token
-				if (_rtToken) {
-					var authToken = (document.getElementById('bearer-token-input') || {}).value || '';
-					fetch('/realtime/unsubscribe', {
-						method: 'POST',
-						headers: { 'Content-Type': 'application/json' },
-						body: JSON.stringify({ token: _rtToken, authToken: authToken }),
-					}).catch(function() {});
-					_rtToken = null;
-				}
-				setRtStatus('disconnected');
-				if (!silent) appendRtSystemMsg('Disconnected');
-			}
-
-			async function connectRealtime() {
-				if (!_isRealtimeSupported) {
-					appendRtSystemMsg('Realtime is only available for queries', 'error');
-					return;
-				}
-
-				disconnectRealtime(true);
-				setRtStatus('connecting');
-				appendRtSystemMsg('Subscribing…');
-
-				var args = collectArgs();
-				var authToken = (document.getElementById('bearer-token-input') || {}).value || '';
-
-				var queryName = _realtimeQueryName;
-
-				try {
-					var subRes = await fetch('/realtime/subscribe', {
-						method: 'POST',
-						headers: { 'Content-Type': 'application/json' },
-						body: JSON.stringify({ queryName: queryName, args: args, authToken: authToken }),
-					});
-
-					if (!subRes.ok) {
-						var errBody = await subRes.json().catch(function() { return {}; });
-						throw new Error(errBody.message || ('Subscribe failed: ' + subRes.status));
-					}
-
-					var subData = await subRes.json();
-					_rtToken = subData.token;
-
-					// Build WebSocket URL
-					var wsInfo = subData.websocket;
-					var wsUrl = wsInfo.url;
-					// Append token params
-					var sep = wsUrl.indexOf('?') >= 0 ? '&' : '?';
-					wsUrl += sep + 'token=' + encodeURIComponent(_rtToken);
-					if (authToken) wsUrl += '&authToken=' + encodeURIComponent(authToken);
-
-					appendRtSystemMsg('Connecting WebSocket…');
-
-					var ws = new WebSocket(wsUrl, wsInfo.protocol || undefined);
-					_rtSocket = ws;
-
-					ws.addEventListener('open', function() {
-						setRtStatus('connected');
-						appendRtSystemMsg('Connected');
-						// Start ping keepalive
-						_rtPingInterval = setInterval(function() {
-							if (ws.readyState === 1) ws.send('ping');
-						}, 25000);
-					});
-
-					ws.addEventListener('message', function(evt) {
-						var data;
-						try { data = JSON.parse(evt.data); } catch(e) { data = { event: 'raw', payload: evt.data }; }
-						// Skip pong internal events
-						if (data.event === 'pong') return;
-						appendRtEvent(data.event || 'message', data.payload, Date.now());
-					});
-
-					ws.addEventListener('close', function(evt) {
-						if (_rtPingInterval) { clearInterval(_rtPingInterval); _rtPingInterval = null; }
-						_rtSocket = null;
-						_rtToken = null;
-						setRtStatus('disconnected');
-						appendRtSystemMsg('Connection closed' + (evt.reason ? ': ' + evt.reason : ''));
-						// Uncheck toggle
-						var toggle = document.getElementById('realtime-toggle');
-						if (toggle) toggle.checked = false;
-						_rtEnabled = false;
-					});
-
-					ws.addEventListener('error', function() {
-						setRtStatus('error');
-						appendRtSystemMsg('WebSocket error', 'error');
-					});
-
-				} catch(err) {
-					disconnectRealtime(true);
-					setRtStatus('error');
-					appendRtSystemMsg('Error: ' + (err.message || String(err)), 'error');
-					// Uncheck toggle
-					var toggle = document.getElementById('realtime-toggle');
-					if (toggle) toggle.checked = false;
-					_rtEnabled = false;
-				}
-			}
-
-			window.toggleRealtime = function(enabled) {
-				_rtEnabled = enabled;
-				if (enabled) {
-					// Switch to realtime tab to show the panel
-					switchResultTab('realtime');
-					// Don't connect yet — connection happens after executeFn() is called
-					var log = document.getElementById('rt-log');
-					var empty = document.getElementById('rt-empty-state');
-					if (empty) {
-						empty.innerHTML = '<iconify-icon icon="solar:pulse-2-bold-duotone" width="40" height="40"></iconify-icon><p class="text-xs font-semibold uppercase tracking-widest">Press Run to connect and start receiving updates</p>';
-						empty.classList.remove('hidden');
-					}
-				} else {
-					disconnectRealtime(false);
-				}
-			};
-
-			window.clearRealtimeLog = function() {
-				var log = document.getElementById('rt-log');
-				if (!log) return;
-				log.innerHTML = '';
-				_rtEventCount = 0;
-				var countEl = document.getElementById('rt-event-count');
-				if (countEl) countEl.classList.add('hidden');
-				// Re-show empty state if disconnected
-				if (!_rtSocket) {
-					var empty = document.createElement('div');
-					empty.id = 'rt-empty-state';
-					empty.className = 'flex flex-col items-center justify-center h-full opacity-20 text-center pointer-events-none gap-2';
-					empty.innerHTML = '<iconify-icon icon="solar:pulse-2-bold-duotone" width="40" height="40"></iconify-icon><p class="text-xs font-semibold uppercase tracking-widest">Enable Realtime in Request Panel</p>';
-					log.appendChild(empty);
-				}
-			};
-
-			// ── Cleanup on HTMX navigation ─────────────────────────────────────────────
-			document.addEventListener('htmx:beforeSwap', function() {
-				disconnectRealtime(true);
-				var toggle = document.getElementById('realtime-toggle');
-				if (toggle) toggle.checked = false;
-				_rtEnabled = false;
-			});
-		</script>
-	`;
-}
+import { DiscoveredHandlerOperation } from "../../../../../utils/handler-discovery";
+
+export function renderScripts(h: DiscoveredHandlerOperation): string {
+	const isQuery = h.kind === "query";
+	const routePath = h.routePath;
+	// handlerName matches the key used in realtimeQueryHandlers registry
+	const realtimeQueryName = h.handlerName ?? h.routePath;
+	// Only queries can be subscribed to via realtime
+	const isRealtimeSupported = isQuery;
+
+	return `
+		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css">
+		<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
+
+		<script>
+			// ── Tab switching ──────────────────────────────────────────────────────────
+			window._currentResultTab = 'body';
+
+			window.switchResultTab = function(tab) {
+				window._currentResultTab = tab;
+				['body', 'headers', 'info', 'realtime'].forEach(function(t) {
+					var pane = document.getElementById('result-tab-' + t);
+					var btn = document.getElementById('tab-' + (t === 'headers' ? 'resp-headers' : t));
+					if (pane) pane.classList.toggle('hidden', t !== tab);
+					if (btn) btn.classList.toggle('tab-active', t === tab);
+				});
+			};
+
+			window.switchRequestTab = function(tab) {
+				['args', 'auth', 'headers'].forEach(function(t) {
+					var pane = document.getElementById('request-tab-' + t);
+					var btn = document.getElementById('req-tab-btn-' + t);
+					if (pane) pane.classList.toggle('hidden', t !== tab);
+					if (btn) btn.classList.toggle('tab-active', t === tab);
+				});
+			};
+
+			// ── Header key-value rows ──────────────────────────────────────────────────
+			var _headerRowId = 0;
+
+			window.addHeaderRow = function(key, value) {
+				key = key || '';
+				value = value || '';
+				var id = ++_headerRowId;
+				var container = document.getElementById('headers-rows');
+
+				var row = document.createElement('div');
+				row.id = 'header-row-' + id;
+				row.className = 'flex items-center gap-2';
+
+				var keyInput = document.createElement('input');
+				keyInput.type = 'text';
+				keyInput.placeholder = 'Header-Name';
+				keyInput.setAttribute('data-hdr-key', '');
+				keyInput.value = key;
+				keyInput.className = 'input input-xs input-bordered font-mono w-2/5 bg-base-200/30 focus:bg-base-100 focus:border-primary transition-all rounded-lg border-base-200';
+
+				var valInput = document.createElement('input');
+				valInput.type = 'text';
+				valInput.placeholder = 'value';
+				valInput.setAttribute('data-hdr-val', '');
+				valInput.value = value;
+				valInput.className = 'input input-xs input-bordered font-mono flex-1 bg-base-200/30 focus:bg-base-100 focus:border-primary transition-all rounded-lg border-base-200';
+
+				var removeBtn = document.createElement('button');
+				removeBtn.type = 'button';
+				removeBtn.className = 'btn btn-xs btn-ghost text-error opacity-40 hover:opacity-100 px-1.5';
+				removeBtn.innerHTML = '<iconify-icon icon="solar:close-circle-linear" width="14" height="14"></iconify-icon>';
+				removeBtn.onclick = function() { row.remove(); };
+
+				row.appendChild(keyInput);
+				row.appendChild(valInput);
+				row.appendChild(removeBtn);
+				container.appendChild(row);
+			};
+
+			// ── Collect args from server-rendered inputs ───────────────────────────────
+			function collectArgs() {
+				var result = {};
+				document.querySelectorAll('#args-rows [data-arg-key]').forEach(function(el) {
+					var key = el.getAttribute('data-arg-key');
+					var type = el.getAttribute('data-arg-type');
+					if (!key) return;
+					var value;
+					if (type === 'boolean') {
+						value = el.checked;
+					} else if (type === 'number') {
+						var raw = el.value.trim();
+						value = raw === '' ? undefined : Number(raw);
+					} else {
+						value = el.value;
+					}
+					if (value !== undefined && value !== '') {
+						result[key] = value;
+					}
+				});
+				return result;
+			}
+
+			function collectHeaders() {
+				var result = {};
+				document.querySelectorAll('#headers-rows [data-hdr-key]').forEach(function(keyEl) {
+					var k = keyEl.value.trim();
+					var v = keyEl.parentElement.querySelector('[data-hdr-val]').value;
+					if (k) result[k] = v;
+				});
+				return result;
+			}
+
+			// ── Token visibility ──────────────────────────────────────────────────────
+			window.toggleTokenVisibility = function() {
+				var inp = document.getElementById('bearer-token-input');
+				var icon = document.getElementById('token-eye-icon');
+				if (!inp) return;
+				if (inp.type === 'password') {
+					inp.type = 'text';
+					if (icon) icon.setAttribute('icon', 'solar:eye-closed-linear');
+				} else {
+					inp.type = 'password';
+					if (icon) icon.setAttribute('icon', 'solar:eye-linear');
+				}
+			};
+
+			// ── Render helpers ─────────────────────────────────────────────────────────
+			function esc(str) {
+				return String(str).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
+			}
+
+			function showBodyLoading() {
+				var empty = document.getElementById('result-empty-state');
+				if (empty) empty.classList.add('hidden');
+				var content = document.getElementById('result-body-content');
+				if (content) {
+					content.classList.remove('hidden');
+					content.innerHTML = '<div class="flex items-center justify-center h-full min-h-[200px]"><span class="loading loading-ring loading-md text-primary"></span></div>';
+				}
+			}
+
+			function showBodyError(msg) {
+				var empty = document.getElementById('result-empty-state');
+				if (empty) empty.classList.add('hidden');
+				var content = document.getElementById('result-body-content');
+				if (content) {
+					content.classList.remove('hidden');
+					content.innerHTML = '<div class="p-5 text-error"><p class="font-bold mb-1 text-xs uppercase tracking-wider">Error</p><pre class="text-sm whitespace-pre-wrap">' + esc(msg) + '</pre></div>';
+				}
+			}
+
+			function renderBodyJson(jsonStr) {
+				var empty = document.getElementById('result-empty-state');
+				if (empty) empty.classList.add('hidden');
+				var content = document.getElementById('result-body-content');
+				if (!content) return;
+				content.classList.remove('hidden');
+				content.innerHTML = '<pre style="margin:0;padding:1rem"><code class="language-json">' + esc(jsonStr) + '</code></pre>';
+				if (window.hljs) hljs.highlightAll();
+			}
+
+			function renderBodyText(text) {
+				var empty = document.getElementById('result-empty-state');
+				if (empty) empty.classList.add('hidden');
+				var content = document.getElementById('result-body-content');
+				if (!content) return;
+				content.classList.remove('hidden');
+				content.innerHTML = '<pre style="margin:0;padding:1rem;white-space:pre-wrap;word-break:break-all">' + esc(text) + '</pre>';
+			}
+
+			function renderStatusBadge(status, elapsed) {
+				var badge = document.getElementById('res-status-badge');
+				var elBadge = document.getElementById('res-elapsed-badge');
+				if (badge) {
+					badge.className = 'badge badge-sm font-mono font-bold ' + (status < 300 ? 'badge-success' : status < 400 ? 'badge-warning' : 'badge-error');
+					badge.textContent = status;
+					badge.classList.remove('hidden');
+				}
+				if (elBadge) {
+					elBadge.textContent = elapsed + 'ms';
+					elBadge.classList.remove('hidden');
+				}
+			}
+
+			function renderResponseHeaders(headers) {
+				var el = document.getElementById('result-headers-content');
+				if (!el) return;
+				var entries = Object.entries(headers);
+				if (!entries.length) {
+					el.innerHTML = '<p class="text-xs opacity-40 italic p-2">No headers returned.</p>';
+					return;
+				}
+				var rows = entries.map(function(pair) {
+					return '<tr><td class="font-mono text-xs font-medium opacity-70">' + esc(pair[0]) + '</td><td class="font-mono text-xs opacity-50 break-all">' + esc(pair[1]) + '</td></tr>';
+				}).join('');
+				el.innerHTML = '<table class="table table-xs w-full"><thead><tr>' +
+					'<th class="text-[10px] uppercase tracking-wider opacity-40 font-bold">Header</th>' +
+					'<th class="text-[10px] uppercase tracking-wider opacity-40 font-bold">Value</th>' +
+					'</tr></thead><tbody>' + rows + '</tbody></table>';
+			}
+
+			function renderInfo(data) {
+				var el = document.getElementById('result-info-content');
+				if (!el) return;
+				var items = [
+					{ label: 'Status', value: data.status + ' ' + data.statusText, color: data.status < 300 ? 'text-success' : data.status < 400 ? 'text-warning' : 'text-error' },
+					{ label: 'Elapsed', value: data.elapsed + ' ms', color: '' },
+					{ label: 'Method', value: data.method, color: '' },
+					{ label: 'URL', value: data.url, color: '' },
+					{ label: 'Content-Type', value: data.contentType || '—', color: '' },
+				];
+				var html = '<div class="flex flex-col gap-3 p-4">';
+				items.forEach(function(item) {
+					html += '<div class="flex flex-col gap-0.5">';
+					html += '<span class="text-[10px] font-bold uppercase tracking-wider opacity-40">' + esc(item.label) + '</span>';
+					html += '<span class="font-mono text-sm break-all ' + (item.color || 'opacity-70') + '">' + esc(String(item.value)) + '</span>';
+					html += '</div>';
+				});
+				html += '</div>';
+				el.innerHTML = html;
+			}
+
+			// ── Main execution ─────────────────────────────────────────────────────────
+			window.executeFn = async function() {
+				// If realtime is enabled, connect/reconnect after execute completes
+				var shouldConnectRealtime = _rtEnabled && _isRealtimeSupported;
+				var indicator = document.getElementById('execution-indicator');
+				var headerErr = document.getElementById('headers-error');
+
+				var args = collectArgs();
+				var customHeaders = collectHeaders();
+				var token = (document.getElementById('bearer-token-input') || {}).value || '';
+
+				if (headerErr) headerErr.classList.add('hidden');
+
+				// Show loading
+				if (indicator) indicator.classList.remove('opacity-0');
+				showBodyLoading();
+
+				var isQuery = ${isQuery};
+				var method = isQuery ? 'GET' : 'POST';
+				var pathWithQuery = '${routePath}';
+
+				if (isQuery && Object.keys(args).length > 0) {
+					var params = new URLSearchParams();
+					Object.entries(args).forEach(function(entry) {
+						var key = entry[0];
+						var value = entry[1];
+						if (value !== undefined && value !== null) {
+							if (Array.isArray(value)) {
+								value.forEach(function(v) { params.append(key, typeof v === 'object' ? JSON.stringify(v) : String(v)); });
+							} else if (typeof value === 'object') {
+								params.append(key, JSON.stringify(value));
+							} else {
+								params.append(key, String(value));
+							}
+						}
+					});
+					var qs = params.toString();
+					if (qs) pathWithQuery += '?' + qs;
+				}
+
+				var fetchHeaders = Object.assign({ 'Content-Type': 'application/json' }, customHeaders);
+				if (token) fetchHeaders['Authorization'] = 'Bearer ' + token;
+
+				var startTime = performance.now();
+
+				try {
+					var res = await fetch(pathWithQuery, {
+						method: method,
+						headers: fetchHeaders,
+						body: method === 'POST' ? JSON.stringify(args) : undefined,
+					});
+
+					var elapsed = Math.round(performance.now() - startTime);
+					var contentType = res.headers.get('content-type') || '';
+					var rawBody = await res.text();
+
+					var parsedBody = rawBody;
+					if (rawBody && contentType.includes('application/json')) {
+						try { parsedBody = JSON.parse(rawBody); } catch(e) { parsedBody = rawBody; }
+					}
+
+					renderStatusBadge(res.status, elapsed);
+
+					if (typeof parsedBody === 'object') {
+						renderBodyJson(JSON.stringify(parsedBody, null, 2));
+					} else {
+						renderBodyText(rawBody);
+					}
+
+					renderResponseHeaders(Object.fromEntries(res.headers));
+					renderInfo({ status: res.status, statusText: res.statusText, elapsed: elapsed, method: method, url: pathWithQuery, contentType: contentType });
+
+				} catch(err) {
+					showBodyError('Fetch error: ' + (err.message || String(err)));
+				} finally {
+					if (indicator) indicator.classList.add('opacity-0');
+					// Connect realtime after execute if toggle is on
+					if (shouldConnectRealtime) {
+						switchResultTab('realtime');
+						connectRealtime();
+					}
+				}
+			};
+
+			// ── Realtime WebSocket ─────────────────────────────────────────────────────
+			var _rtSocket = null;
+			var _rtToken = null;
+			var _rtEnabled = false;
+			var _rtEventCount = 0;
+			var _isRealtimeSupported = ${isRealtimeSupported};
+			var _realtimeQueryName = '${realtimeQueryName}';
+			var _rtPingInterval = null;
+
+			function setRtStatus(status) {
+				// status: 'disconnected' | 'connecting' | 'connected' | 'error'
+				var dot = document.getElementById('rt-status-dot');
+				var headerDot = document.getElementById('rt-dot');
+				var text = document.getElementById('rt-status-text');
+				var colorMap = {
+					disconnected: 'bg-base-content/20',
+					connecting: 'bg-warning animate-pulse',
+					connected: 'bg-success animate-pulse',
+					error: 'bg-error',
+				};
+				var headerColorMap = {
+					disconnected: 'bg-base-content/20',
+					connecting: 'bg-warning animate-pulse',
+					connected: 'bg-success animate-pulse',
+					error: 'bg-error',
+				};
+				var labelMap = {
+					disconnected: 'Disconnected',
+					connecting: 'Connecting…',
+					connected: 'Connected',
+					error: 'Error',
+				};
+				if (dot) {
+					dot.className = 'w-2 h-2 rounded-full transition-all duration-300 ' + (colorMap[status] || colorMap.disconnected);
+				}
+				if (headerDot) {
+					headerDot.className = 'w-1.5 h-1.5 rounded-full transition-colors duration-300 ' + (headerColorMap[status] || headerColorMap.disconnected);
+				}
+				if (text) {
+					text.textContent = labelMap[status] || status;
+				}
+			}
+
+			function appendRtEvent(eventName, payload, ts) {
+				var log = document.getElementById('rt-log');
+				var empty = document.getElementById('rt-empty-state');
+				if (!log) return;
+				if (empty) empty.classList.add('hidden');
+
+				_rtEventCount++;
+				var countEl = document.getElementById('rt-event-count');
+				if (countEl) {
+					countEl.textContent = _rtEventCount + ' event' + (_rtEventCount !== 1 ? 's' : '');
+					countEl.classList.remove('hidden');
+				}
+
+				var row = document.createElement('div');
+				row.className = 'flex flex-col gap-0.5 p-2 rounded-lg bg-base-200/40 border border-base-200/60 hover:bg-base-200/70 transition-colors';
+
+				var header = document.createElement('div');
+				header.className = 'flex items-center justify-between';
+
+				var nameSpan = document.createElement('span');
+				nameSpan.className = 'font-semibold text-primary text-[11px] uppercase tracking-wider';
+				nameSpan.textContent = eventName;
+
+				var tsSpan = document.createElement('span');
+				tsSpan.className = 'text-[10px] opacity-30 font-mono';
+				tsSpan.textContent = new Date(ts || Date.now()).toLocaleTimeString();
+
+				header.appendChild(nameSpan);
+				header.appendChild(tsSpan);
+				row.appendChild(header);
+
+				if (payload !== undefined && payload !== null) {
+					var pre = document.createElement('pre');
+					pre.className = 'text-[11px] opacity-60 whitespace-pre-wrap break-all mt-0.5 max-h-32 overflow-auto';
+					try {
+						pre.textContent = typeof payload === 'object' ? JSON.stringify(payload, null, 2) : String(payload);
+					} catch(e) {
+						pre.textContent = String(payload);
+					}
+					row.appendChild(pre);
+				}
+
+				log.appendChild(row);
+				log.scrollTop = log.scrollHeight;
+			}
+
+			function appendRtSystemMsg(msg, type) {
+				var log = document.getElementById('rt-log');
+				if (!log) return;
+				var el = document.createElement('div');
+				el.className = 'text-[10px] font-mono italic opacity-40 px-1 py-0.5 ' + (type === 'error' ? 'text-error opacity-70' : '');
+				el.textContent = '— ' + msg + ' —';
+				log.appendChild(el);
+				log.scrollTop = log.scrollHeight;
+			}
+
+			function disconnectRealtime(silent) {
+				if (_rtPingInterval) { clearInterval(_rtPingInterval); _rtPingInterval = null; }
+				if (_rtSocket) {
+					try { _rtSocket.close(); } catch(e) {}
+					_rtSocket = null;
+				}
+				// Unsubscribe server-side if we have a token
+				if (_rtToken) {
+					var authToken = (document.getElementById('bearer-token-input') || {}).value || '';
+					fetch('/realtime/unsubscribe', {
+						method: 'POST',
+						headers: { 'Content-Type': 'application/json' },
+						body: JSON.stringify({ token: _rtToken, authToken: authToken }),
+					}).catch(function() {});
+					_rtToken = null;
+				}
+				setRtStatus('disconnected');
+				if (!silent) appendRtSystemMsg('Disconnected');
+			}
+
+			async function connectRealtime() {
+				if (!_isRealtimeSupported) {
+					appendRtSystemMsg('Realtime is only available for queries', 'error');
+					return;
+				}
+
+				disconnectRealtime(true);
+				setRtStatus('connecting');
+				appendRtSystemMsg('Subscribing…');
+
+				var args = collectArgs();
+				var authToken = (document.getElementById('bearer-token-input') || {}).value || '';
+
+				var queryName = _realtimeQueryName;
+
+				try {
+					var subRes = await fetch('/realtime/subscribe', {
+						method: 'POST',
+						headers: { 'Content-Type': 'application/json' },
+						body: JSON.stringify({ queryName: queryName, args: args, authToken: authToken }),
+					});
+
+					if (!subRes.ok) {
+						var errBody = await subRes.json().catch(function() { return {}; });
+						throw new Error(errBody.message || ('Subscribe failed: ' + subRes.status));
+					}
+
+					var subData = await subRes.json();
+					_rtToken = subData.token;
+
+					// Build WebSocket URL
+					var wsInfo = subData.websocket;
+					var wsUrl = wsInfo.url;
+					// Append token params
+					var sep = wsUrl.indexOf('?') >= 0 ? '&' : '?';
+					wsUrl += sep + 'token=' + encodeURIComponent(_rtToken);
+					if (authToken) wsUrl += '&authToken=' + encodeURIComponent(authToken);
+
+					appendRtSystemMsg('Connecting WebSocket…');
+
+					var ws = new WebSocket(wsUrl, wsInfo.protocol || undefined);
+					_rtSocket = ws;
+
+					ws.addEventListener('open', function() {
+						setRtStatus('connected');
+						appendRtSystemMsg('Connected');
+						// Start ping keepalive
+						_rtPingInterval = setInterval(function() {
+							if (ws.readyState === 1) ws.send('ping');
+						}, 25000);
+					});
+
+					ws.addEventListener('message', function(evt) {
+						var data;
+						try { data = JSON.parse(evt.data); } catch(e) { data = { event: 'raw', payload: evt.data }; }
+						// Skip pong internal events
+						if (data.event === 'pong') return;
+						appendRtEvent(data.event || 'message', data.payload, Date.now());
+					});
+
+					ws.addEventListener('close', function(evt) {
+						if (_rtPingInterval) { clearInterval(_rtPingInterval); _rtPingInterval = null; }
+						_rtSocket = null;
+						_rtToken = null;
+						setRtStatus('disconnected');
+						appendRtSystemMsg('Connection closed' + (evt.reason ? ': ' + evt.reason : ''));
+						// Uncheck toggle
+						var toggle = document.getElementById('realtime-toggle');
+						if (toggle) toggle.checked = false;
+						_rtEnabled = false;
+					});
+
+					ws.addEventListener('error', function() {
+						setRtStatus('error');
+						appendRtSystemMsg('WebSocket error', 'error');
+					});
+
+				} catch(err) {
+					disconnectRealtime(true);
+					setRtStatus('error');
+					appendRtSystemMsg('Error: ' + (err.message || String(err)), 'error');
+					// Uncheck toggle
+					var toggle = document.getElementById('realtime-toggle');
+					if (toggle) toggle.checked = false;
+					_rtEnabled = false;
+				}
+			}
+
+			window.toggleRealtime = function(enabled) {
+				_rtEnabled = enabled;
+				if (enabled) {
+					// Switch to realtime tab to show the panel
+					switchResultTab('realtime');
+					// Don't connect yet — connection happens after executeFn() is called
+					var log = document.getElementById('rt-log');
+					var empty = document.getElementById('rt-empty-state');
+					if (empty) {
+						empty.innerHTML = '<iconify-icon icon="solar:pulse-2-bold-duotone" width="40" height="40"></iconify-icon><p class="text-xs font-semibold uppercase tracking-widest">Press Run to connect and start receiving updates</p>';
+						empty.classList.remove('hidden');
+					}
+				} else {
+					disconnectRealtime(false);
+				}
+			};
+
+			window.clearRealtimeLog = function() {
+				var log = document.getElementById('rt-log');
+				if (!log) return;
+				log.innerHTML = '';
+				_rtEventCount = 0;
+				var countEl = document.getElementById('rt-event-count');
+				if (countEl) countEl.classList.add('hidden');
+				// Re-show empty state if disconnected
+				if (!_rtSocket) {
+					var empty = document.createElement('div');
+					empty.id = 'rt-empty-state';
+					empty.className = 'flex flex-col items-center justify-center h-full opacity-20 text-center pointer-events-none gap-2';
+					empty.innerHTML = '<iconify-icon icon="solar:pulse-2-bold-duotone" width="40" height="40"></iconify-icon><p class="text-xs font-semibold uppercase tracking-widest">Enable Realtime in Request Panel</p>';
+					log.appendChild(empty);
+				}
+			};
+
+			// ── Cleanup on HTMX navigation ─────────────────────────────────────────────
+			document.addEventListener('htmx:beforeSwap', function() {
+				disconnectRealtime(true);
+				var toggle = document.getElementById('realtime-toggle');
+				if (toggle) toggle.checked = false;
+				_rtEnabled = false;
+			});
+		</script>
+	`;
+}