appflare 0.2.9 → 0.2.11

package/cli/commands/index.ts

@@ -108,8 +108,9 @@ export async function runMigrate(
 		loadedConfig.outDirAbs,
 		"drizzle.config.ts",
 	);
+	const npxCmd = process.platform === "win32" ? "npx.cmd" : "npx";
 	const drizzleGenerate = Bun.spawn(
-		["drizzle-kit", "generate", "--config", drizzleConfigPath],
+		[npxCmd, "drizzle-kit", "generate", "--config", drizzleConfigPath],
 		{
 			cwd: packageDir,
 			stdin: "inherit",
@@ -126,7 +127,14 @@ export async function runMigrate(
 	}
 
 	const databaseName = loadedConfig.config.database[0].databaseName;
-	const wranglerArgs = ["wrangler", "d1", "migrations", "apply", databaseName];
+	const wranglerArgs = [
+		npxCmd,
+		"wrangler",
+		"d1",
+		"migrations",
+		"apply",
+		databaseName,
+	];
 
 	if (options.local) {
 		wranglerArgs.push("--local");
@@ -190,7 +198,9 @@ export async function runAddAdmin(
 	].join(" ");
 
 	const databaseName = loadedConfig.config.database[0].databaseName;
+	const npxCmd = process.platform === "win32" ? "npx.cmd" : "npx";
 	const wranglerArgs = [
+		npxCmd,
 		"wrangler",
 		"d1",
 		"execute",

package/cli/index.ts

@@ -1,4 +1,3 @@
-#!/usr/bin/env bun
 import { Command } from "commander";
 import { runBuild, runDev, runMigrate, runAddAdmin } from "./commands/index";
 
@@ -105,4 +104,9 @@ program
 		});
 	});
 
-await program.parseAsync(process.argv);
+(async () => {
+	await program.parseAsync(process.argv);
+})().catch((error) => {
+	console.error(error);
+	process.exit(1);
+});

package/cli/templates/dashboard/builders/functions/index.ts

@@ -1,6 +1,5 @@
 import { DiscoveredHandlerOperation } from "../../../../utils/handler-discovery";
 import { buildFunctionPage } from "./render-page";
-import { buildExecutionLogic } from "./execute-handler";
 
 export function buildFunctionRoutes(
 	handlers: DiscoveredHandlerOperation[],
@@ -11,10 +10,6 @@ export function buildFunctionRoutes(
 		return `
 	adminApp.get('/functions${h.routePath}', (c) => {
         ${buildFunctionPage(h)}
-	});
-
-	adminApp.post('/functions/execute${h.routePath}', async (c) => {
-        ${buildExecutionLogic(h)}
 	});`;
 	});
 

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

@@ -19,7 +19,7 @@ export function buildFunctionPage(h: DiscoveredHandlerOperation): string {
 					</div>
 				</div>
 
-				${renderScripts()}
+				${renderScripts(h)}
 			\`;
 
 		if (c.req.header('hx-request')) {

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

@@ -1,65 +1,169 @@
 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">
-			<div class="px-5 py-4 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">Request Parameters</h3>
+		<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="p-5">
-				<form hx-post="/admin/functions/execute${h.routePath}" hx-target="#execution-result" hx-ext="json-enc" class="flex flex-col gap-5">
-					<div class="form-control">
-						<label class="label pt-0">
-							<span class="label-text text-[11px] font-bold uppercase tracking-wider opacity-40">Arguments (JSON)</span>
-						</label>
-						<div class="relative group">
-							<textarea
-								name="args"
-								class="textarea textarea-bordered font-mono text-sm w-full min-h-[160px] bg-base-200/30 focus:bg-base-100 focus:border-primary transition-all rounded-xl border-base-200"
-								placeholder='{ }'
-							>{}</textarea>
-							<div class="absolute right-3 top-3 opacity-0 group-hover:opacity-40 transition-opacity pointer-events-none">
-								<iconify-icon icon="solar:code-file-linear" width="18" height="18"></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>
-						<label class="label">
-							<span class="label-text-alt opacity-40 italic">Provide the JSON arguments for this ${h.kind}</span>
-						</label>
 					</div>
 
-					<div class="form-control">
-						<label class="label pt-0">
-							<span class="label-text text-[11px] font-bold uppercase tracking-wider opacity-40">Bearer Token (Optional)</span>
-						</label>
-						<div class="relative group">
-							<input type="text" name="token" 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" placeholder="e.g. eyJhbGciOi..." />
-							<div class="absolute right-3 top-1/2 -translate-y-1/2 opacity-0 group-hover:opacity-40 transition-opacity pointer-events-none">
-								<iconify-icon icon="solar:key-linear" width="16" height="16"></iconify-icon>
-							</div>
+					<!-- Tab Content -->
+					<div class="flex-1 overflow-y-auto">
+						<div id="request-tab-args" class="p-5">
+							${renderArgumentsSection(h)}
 						</div>
-					</div>
-
-					<div class="form-control">
-						<label class="label pt-0">
-							<span class="label-text text-[11px] font-bold uppercase tracking-wider opacity-40">Custom Headers (JSON)</span>
-						</label>
-						<div class="relative group">
-							<textarea
-								name="headers"
-								class="textarea textarea-bordered font-mono text-sm w-full min-h-[80px] bg-base-200/30 focus:bg-base-100 focus:border-primary transition-all rounded-xl border-base-200"
-								placeholder='{ "x-custom-header": "value" }'
-							></textarea>
-							<div class="absolute right-3 top-3 opacity-0 group-hover:opacity-40 transition-opacity pointer-events-none">
-								<iconify-icon icon="solar:list-linear" width="18" height="18"></iconify-icon>
-							</div>
+						<div id="request-tab-auth" class="p-5 hidden">
+							${renderBearerTokenSection()}
+						</div>
+						<div id="request-tab-headers" class="p-5 hidden">
+							${renderCustomHeadersSection()}
 						</div>
 					</div>
 
-					<button type="submit" 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>
+					<!-- 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,18 +1,84 @@
 export function renderResultPanel(): string {
 	return `
 		<div class="card bg-base-100 border border-base-200 shadow-sm overflow-hidden flex flex-col">
-			<div class="px-5 py-4 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">Result</h3>
-				<div class="flex items-center gap-2">
+			<!-- 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>
-					<iconify-icon icon="solar:box-minimalistic-linear" width="16" height="16" class="opacity-30"></iconify-icon>
 				</div>
 			</div>
-			<div class="flex-1 p-0 relative min-h-[300px] bg-neutral/5" id="execution-result">
-				<div class="absolute inset-0 flex flex-col items-center justify-center opacity-20 pointer-events-none p-10 text-center">
-					<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>
+
+			<!-- 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>
 	`;