appflare 0.2.24 → 0.2.26

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

@@ -1,171 +1,171 @@
-import { DiscoveredHandlerOperation } from "../../../../../utils/handler-discovery";
-
-function renderArgInputType(type: string): string {
-	if (type === "boolean") return "checkbox";
-	if (type === "number") return "number";
-	return "text";
-}
-
-function renderArgRows(h: DiscoveredHandlerOperation): string {
-	const fields = h.args ?? [];
-	if (fields.length === 0) {
-		return `
-			<div class="text-[11px] opacity-30 italic py-2">No arguments defined for this ${h.kind}.</div>
-		`;
-	}
-
-	return fields
-		.map((field) => {
-			const inputType = renderArgInputType(field.type);
-			const isCheckbox = inputType === "checkbox";
-			const label = `${field.name}${field.optional ? "" : " *"}`;
-			const badge =
-				field.type !== "unknown"
-					? `<span class="badge badge-xs badge-ghost font-mono opacity-40 ml-1">${field.type}</span>`
-					: "";
-
-			if (isCheckbox) {
-				return `
-				<div class="flex items-center gap-3 py-1">
-					<input
-						type="checkbox"
-						data-arg-key="${field.name}"
-						data-arg-type="boolean"
-						class="checkbox checkbox-sm checkbox-primary"
-						${field.defaultValue === "true" ? "checked" : ""}
-					/>
-					<span class="text-sm font-mono opacity-70">${field.name}${badge}</span>
-					${field.optional ? '<span class="text-[10px] opacity-30 italic ml-auto">optional</span>' : ""}
-				</div>
-			`;
-			}
-
-			return `
-			<div class="form-control">
-				<label class="label py-0.5">
-					<span class="label-text text-[11px] font-mono font-semibold">${label}${badge}</span>
-					${field.optional ? '<span class="label-text-alt text-[10px] opacity-30 italic">optional</span>' : ""}
-				</label>
-				<input
-					type="${inputType}"
-					placeholder="${field.defaultValue ?? ""}"
-					data-arg-key="${field.name}"
-					data-arg-type="${field.type}"
-					value="${field.defaultValue ?? ""}"
-					class="input input-sm input-bordered font-mono w-full bg-base-200/30 focus:bg-base-100 focus:border-primary transition-all rounded-xl border-base-200"
-					${!field.optional ? "required" : ""}
-				/>
-			</div>
-		`;
-		})
-		.join("\n");
-}
-
-function renderArgumentsSection(h: DiscoveredHandlerOperation): string {
-	return `
-		<div class="space-y-4">
-			<div class="flex items-center justify-between">
-				<div class="flex flex-col">
-					<span class="text-[11px] font-bold uppercase tracking-wider opacity-40">Arguments</span>
-					<span class="text-[10px] font-mono opacity-30">${h.kind}</span>
-				</div>
-				<label class="flex items-center gap-2 cursor-pointer select-none group" title="Enable realtime updates via WebSocket">
-					<span class="text-[10px] font-bold uppercase tracking-wider opacity-40 group-hover:opacity-70 transition-opacity">Realtime</span>
-					<input type="checkbox" id="realtime-toggle" class="toggle toggle-xs toggle-success" onchange="toggleRealtime(this.checked)" />
-				</label>
-			</div>
-			<div id="args-rows" class="flex flex-col gap-3">
-				${renderArgRows(h)}
-			</div>
-			<p class="text-[11px] opacity-30 mt-2 italic">Values are sent as ${h.kind === "query" ? "query string params" : "JSON request body"}.</p>
-		</div>
-	`;
-}
-
-function renderBearerTokenSection(): string {
-	return `
-		<div class="space-y-4">
-			<label class="text-[11px] font-bold uppercase tracking-wider opacity-40 block">Bearer Token <span class="font-normal normal-case">(optional)</span></label>
-			<div class="relative group">
-				<input
-					type="password"
-					name="token"
-					id="bearer-token-input"
-					class="input input-sm input-bordered font-mono text-sm w-full bg-base-200/30 focus:bg-base-100 focus:border-primary transition-all rounded-xl border-base-200 pr-9"
-					placeholder="eyJhbGciOi..."
-				/>
-				<button type="button" onclick="toggleTokenVisibility()" class="absolute right-2.5 top-1/2 -translate-y-1/2 opacity-30 hover:opacity-70 transition-opacity">
-					<iconify-icon id="token-eye-icon" icon="solar:eye-linear" width="15" height="15"></iconify-icon>
-				</button>
-			</div>
-			<p class="text-[10px] opacity-30 italic">Token will be included in the Authorization header.</p>
-		</div>
-	`;
-}
-
-function renderCustomHeadersSection(): string {
-	return `
-		<div class="space-y-4">
-			<div class="flex items-center justify-between">
-				<span class="text-[11px] font-bold uppercase tracking-wider opacity-40">Custom Headers</span>
-				<button type="button" onclick="addHeaderRow()" class="btn btn-xs btn-ghost gap-1 opacity-50 hover:opacity-100">
-					<iconify-icon icon="solar:add-circle-linear" width="14" height="14"></iconify-icon>
-					Add
-				</button>
-			</div>
-			<div id="headers-rows" class="flex flex-col gap-2">
-				<!-- populated by addHeaderRow() -->
-			</div>
-			<p id="headers-error" class="text-[11px] text-error mt-1.5 hidden"></p>
-		</div>
-	`;
-}
-
-export function renderRequestPanel(h: DiscoveredHandlerOperation): string {
-	return `
-		<div class="card bg-base-100 border border-base-200 shadow-sm overflow-hidden flex flex-col h-full">
-			<div class="px-5 py-3 border-b border-base-200 bg-base-200/20 flex items-center justify-between flex-none">
-				<h3 class="text-xs font-bold uppercase tracking-widest opacity-40">Request</h3>
-				<iconify-icon icon="solar:settings-linear" width="16" height="16" class="opacity-30"></iconify-icon>
-			</div>
-			
-			<div class="flex-1 overflow-hidden flex flex-col">
-				<form id="fn-form" onsubmit="return false" class="flex flex-col h-full">
-					<!-- Tabs Navigation -->
-					<div class="px-5 pt-4 flex-none">
-						<div role="tablist" class="tabs tabs-box bg-base-200/50 p-1 rounded-xl">
-							<a role="tab" id="req-tab-btn-args" class="tab tab-active !text-[10px] !font-bold uppercase tracking-wider h-8" onclick="switchRequestTab('args')">Args</a>
-							<a role="tab" id="req-tab-btn-auth" class="tab !text-[10px] !font-bold uppercase tracking-wider h-8" onclick="switchRequestTab('auth')">Auth</a>
-							<a role="tab" id="req-tab-btn-headers" class="tab !text-[10px] !font-bold uppercase tracking-wider h-8" onclick="switchRequestTab('headers')">Headers</a>
-						</div>
-					</div>
-
-					<!-- Tab Content -->
-					<div class="flex-1 overflow-y-auto">
-						<div id="request-tab-args" class="p-5">
-							${renderArgumentsSection(h)}
-						</div>
-						<div id="request-tab-auth" class="p-5 hidden">
-							${renderBearerTokenSection()}
-						</div>
-						<div id="request-tab-headers" class="p-5 hidden">
-							${renderCustomHeadersSection()}
-						</div>
-					</div>
-
-					<!-- Submit Button (Fixed at bottom) -->
-					<div class="p-5 border-t border-base-200 mt-auto bg-base-200/5">
-						<button
-							type="button"
-							onclick="executeFn()"
-							class="btn btn-primary w-full gap-2 rounded-xl shadow-lg shadow-primary/20 hover:shadow-xl hover:shadow-primary/30 transition-all font-semibold"
-						>
-							<iconify-icon icon="solar:play-bold" width="18" height="18"></iconify-icon>
-							Run ${h.kind}
-						</button>
-					</div>
-				</form>
-			</div>
-		</div>
-	`;
-}
+import { DiscoveredHandlerOperation } from "../../../../../utils/handler-discovery";
+
+function renderArgInputType(type: string): string {
+	if (type === "boolean") return "checkbox";
+	if (type === "number") return "number";
+	return "text";
+}
+
+function renderArgRows(h: DiscoveredHandlerOperation): string {
+	const fields = h.args ?? [];
+	if (fields.length === 0) {
+		return `
+			<div class="text-[11px] opacity-30 italic py-2">No arguments defined for this ${h.kind}.</div>
+		`;
+	}
+
+	return fields
+		.map((field) => {
+			const inputType = renderArgInputType(field.type);
+			const isCheckbox = inputType === "checkbox";
+			const label = `${field.name}${field.optional ? "" : " *"}`;
+			const badge =
+				field.type !== "unknown"
+					? `<span class="badge badge-xs badge-ghost font-mono opacity-40 ml-1">${field.type}</span>`
+					: "";
+
+			if (isCheckbox) {
+				return `
+				<div class="flex items-center gap-3 py-1">
+					<input
+						type="checkbox"
+						data-arg-key="${field.name}"
+						data-arg-type="boolean"
+						class="checkbox checkbox-sm checkbox-primary"
+						${field.defaultValue === "true" ? "checked" : ""}
+					/>
+					<span class="text-sm font-mono opacity-70">${field.name}${badge}</span>
+					${field.optional ? '<span class="text-[10px] opacity-30 italic ml-auto">optional</span>' : ""}
+				</div>
+			`;
+			}
+
+			return `
+			<div class="form-control">
+				<label class="label py-0.5">
+					<span class="label-text text-[11px] font-mono font-semibold">${label}${badge}</span>
+					${field.optional ? '<span class="label-text-alt text-[10px] opacity-30 italic">optional</span>' : ""}
+				</label>
+				<input
+					type="${inputType}"
+					placeholder="${field.defaultValue ?? ""}"
+					data-arg-key="${field.name}"
+					data-arg-type="${field.type}"
+					value="${field.defaultValue ?? ""}"
+					class="input input-sm input-bordered font-mono w-full bg-base-200/30 focus:bg-base-100 focus:border-primary transition-all rounded-xl border-base-200"
+					${!field.optional ? "required" : ""}
+				/>
+			</div>
+		`;
+		})
+		.join("\n");
+}
+
+function renderArgumentsSection(h: DiscoveredHandlerOperation): string {
+	return `
+		<div class="space-y-4">
+			<div class="flex items-center justify-between">
+				<div class="flex flex-col">
+					<span class="text-[11px] font-bold uppercase tracking-wider opacity-40">Arguments</span>
+					<span class="text-[10px] font-mono opacity-30">${h.kind}</span>
+				</div>
+				<label class="flex items-center gap-2 cursor-pointer select-none group" title="Enable realtime updates via WebSocket">
+					<span class="text-[10px] font-bold uppercase tracking-wider opacity-40 group-hover:opacity-70 transition-opacity">Realtime</span>
+					<input type="checkbox" id="realtime-toggle" class="toggle toggle-xs toggle-success" onchange="toggleRealtime(this.checked)" />
+				</label>
+			</div>
+			<div id="args-rows" class="flex flex-col gap-3">
+				${renderArgRows(h)}
+			</div>
+			<p class="text-[11px] opacity-30 mt-2 italic">Values are sent as ${h.kind === "query" ? "query string params" : "JSON request body"}.</p>
+		</div>
+	`;
+}
+
+function renderBearerTokenSection(): string {
+	return `
+		<div class="space-y-4">
+			<label class="text-[11px] font-bold uppercase tracking-wider opacity-40 block">Bearer Token <span class="font-normal normal-case">(optional)</span></label>
+			<div class="relative group">
+				<input
+					type="password"
+					name="token"
+					id="bearer-token-input"
+					class="input input-sm input-bordered font-mono text-sm w-full bg-base-200/30 focus:bg-base-100 focus:border-primary transition-all rounded-xl border-base-200 pr-9"
+					placeholder="eyJhbGciOi..."
+				/>
+				<button type="button" onclick="toggleTokenVisibility()" class="absolute right-2.5 top-1/2 -translate-y-1/2 opacity-30 hover:opacity-70 transition-opacity">
+					<iconify-icon id="token-eye-icon" icon="solar:eye-linear" width="15" height="15"></iconify-icon>
+				</button>
+			</div>
+			<p class="text-[10px] opacity-30 italic">Token will be included in the Authorization header.</p>
+		</div>
+	`;
+}
+
+function renderCustomHeadersSection(): string {
+	return `
+		<div class="space-y-4">
+			<div class="flex items-center justify-between">
+				<span class="text-[11px] font-bold uppercase tracking-wider opacity-40">Custom Headers</span>
+				<button type="button" onclick="addHeaderRow()" class="btn btn-xs btn-ghost gap-1 opacity-50 hover:opacity-100">
+					<iconify-icon icon="solar:add-circle-linear" width="14" height="14"></iconify-icon>
+					Add
+				</button>
+			</div>
+			<div id="headers-rows" class="flex flex-col gap-2">
+				<!-- populated by addHeaderRow() -->
+			</div>
+			<p id="headers-error" class="text-[11px] text-error mt-1.5 hidden"></p>
+		</div>
+	`;
+}
+
+export function renderRequestPanel(h: DiscoveredHandlerOperation): string {
+	return `
+		<div class="card bg-base-100 border border-base-200 shadow-sm overflow-hidden flex flex-col h-full">
+			<div class="px-5 py-3 border-b border-base-200 bg-base-200/20 flex items-center justify-between flex-none">
+				<h3 class="text-xs font-bold uppercase tracking-widest opacity-40">Request</h3>
+				<iconify-icon icon="solar:settings-linear" width="16" height="16" class="opacity-30"></iconify-icon>
+			</div>
+			
+			<div class="flex-1 overflow-hidden flex flex-col">
+				<form id="fn-form" onsubmit="return false" class="flex flex-col h-full">
+					<!-- Tabs Navigation -->
+					<div class="px-5 pt-4 flex-none">
+						<div role="tablist" class="tabs tabs-box bg-base-200/50 p-1 rounded-xl">
+							<a role="tab" id="req-tab-btn-args" class="tab tab-active !text-[10px] !font-bold uppercase tracking-wider h-8" onclick="switchRequestTab('args')">Args</a>
+							<a role="tab" id="req-tab-btn-auth" class="tab !text-[10px] !font-bold uppercase tracking-wider h-8" onclick="switchRequestTab('auth')">Auth</a>
+							<a role="tab" id="req-tab-btn-headers" class="tab !text-[10px] !font-bold uppercase tracking-wider h-8" onclick="switchRequestTab('headers')">Headers</a>
+						</div>
+					</div>
+
+					<!-- Tab Content -->
+					<div class="flex-1 overflow-y-auto">
+						<div id="request-tab-args" class="p-5">
+							${renderArgumentsSection(h)}
+						</div>
+						<div id="request-tab-auth" class="p-5 hidden">
+							${renderBearerTokenSection()}
+						</div>
+						<div id="request-tab-headers" class="p-5 hidden">
+							${renderCustomHeadersSection()}
+						</div>
+					</div>
+
+					<!-- Submit Button (Fixed at bottom) -->
+					<div class="p-5 border-t border-base-200 mt-auto bg-base-200/5">
+						<button
+							type="button"
+							onclick="executeFn()"
+							class="btn btn-primary w-full gap-2 rounded-xl shadow-lg shadow-primary/20 hover:shadow-xl hover:shadow-primary/30 transition-all font-semibold"
+						>
+							<iconify-icon icon="solar:play-bold" width="18" height="18"></iconify-icon>
+							Run ${h.kind}
+						</button>
+					</div>
+				</form>
+			</div>
+		</div>
+	`;
+}

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

@@ -1,85 +1,85 @@
-export function renderResultPanel(): string {
-	return `
-		<div class="card bg-base-100 border border-base-200 shadow-sm overflow-hidden flex flex-col">
-			<!-- Panel Header -->
-			<div class="px-5 py-3 border-b border-base-200 bg-base-200/20 flex items-center justify-between">
-				<h3 class="text-xs font-bold uppercase tracking-widest opacity-40">Response</h3>
-				<div class="flex items-center gap-3">
-					<span id="res-status-badge" class="hidden"></span>
-					<span id="res-elapsed-badge" class="hidden text-xs font-mono opacity-50"></span>
-					<div class="w-1.5 h-1.5 rounded-full bg-success animate-pulse opacity-0" id="execution-indicator"></div>
-				</div>
-			</div>
-
-			<!-- Tabs -->
-			<div role="tablist" class="tabs tabs-bordered tabs-sm px-4 pt-1 bg-base-200/10 border-b border-base-200">
-				<a role="tab" class="tab tab-active text-xs font-semibold" id="tab-body" onclick="switchResultTab('body')">Body</a>
-				<a role="tab" class="tab text-xs font-semibold" id="tab-resp-headers" onclick="switchResultTab('headers')">Headers</a>
-				<a role="tab" class="tab text-xs font-semibold" id="tab-info" onclick="switchResultTab('info')">Info</a>
-				<a role="tab" class="tab text-xs font-semibold gap-1.5" id="tab-realtime" onclick="switchResultTab('realtime')">
-					<span class="w-1.5 h-1.5 rounded-full bg-base-content/20 transition-colors duration-300" id="rt-dot"></span>
-					Realtime
-				</a>
-			</div>
-
-			<!-- Tab Panes -->
-			<div class="flex-1 relative min-h-[300px]">
-
-				<!-- Body Tab -->
-				<div id="result-tab-body" class="result-tab-pane absolute inset-0 overflow-auto">
-					<div class="absolute inset-0 flex flex-col items-center justify-center opacity-20 pointer-events-none p-10 text-center" id="result-empty-state">
-						<iconify-icon icon="solar:course-down-bold-duotone" width="48" height="48" class="mb-3"></iconify-icon>
-						<p class="text-xs font-semibold uppercase tracking-widest">Execute To See Output</p>
-					</div>
-					<div id="result-body-content" class="hidden h-full font-mono text-sm p-4 overflow-auto"></div>
-				</div>
-
-				<!-- Headers Tab -->
-				<div id="result-tab-headers" class="result-tab-pane absolute inset-0 overflow-auto hidden">
-					<div id="result-headers-content" class="p-4">
-						<div class="flex flex-col items-center justify-center h-40 opacity-20 text-center pointer-events-none">
-							<iconify-icon icon="solar:list-check-bold-duotone" width="36" height="36" class="mb-2"></iconify-icon>
-							<p class="text-xs font-semibold uppercase tracking-widest">No Response Yet</p>
-						</div>
-					</div>
-				</div>
-
-				<!-- Info Tab -->
-				<div id="result-tab-info" class="result-tab-pane absolute inset-0 overflow-auto hidden">
-					<div id="result-info-content" class="p-4">
-						<div class="flex flex-col items-center justify-center h-40 opacity-20 text-center pointer-events-none">
-							<iconify-icon icon="solar:info-circle-bold-duotone" width="36" height="36" class="mb-2"></iconify-icon>
-							<p class="text-xs font-semibold uppercase tracking-widest">No Response Yet</p>
-						</div>
-					</div>
-				</div>
-
-				<!-- Realtime Tab -->
-				<div id="result-tab-realtime" class="result-tab-pane absolute inset-0 overflow-auto hidden flex flex-col">
-					<!-- Connection status bar -->
-					<div class="flex items-center justify-between px-4 py-2 border-b border-base-200 bg-base-200/10 flex-none">
-						<div class="flex items-center gap-2">
-							<div class="w-2 h-2 rounded-full bg-base-content/20 transition-all duration-300" id="rt-status-dot"></div>
-							<span class="text-[10px] font-mono uppercase tracking-wider opacity-50" id="rt-status-text">Disconnected</span>
-						</div>
-						<div class="flex items-center gap-2">
-							<span class="text-[10px] font-mono opacity-30" id="rt-event-count" class="hidden">0 events</span>
-							<button type="button" onclick="clearRealtimeLog()" class="btn btn-xs btn-ghost opacity-40 hover:opacity-100 px-2 h-6 min-h-0">
-								<iconify-icon icon="solar:trash-bin-minimalistic-linear" width="12" height="12"></iconify-icon>
-								Clear
-							</button>
-						</div>
-					</div>
-					<!-- Events log -->
-					<div id="rt-log" class="flex-1 overflow-y-auto p-3 flex flex-col gap-1.5 font-mono text-xs">
-						<div id="rt-empty-state" class="flex flex-col items-center justify-center h-full opacity-20 text-center pointer-events-none gap-2">
-							<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>
-						</div>
-					</div>
-				</div>
-
-			</div>
-		</div>
-	`;
-}
+export function renderResultPanel(): string {
+	return `
+		<div class="card bg-base-100 border border-base-200 shadow-sm overflow-hidden flex flex-col">
+			<!-- Panel Header -->
+			<div class="px-5 py-3 border-b border-base-200 bg-base-200/20 flex items-center justify-between">
+				<h3 class="text-xs font-bold uppercase tracking-widest opacity-40">Response</h3>
+				<div class="flex items-center gap-3">
+					<span id="res-status-badge" class="hidden"></span>
+					<span id="res-elapsed-badge" class="hidden text-xs font-mono opacity-50"></span>
+					<div class="w-1.5 h-1.5 rounded-full bg-success animate-pulse opacity-0" id="execution-indicator"></div>
+				</div>
+			</div>
+
+			<!-- Tabs -->
+			<div role="tablist" class="tabs tabs-bordered tabs-sm px-4 pt-1 bg-base-200/10 border-b border-base-200">
+				<a role="tab" class="tab tab-active text-xs font-semibold" id="tab-body" onclick="switchResultTab('body')">Body</a>
+				<a role="tab" class="tab text-xs font-semibold" id="tab-resp-headers" onclick="switchResultTab('headers')">Headers</a>
+				<a role="tab" class="tab text-xs font-semibold" id="tab-info" onclick="switchResultTab('info')">Info</a>
+				<a role="tab" class="tab text-xs font-semibold gap-1.5" id="tab-realtime" onclick="switchResultTab('realtime')">
+					<span class="w-1.5 h-1.5 rounded-full bg-base-content/20 transition-colors duration-300" id="rt-dot"></span>
+					Realtime
+				</a>
+			</div>
+
+			<!-- Tab Panes -->
+			<div class="flex-1 relative min-h-[300px]">
+
+				<!-- Body Tab -->
+				<div id="result-tab-body" class="result-tab-pane absolute inset-0 overflow-auto">
+					<div class="absolute inset-0 flex flex-col items-center justify-center opacity-20 pointer-events-none p-10 text-center" id="result-empty-state">
+						<iconify-icon icon="solar:course-down-bold-duotone" width="48" height="48" class="mb-3"></iconify-icon>
+						<p class="text-xs font-semibold uppercase tracking-widest">Execute To See Output</p>
+					</div>
+					<div id="result-body-content" class="hidden h-full font-mono text-sm p-4 overflow-auto"></div>
+				</div>
+
+				<!-- Headers Tab -->
+				<div id="result-tab-headers" class="result-tab-pane absolute inset-0 overflow-auto hidden">
+					<div id="result-headers-content" class="p-4">
+						<div class="flex flex-col items-center justify-center h-40 opacity-20 text-center pointer-events-none">
+							<iconify-icon icon="solar:list-check-bold-duotone" width="36" height="36" class="mb-2"></iconify-icon>
+							<p class="text-xs font-semibold uppercase tracking-widest">No Response Yet</p>
+						</div>
+					</div>
+				</div>
+
+				<!-- Info Tab -->
+				<div id="result-tab-info" class="result-tab-pane absolute inset-0 overflow-auto hidden">
+					<div id="result-info-content" class="p-4">
+						<div class="flex flex-col items-center justify-center h-40 opacity-20 text-center pointer-events-none">
+							<iconify-icon icon="solar:info-circle-bold-duotone" width="36" height="36" class="mb-2"></iconify-icon>
+							<p class="text-xs font-semibold uppercase tracking-widest">No Response Yet</p>
+						</div>
+					</div>
+				</div>
+
+				<!-- Realtime Tab -->
+				<div id="result-tab-realtime" class="result-tab-pane absolute inset-0 overflow-auto hidden flex flex-col">
+					<!-- Connection status bar -->
+					<div class="flex items-center justify-between px-4 py-2 border-b border-base-200 bg-base-200/10 flex-none">
+						<div class="flex items-center gap-2">
+							<div class="w-2 h-2 rounded-full bg-base-content/20 transition-all duration-300" id="rt-status-dot"></div>
+							<span class="text-[10px] font-mono uppercase tracking-wider opacity-50" id="rt-status-text">Disconnected</span>
+						</div>
+						<div class="flex items-center gap-2">
+							<span class="text-[10px] font-mono opacity-30" id="rt-event-count" class="hidden">0 events</span>
+							<button type="button" onclick="clearRealtimeLog()" class="btn btn-xs btn-ghost opacity-40 hover:opacity-100 px-2 h-6 min-h-0">
+								<iconify-icon icon="solar:trash-bin-minimalistic-linear" width="12" height="12"></iconify-icon>
+								Clear
+							</button>
+						</div>
+					</div>
+					<!-- Events log -->
+					<div id="rt-log" class="flex-1 overflow-y-auto p-3 flex flex-col gap-1.5 font-mono text-xs">
+						<div id="rt-empty-state" class="flex flex-col items-center justify-center h-full opacity-20 text-center pointer-events-none gap-2">
+							<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>
+						</div>
+					</div>
+				</div>
+
+			</div>
+		</div>
+	`;
+}