@getjack/jack 0.1.28 → 0.1.30

package/templates/ai-chat/public/chat.js

@@ -1,148 +1,148 @@
-const messagesEl = document.getElementById('messages');
-const inputEl = document.getElementById('input');
-const sendBtn = document.getElementById('send');
+const messagesEl = document.getElementById("messages");
+const inputEl = document.getElementById("input");
+const sendBtn = document.getElementById("send");
 
-let history = [];
+const history = [];
 let isLoading = false;
 
 function setLoading(loading) {
-  isLoading = loading;
-  inputEl.disabled = loading;
-  sendBtn.disabled = loading;
-  sendBtn.textContent = loading ? '...' : 'Send';
+	isLoading = loading;
+	inputEl.disabled = loading;
+	sendBtn.disabled = loading;
+	sendBtn.textContent = loading ? "..." : "Send";
 }
 
 function clearEmptyState() {
-  const emptyState = messagesEl.querySelector('.empty-state');
-  if (emptyState) {
-    emptyState.remove();
-  }
+	const emptyState = messagesEl.querySelector(".empty-state");
+	if (emptyState) {
+		emptyState.remove();
+	}
 }
 
-function appendMessage(role, content, className = '') {
-  clearEmptyState();
-  const el = document.createElement('div');
-  el.className = `message ${role} ${className}`.trim();
-  el.textContent = content;
-  messagesEl.appendChild(el);
-  messagesEl.scrollTop = messagesEl.scrollHeight;
-  return el;
+function appendMessage(role, content, className = "") {
+	clearEmptyState();
+	const el = document.createElement("div");
+	el.className = `message ${role} ${className}`.trim();
+	el.textContent = content;
+	messagesEl.appendChild(el);
+	messagesEl.scrollTop = messagesEl.scrollHeight;
+	return el;
 }
 
 async function sendMessage() {
-  const content = inputEl.value.trim();
-  if (!content || isLoading) return;
-
-  // Add user message to history and display
-  history.push({ role: 'user', content });
-  appendMessage('user', content);
-  inputEl.value = '';
-
-  // Create assistant message placeholder
-  const assistantEl = appendMessage('assistant', '', 'typing');
-  setLoading(true);
-
-  try {
-    const response = await fetch('/api/chat', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ messages: history }),
-    });
-
-    if (!response.ok) {
-      let errorMessage = 'Something went wrong. Please try again.';
-      try {
-        const err = await response.json();
-        if (err.error) {
-          errorMessage = err.error;
-        }
-      } catch {
-        // Use default error message
-      }
-      assistantEl.textContent = errorMessage;
-      assistantEl.className = 'message assistant error';
-      setLoading(false);
-      return;
-    }
-
-    // Stream response
-    const reader = response.body.getReader();
-    const decoder = new TextDecoder();
-    let assistantContent = '';
-    let buffer = '';
-
-    while (true) {
-      const { done, value } = await reader.read();
-      if (done) break;
-
-      buffer += decoder.decode(value, { stream: true });
-
-      // Process complete SSE messages
-      const lines = buffer.split('\n');
-      // Keep the last potentially incomplete line in the buffer
-      buffer = lines.pop() || '';
-
-      for (const line of lines) {
-        if (line.startsWith('data: ')) {
-          const data = line.slice(6).trim();
-          if (data === '[DONE]') continue;
-
-          try {
-            const parsed = JSON.parse(data);
-            if (parsed.response) {
-              assistantContent += parsed.response;
-              assistantEl.textContent = assistantContent;
-              assistantEl.className = 'message assistant';
-              messagesEl.scrollTop = messagesEl.scrollHeight;
-            }
-          } catch {
-            // Skip malformed JSON chunks
-          }
-        }
-      }
-    }
-
-    // Process any remaining buffer content
-    if (buffer.startsWith('data: ')) {
-      const data = buffer.slice(6).trim();
-      if (data && data !== '[DONE]') {
-        try {
-          const parsed = JSON.parse(data);
-          if (parsed.response) {
-            assistantContent += parsed.response;
-            assistantEl.textContent = assistantContent;
-            assistantEl.className = 'message assistant';
-          }
-        } catch {
-          // Skip malformed JSON
-        }
-      }
-    }
-
-    // Save to history if we got content
-    if (assistantContent) {
-      history.push({ role: 'assistant', content: assistantContent });
-    } else {
-      assistantEl.textContent = 'No response received. Please try again.';
-      assistantEl.className = 'message assistant error';
-    }
-  } catch (err) {
-    console.error('Chat error:', err);
-    assistantEl.textContent = 'Connection error. Please check your network and try again.';
-    assistantEl.className = 'message assistant error';
-  }
-
-  setLoading(false);
-  inputEl.focus();
+	const content = inputEl.value.trim();
+	if (!content || isLoading) return;
+
+	// Add user message to history and display
+	history.push({ role: "user", content });
+	appendMessage("user", content);
+	inputEl.value = "";
+
+	// Create assistant message placeholder
+	const assistantEl = appendMessage("assistant", "", "typing");
+	setLoading(true);
+
+	try {
+		const response = await fetch("/api/chat", {
+			method: "POST",
+			headers: { "Content-Type": "application/json" },
+			body: JSON.stringify({ messages: history }),
+		});
+
+		if (!response.ok) {
+			let errorMessage = "Something went wrong. Please try again.";
+			try {
+				const err = await response.json();
+				if (err.error) {
+					errorMessage = err.error;
+				}
+			} catch {
+				// Use default error message
+			}
+			assistantEl.textContent = errorMessage;
+			assistantEl.className = "message assistant error";
+			setLoading(false);
+			return;
+		}
+
+		// Stream response
+		const reader = response.body.getReader();
+		const decoder = new TextDecoder();
+		let assistantContent = "";
+		let buffer = "";
+
+		while (true) {
+			const { done, value } = await reader.read();
+			if (done) break;
+
+			buffer += decoder.decode(value, { stream: true });
+
+			// Process complete SSE messages
+			const lines = buffer.split("\n");
+			// Keep the last potentially incomplete line in the buffer
+			buffer = lines.pop() || "";
+
+			for (const line of lines) {
+				if (line.startsWith("data: ")) {
+					const data = line.slice(6).trim();
+					if (data === "[DONE]") continue;
+
+					try {
+						const parsed = JSON.parse(data);
+						if (parsed.response) {
+							assistantContent += parsed.response;
+							assistantEl.textContent = assistantContent;
+							assistantEl.className = "message assistant";
+							messagesEl.scrollTop = messagesEl.scrollHeight;
+						}
+					} catch {
+						// Skip malformed JSON chunks
+					}
+				}
+			}
+		}
+
+		// Process any remaining buffer content
+		if (buffer.startsWith("data: ")) {
+			const data = buffer.slice(6).trim();
+			if (data && data !== "[DONE]") {
+				try {
+					const parsed = JSON.parse(data);
+					if (parsed.response) {
+						assistantContent += parsed.response;
+						assistantEl.textContent = assistantContent;
+						assistantEl.className = "message assistant";
+					}
+				} catch {
+					// Skip malformed JSON
+				}
+			}
+		}
+
+		// Save to history if we got content
+		if (assistantContent) {
+			history.push({ role: "assistant", content: assistantContent });
+		} else {
+			assistantEl.textContent = "No response received. Please try again.";
+			assistantEl.className = "message assistant error";
+		}
+	} catch (err) {
+		console.error("Chat error:", err);
+		assistantEl.textContent = "Connection error. Please check your network and try again.";
+		assistantEl.className = "message assistant error";
+	}
+
+	setLoading(false);
+	inputEl.focus();
 }
 
 // Event listeners
-sendBtn.addEventListener('click', sendMessage);
-inputEl.addEventListener('keypress', (e) => {
-  if (e.key === 'Enter' && !e.shiftKey) {
-    e.preventDefault();
-    sendMessage();
-  }
+sendBtn.addEventListener("click", sendMessage);
+inputEl.addEventListener("keypress", (e) => {
+	if (e.key === "Enter" && !e.shiftKey) {
+		e.preventDefault();
+		sendMessage();
+	}
 });
 
 // Focus input on load

package/templates/ai-chat/src/index.ts

@@ -14,7 +14,9 @@ interface Env {
 function getAI(env: Env) {
 	// Prefer jack cloud proxy if available (for metering)
 	if (env.__AI_PROXY && env.__JACK_PROJECT_ID && env.__JACK_ORG_ID) {
-		return createJackAI(env as Required<Pick<Env, "__AI_PROXY" | "__JACK_PROJECT_ID" | "__JACK_ORG_ID">>);
+		return createJackAI(
+			env as Required<Pick<Env, "__AI_PROXY" | "__JACK_PROJECT_ID" | "__JACK_ORG_ID">>,
+		);
 	}
 	// Fallback to direct binding for local dev
 	if (env.AI) {
@@ -115,14 +117,11 @@ export default {
 				// Stream response using Llama 3.2 1B - cheapest model with good quality
 				// See: https://developers.cloudflare.com/workers-ai/models/
 				const ai = getAI(env);
-				const stream = await ai.run(
-					"@cf/meta/llama-3.2-1b-instruct",
-					{
-						messages,
-						stream: true,
-						max_tokens: 1024,
-					},
-				);
+				const stream = await ai.run("@cf/meta/llama-3.2-1b-instruct", {
+					messages,
+					stream: true,
+					max_tokens: 1024,
+				});
 
 				return new Response(stream, {
 					headers: {
@@ -133,10 +132,7 @@ export default {
 				});
 			} catch (err) {
 				console.error("Chat error:", err);
-				return Response.json(
-					{ error: "Something went wrong. Please try again." },
-					{ status: 500 },
-				);
+				return Response.json({ error: "Something went wrong. Please try again." }, { status: 500 });
 			}
 		}
 

package/templates/ai-chat/src/jack-ai.ts

@@ -65,9 +65,13 @@ export function createJackAI(env: JackAIEnv): {
 			// Handle quota exceeded
 			if (response.status === 429) {
 				const error = await response.json();
-				const quotaError = new Error((error as { message?: string }).message || "AI quota exceeded");
+				const quotaError = new Error(
+					(error as { message?: string }).message || "AI quota exceeded",
+				);
 				(quotaError as Error & { code: string }).code = "AI_QUOTA_EXCEEDED";
-				(quotaError as Error & { resetIn?: number }).resetIn = (error as { resetIn?: number }).resetIn;
+				(quotaError as Error & { resetIn?: number }).resetIn = (
+					error as { resetIn?: number }
+				).resetIn;
 				throw quotaError;
 			}
 

package/templates/saas/.jack.json

@@ -1,7 +1,12 @@
 {
 	"name": "saas",
 	"description": "SaaS starter (Auth + Payments + React)",
-	"secrets": ["STRIPE_SECRET_KEY", "BETTER_AUTH_SECRET", "STRIPE_PRO_PRICE_ID", "STRIPE_ENTERPRISE_PRICE_ID"],
+	"secrets": [
+		"STRIPE_SECRET_KEY",
+		"BETTER_AUTH_SECRET",
+		"STRIPE_PRO_PRICE_ID",
+		"STRIPE_ENTERPRISE_PRICE_ID"
+	],
 	"capabilities": ["db"],
 	"requires": ["DB"],
 	"intent": {

package/templates/saas/src/auth.ts

@@ -1,8 +1,8 @@
-import { betterAuth } from "better-auth";
 import { stripe } from "@better-auth/stripe";
-import Stripe from "stripe";
+import { betterAuth } from "better-auth";
 import { Kysely } from "kysely";
 import { D1Dialect } from "kysely-d1";
+import Stripe from "stripe";
 
 // Env type is defined in index.ts and passed from the worker
 type Env = {
@@ -29,7 +29,9 @@ export function createAuth(env: Env) {
 
 		if (missingConfig.length > 0) {
 			console.error(`[Stripe] Missing required config: ${missingConfig.join(", ")}`);
-			console.error("[Stripe] Subscriptions will not work correctly. Set these secrets via: jack secrets set <KEY> <value>");
+			console.error(
+				"[Stripe] Subscriptions will not work correctly. Set these secrets via: jack secrets set <KEY> <value>",
+			);
 		}
 
 		// Only enable Stripe plugin if we have the minimum required config
@@ -49,7 +51,9 @@ export function createAuth(env: Env) {
 				}),
 			);
 		} else {
-			console.error("[Stripe] Plugin DISABLED - STRIPE_WEBHOOK_SECRET is required for reliable subscription sync");
+			console.error(
+				"[Stripe] Plugin DISABLED - STRIPE_WEBHOOK_SECRET is required for reliable subscription sync",
+			);
 		}
 	}
 

package/templates/saas/src/client/App.tsx

@@ -1,20 +1,35 @@
-import { useState, useEffect } from "react";
+import { useEffect, useState } from "react";
 
+import { ProtectedRoute } from "./components/ProtectedRoute";
+import DashboardPage from "./pages/DashboardPage";
+import ForgotPasswordPage from "./pages/ForgotPasswordPage";
 // Page imports
 import HomePage from "./pages/HomePage";
 import LoginPage from "./pages/LoginPage";
-import SignupPage from "./pages/SignupPage";
 import PricingPage from "./pages/PricingPage";
-import DashboardPage from "./pages/DashboardPage";
-import ForgotPasswordPage from "./pages/ForgotPasswordPage";
 import ResetPasswordPage from "./pages/ResetPasswordPage";
-import { ProtectedRoute } from "./components/ProtectedRoute";
+import SignupPage from "./pages/SignupPage";
 
-type Route = "/" | "/login" | "/signup" | "/pricing" | "/dashboard" | "/forgot-password" | "/reset-password";
+type Route =
+	| "/"
+	| "/login"
+	| "/signup"
+	| "/pricing"
+	| "/dashboard"
+	| "/forgot-password"
+	| "/reset-password";
 
 function getRouteFromHash(): Route {
 	const hash = window.location.hash.split("?")[0].slice(1) || "/";
-	const validRoutes: Route[] = ["/", "/login", "/signup", "/pricing", "/dashboard", "/forgot-password", "/reset-password"];
+	const validRoutes: Route[] = [
+		"/",
+		"/login",
+		"/signup",
+		"/pricing",
+		"/dashboard",
+		"/forgot-password",
+		"/reset-password",
+	];
 	return validRoutes.includes(hash as Route) ? (hash as Route) : "/";
 }
 

package/templates/saas/src/client/components/ProtectedRoute.tsx

@@ -1,7 +1,14 @@
-import { ReactNode, useEffect } from "react";
+import { type ReactNode, useEffect } from "react";
 import { authClient } from "../lib/auth-client";
 
-type Route = "/" | "/login" | "/signup" | "/pricing" | "/dashboard" | "/forgot-password" | "/reset-password";
+type Route =
+	| "/"
+	| "/login"
+	| "/signup"
+	| "/pricing"
+	| "/dashboard"
+	| "/forgot-password"
+	| "/reset-password";
 
 interface ProtectedRouteProps {
 	children: ReactNode;

package/templates/saas/src/client/components/ThemeToggle.tsx

@@ -18,12 +18,7 @@ export function ThemeToggle() {
 	};
 
 	return (
-		<Button
-			variant="ghost"
-			size="icon"
-			className="h-9 w-9"
-			onClick={toggleTheme}
-		>
+		<Button variant="ghost" size="icon" className="h-9 w-9" onClick={toggleTheme}>
 			<Sun className="h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
 			<Moon className="absolute h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
 			<span className="sr-only">Toggle theme</span>

package/templates/saas/src/client/components/ui/accordion.tsx

@@ -1,6 +1,6 @@
-import * as React from "react";
 import * as AccordionPrimitive from "@radix-ui/react-accordion";
 import { ChevronDownIcon } from "lucide-react";
+import type * as React from "react";
 
 import { cn } from "@/lib/utils";
 

package/templates/saas/src/client/components/ui/alert-dialog.tsx

@@ -1,8 +1,8 @@
-import * as React from "react";
 import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+import type * as React from "react";
 
-import { cn } from "@/lib/utils";
 import { buttonVariants } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
 
 function AlertDialog({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
 	return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;

package/templates/saas/src/client/components/ui/alert.tsx

@@ -1,5 +1,5 @@
-import * as React from "react";
-import { cva, type VariantProps } from "class-variance-authority";
+import { type VariantProps, cva } from "class-variance-authority";
+import type * as React from "react";
 
 import { cn } from "@/lib/utils";
 

package/templates/saas/src/client/components/ui/avatar.tsx

@@ -1,5 +1,5 @@
-import * as React from "react";
 import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import type * as React from "react";
 
 import { cn } from "@/lib/utils";
 

package/templates/saas/src/client/components/ui/badge.tsx

@@ -1,6 +1,6 @@
-import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
-import { cva, type VariantProps } from "class-variance-authority";
+import { type VariantProps, cva } from "class-variance-authority";
+import type * as React from "react";
 
 import { cn } from "@/lib/utils";
 

package/templates/saas/src/client/components/ui/breadcrumb.tsx

@@ -1,6 +1,6 @@
-import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { ChevronRight, MoreHorizontal } from "lucide-react";
+import type * as React from "react";
 
 import { cn } from "@/lib/utils";
 

package/templates/saas/src/client/components/ui/button-group.tsx

@@ -1,8 +1,8 @@
 import { Slot } from "@radix-ui/react-slot";
-import { cva, type VariantProps } from "class-variance-authority";
+import { type VariantProps, cva } from "class-variance-authority";
 
-import { cn } from "@/lib/utils";
 import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
 
 const buttonGroupVariants = cva(
 	"flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md has-[>[data-slot=button-group]]:gap-2",

package/templates/saas/src/client/components/ui/button.tsx

@@ -1,6 +1,6 @@
-import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
-import { cva, type VariantProps } from "class-variance-authority";
+import { type VariantProps, cva } from "class-variance-authority";
+import type * as React from "react";
 
 import { cn } from "@/lib/utils";
 

package/templates/saas/src/client/components/ui/card.tsx

@@ -1,4 +1,4 @@
-import * as React from "react";
+import type * as React from "react";
 
 import { cn } from "@/lib/utils";
 

package/templates/saas/src/client/components/ui/carousel.tsx

@@ -1,9 +1,9 @@
-import * as React from "react";
 import useEmblaCarousel, { type UseEmblaCarouselType } from "embla-carousel-react";
 import { ArrowLeft, ArrowRight } from "lucide-react";
+import * as React from "react";
 
-import { cn } from "@/lib/utils";
 import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
 
 type CarouselApi = UseEmblaCarouselType[1];
 type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;

package/templates/saas/src/client/components/ui/checkbox.tsx

@@ -1,8 +1,8 @@
 "use client";
 
-import * as React from "react";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import { CheckIcon } from "lucide-react";
+import type * as React from "react";
 
 import { cn } from "@/lib/utils";
 

package/templates/saas/src/client/components/ui/command.tsx

@@ -1,8 +1,7 @@
-import * as React from "react";
 import { Command as CommandPrimitive } from "cmdk";
 import { SearchIcon } from "lucide-react";
+import type * as React from "react";
 
-import { cn } from "@/lib/utils";
 import {
 	Dialog,
 	DialogContent,
@@ -10,6 +9,7 @@ import {
 	DialogHeader,
 	DialogTitle,
 } from "@/components/ui/dialog";
+import { cn } from "@/lib/utils";
 
 function Command({ className, ...props }: React.ComponentProps<typeof CommandPrimitive>) {
 	return (

package/templates/saas/src/client/components/ui/context-menu.tsx

@@ -1,8 +1,8 @@
 "use client";
 
-import * as React from "react";
 import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
 import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
+import type * as React from "react";
 
 import { cn } from "@/lib/utils";
 

package/templates/saas/src/client/components/ui/dialog.tsx

@@ -1,6 +1,6 @@
-import * as React from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { XIcon } from "lucide-react";
+import type * as React from "react";
 
 import { cn } from "@/lib/utils";
 

package/templates/saas/src/client/components/ui/drawer.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import * as React from "react";
+import type * as React from "react";
 import { Drawer as DrawerPrimitive } from "vaul";
 
 import { cn } from "@/lib/utils";

package/templates/saas/src/client/components/ui/dropdown-menu.tsx

@@ -1,6 +1,6 @@
-import * as React from "react";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
+import type * as React from "react";
 
 import { cn } from "@/lib/utils";
 

package/templates/saas/src/client/components/ui/empty.tsx

@@ -1,4 +1,4 @@
-import { cva, type VariantProps } from "class-variance-authority";
+import { type VariantProps, cva } from "class-variance-authority";
 
 import { cn } from "@/lib/utils";