@getjack/jack 0.1.32 → 0.1.34

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

@@ -0,0 +1,73 @@
+import React from "react";
+import { createRoot } from "react-dom/client";
+import { useChat } from "@ai-sdk/react";
+
+const { useState, useEffect, useRef } = React;
+
+function App() {
+  const [chatId, setChatId] = useState(null);
+  const messagesEndRef = useRef(null);
+
+  // Create a new chat on mount
+  useEffect(() => {
+    fetch("/api/chat/new", { method: "POST" })
+      .then((r) => r.json())
+      .then((data) => setChatId(data.id));
+  }, []);
+
+  const { messages, input, handleInputChange, handleSubmit, isLoading } = useChat({
+    api: "/api/chat",
+    body: { chatId },
+  });
+
+  // Auto-scroll
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [messages]);
+
+  return React.createElement("div", { style: styles.container },
+    React.createElement("header", { style: styles.header },
+      React.createElement("h1", { style: styles.title }, "AI Chat"),
+    ),
+    React.createElement("div", { style: styles.messages },
+      messages.length === 0 && React.createElement("div", { style: styles.empty }, "Send a message to start chatting"),
+      messages.map((m) =>
+        React.createElement("div", { key: m.id, style: { ...styles.message, ...(m.role === "user" ? styles.userMessage : styles.assistantMessage) } },
+          React.createElement("div", { style: styles.messageRole }, m.role === "user" ? "You" : "AI"),
+          React.createElement("div", { style: styles.messageContent }, m.content || (m.parts?.map(p => p.text).join("") || "")),
+        )
+      ),
+      React.createElement("div", { ref: messagesEndRef }),
+    ),
+    React.createElement("form", { onSubmit: handleSubmit, style: styles.form },
+      React.createElement("input", {
+        value: input,
+        onChange: handleInputChange,
+        placeholder: "Type a message...",
+        style: styles.input,
+        disabled: isLoading,
+      }),
+      React.createElement("button", { type: "submit", style: styles.button, disabled: isLoading || !input.trim() },
+        isLoading ? "..." : "Send"
+      ),
+    ),
+  );
+}
+
+const styles = {
+  container: { display: "flex", flexDirection: "column", height: "100vh", maxWidth: "800px", margin: "0 auto" },
+  header: { padding: "16px 20px", borderBottom: "1px solid #262626" },
+  title: { fontSize: "18px", fontWeight: "600" },
+  messages: { flex: 1, overflow: "auto", padding: "20px", display: "flex", flexDirection: "column", gap: "16px" },
+  empty: { color: "#737373", textAlign: "center", marginTop: "40px" },
+  message: { padding: "12px 16px", borderRadius: "12px", maxWidth: "80%" },
+  userMessage: { alignSelf: "flex-end", background: "#2563eb", color: "white" },
+  assistantMessage: { alignSelf: "flex-start", background: "#1c1c1c", border: "1px solid #262626" },
+  messageRole: { fontSize: "11px", fontWeight: "600", marginBottom: "4px", opacity: 0.7, textTransform: "uppercase" },
+  messageContent: { fontSize: "14px", lineHeight: "1.5", whiteSpace: "pre-wrap" },
+  form: { padding: "16px 20px", borderTop: "1px solid #262626", display: "flex", gap: "8px" },
+  input: { flex: 1, padding: "10px 14px", borderRadius: "8px", border: "1px solid #333", background: "#1c1c1c", color: "#e5e5e5", fontSize: "14px", outline: "none" },
+  button: { padding: "10px 20px", borderRadius: "8px", border: "none", background: "#2563eb", color: "white", fontSize: "14px", fontWeight: "500", cursor: "pointer" },
+};
+
+createRoot(document.getElementById("root")).render(React.createElement(App));

package/templates/ai-chat/public/index.html

@@ -5,205 +5,22 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>AI Chat</title>
   <style>
-    * {
-      box-sizing: border-box;
-      margin: 0;
-      padding: 0;
-    }
-
-    body {
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
-      background: #f5f5f5;
-      min-height: 100vh;
-      display: flex;
-      justify-content: center;
-      padding: 1rem;
-    }
-
-    .chat-container {
-      width: 100%;
-      max-width: 700px;
-      display: flex;
-      flex-direction: column;
-      height: calc(100vh - 2rem);
-    }
-
-    header {
-      text-align: center;
-      padding: 1rem;
-    }
-
-    header h1 {
-      font-size: 1.5rem;
-      color: #333;
-      margin-bottom: 0.25rem;
-    }
-
-    header p {
-      font-size: 0.875rem;
-      color: #666;
-    }
-
-    .messages {
-      flex: 1;
-      overflow-y: auto;
-      padding: 1rem;
-      background: white;
-      border-radius: 12px;
-      margin-bottom: 1rem;
-      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-    }
-
-    .message {
-      padding: 0.75rem 1rem;
-      margin-bottom: 0.75rem;
-      border-radius: 12px;
-      max-width: 85%;
-      line-height: 1.5;
-      word-wrap: break-word;
-    }
-
-    .message.user {
-      background: #007bff;
-      color: white;
-      margin-left: auto;
-      border-bottom-right-radius: 4px;
-    }
-
-    .message.assistant {
-      background: #e9ecef;
-      color: #333;
-      margin-right: auto;
-      border-bottom-left-radius: 4px;
-    }
-
-    .message.error {
-      background: #fee;
-      color: #c00;
-      border: 1px solid #fcc;
-    }
-
-    .message.typing {
-      color: #666;
-      font-style: italic;
-    }
-
-    .input-area {
-      display: flex;
-      gap: 0.5rem;
-      background: white;
-      padding: 1rem;
-      border-radius: 12px;
-      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-    }
-
-    .input-area input {
-      flex: 1;
-      padding: 0.75rem 1rem;
-      border: 1px solid #ddd;
-      border-radius: 8px;
-      font-size: 1rem;
-      outline: none;
-      transition: border-color 0.2s;
-    }
-
-    .input-area input:focus {
-      border-color: #007bff;
-    }
-
-    .input-area input:disabled {
-      background: #f5f5f5;
-      cursor: not-allowed;
-    }
-
-    .input-area button {
-      padding: 0.75rem 1.5rem;
-      background: #007bff;
-      color: white;
-      border: none;
-      border-radius: 8px;
-      font-size: 1rem;
-      cursor: pointer;
-      transition: background 0.2s;
-    }
-
-    .input-area button:hover:not(:disabled) {
-      background: #0056b3;
-    }
-
-    .input-area button:disabled {
-      background: #ccc;
-      cursor: not-allowed;
-    }
-
-    .empty-state {
-      text-align: center;
-      color: #999;
-      padding: 3rem 1rem;
-    }
-
-    .empty-state p {
-      font-size: 1.1rem;
-      margin-bottom: 0.5rem;
-    }
-
-    .empty-state small {
-      font-size: 0.875rem;
-    }
-
-    @media (max-width: 480px) {
-      body {
-        padding: 0.5rem;
-      }
-
-      .chat-container {
-        height: calc(100vh - 1rem);
-      }
-
-      header h1 {
-        font-size: 1.25rem;
-      }
-
-      .message {
-        max-width: 90%;
-        padding: 0.625rem 0.875rem;
-      }
-
-      .input-area {
-        padding: 0.75rem;
-      }
-
-      .input-area button {
-        padding: 0.75rem 1rem;
-      }
-    }
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #0a0a0a; color: #e5e5e5; height: 100vh; }
+    #root { height: 100%; }
   </style>
 </head>
 <body>
-  <div class="chat-container">
-    <header>
-      <h1>AI Chat</h1>
-      <p>Powered by Cloudflare AI (Mistral 7B)</p>
-    </header>
-
-    <div id="messages" class="messages">
-      <div class="empty-state">
-        <p>Start a conversation</p>
-        <small>Type a message below to begin</small>
-      </div>
-    </div>
-
-    <div class="input-area">
-      <input
-        type="text"
-        id="input"
-        placeholder="Type your message..."
-        autocomplete="off"
-      />
-      <button id="send">Send</button>
-    </div>
-  </div>
-
-  <script src="/chat.js"></script>
+  <div id="root"></div>
+  <script type="importmap">
+  {
+    "imports": {
+      "react": "https://esm.sh/react@19",
+      "react-dom/client": "https://esm.sh/react-dom@19/client",
+      "@ai-sdk/react": "https://esm.sh/@ai-sdk/react@1?external=react"
+    }
+  }
+  </script>
+  <script type="module" src="/app.js"></script>
 </body>
 </html>

package/templates/ai-chat/schema.sql

@@ -0,0 +1,14 @@
+CREATE TABLE IF NOT EXISTS chats (
+  id TEXT PRIMARY KEY,
+  created_at INTEGER NOT NULL DEFAULT (unixepoch())
+);
+
+CREATE TABLE IF NOT EXISTS messages (
+  id TEXT PRIMARY KEY,
+  chat_id TEXT NOT NULL REFERENCES chats(id) ON DELETE CASCADE,
+  role TEXT NOT NULL,
+  content TEXT NOT NULL,
+  created_at INTEGER NOT NULL DEFAULT (unixepoch())
+);
+
+CREATE INDEX IF NOT EXISTS idx_messages_chat_id ON messages(chat_id);

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

@@ -1,49 +1,32 @@
+import { Hono } from "hono";
+import { streamText, convertToCoreMessages, type Message } from "ai";
+import { createWorkersAI } from "workers-ai-provider";
 import { createJackAI } from "./jack-ai";
 
 interface Env {
-	// Direct AI binding (for local dev with wrangler)
 	AI?: Ai;
-	// Jack proxy bindings (injected in jack cloud)
 	__AI_PROXY?: Fetcher;
 	__JACK_PROJECT_ID?: string;
 	__JACK_ORG_ID?: string;
-	// Assets binding
 	ASSETS: Fetcher;
+	DB: D1Database;
 }
 
 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">>,
+			env as Required<
+				Pick<Env, "__AI_PROXY" | "__JACK_PROJECT_ID" | "__JACK_ORG_ID">
+			>,
 		);
 	}
-	// Fallback to direct binding for local dev
-	if (env.AI) {
-		return env.AI;
-	}
+	if (env.AI) return env.AI;
 	throw new Error("No AI binding available");
 }
 
-interface ChatMessage {
-	role: "user" | "assistant" | "system";
-	content: string;
-}
-
-// System prompt - customize this to change the AI's personality
-const SYSTEM_PROMPT = `You are a helpful AI assistant built with jack (getjack.sh).
-
-jack helps developers ship ideas fast - from "what if" to a live URL in seconds. You're running on Cloudflare's edge network, close to users worldwide.
-
-Be concise, friendly, and helpful. If asked about jack:
-- jack new creates projects from templates
-- jack ship deploys to production
-- jack open opens your app in browser
-- Docs: https://docs.getjack.sh
+const SYSTEM_PROMPT = `You are a helpful AI assistant. Be concise, friendly, and helpful. Keep responses short unless detail is needed.`;
 
-Focus on being useful. Keep responses short unless detail is needed.`;
-
-// Rate limiting: 10 requests per minute per IP
+// Rate limiting
 const RATE_LIMIT = 10;
 const RATE_WINDOW_MS = 60_000;
 const rateLimitMap = new Map<string, { count: number; resetAt: number }>();
@@ -51,91 +34,92 @@ const rateLimitMap = new Map<string, { count: number; resetAt: number }>();
 function checkRateLimit(ip: string): boolean {
 	const now = Date.now();
 	const entry = rateLimitMap.get(ip);
-
 	if (!entry || now >= entry.resetAt) {
 		rateLimitMap.set(ip, { count: 1, resetAt: now + RATE_WINDOW_MS });
 		return true;
 	}
-
-	if (entry.count >= RATE_LIMIT) {
-		return false;
-	}
-
+	if (entry.count >= RATE_LIMIT) return false;
 	entry.count++;
 	return true;
 }
 
-// Clean up old entries periodically to prevent memory leaks
-function cleanupRateLimitMap(): void {
-	const now = Date.now();
-	for (const [ip, entry] of rateLimitMap) {
-		if (now >= entry.resetAt) {
-			rateLimitMap.delete(ip);
-		}
+const app = new Hono<{ Bindings: Env }>();
+
+// Create new chat
+app.post("/api/chat/new", async (c) => {
+	const id = crypto.randomUUID();
+	await c.env.DB.prepare("INSERT INTO chats (id) VALUES (?)").bind(id).run();
+	return c.json({ id });
+});
+
+// Load chat history
+app.get("/api/chat/:id", async (c) => {
+	const chatId = c.req.param("id");
+	const { results } = await c.env.DB.prepare(
+		"SELECT id, role, content, created_at FROM messages WHERE chat_id = ? ORDER BY created_at ASC",
+	)
+		.bind(chatId)
+		.all();
+	return c.json({ messages: results || [] });
+});
+
+// Chat endpoint with streaming
+app.post("/api/chat", async (c) => {
+	const ip = c.req.header("cf-connecting-ip") || "unknown";
+	if (!checkRateLimit(ip)) {
+		return c.json({ error: "Too many requests. Please wait a moment." }, 429);
 	}
-}
 
-export default {
-	async fetch(request: Request, env: Env): Promise<Response> {
-		const url = new URL(request.url);
-
-		// Serve static assets for non-API routes
-		if (request.method === "GET" && !url.pathname.startsWith("/api")) {
-			return env.ASSETS.fetch(request);
-		}
-
-		// POST /api/chat - Streaming chat endpoint
-		if (request.method === "POST" && url.pathname === "/api/chat") {
-			const ip = request.headers.get("cf-connecting-ip") || "unknown";
-
-			// Check rate limit
-			if (!checkRateLimit(ip)) {
-				// Cleanup old entries occasionally
-				cleanupRateLimitMap();
-				return Response.json(
-					{ error: "Too many requests. Please wait a moment and try again." },
-					{ status: 429 },
-				);
-			}
+	const { messages, chatId } = await c.req.json<{
+		messages: Message[];
+		chatId?: string;
+	}>();
+	if (!messages || !Array.isArray(messages)) {
+		return c.json({ error: "Invalid request." }, 400);
+	}
 
-			try {
-				const body = (await request.json()) as { messages?: ChatMessage[] };
-				let messages = body.messages;
-
-				if (!messages || !Array.isArray(messages)) {
-					return Response.json(
-						{ error: "Invalid request. Please provide a messages array." },
-						{ status: 400 },
-					);
-				}
-
-				// Prepend system prompt if not already present
-				if (messages.length === 0 || messages[0].role !== "system") {
-					messages = [{ role: "system", content: SYSTEM_PROMPT }, ...messages];
-				}
-
-				// 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,
-				});
-
-				return new Response(stream, {
-					headers: {
-						"Content-Type": "text/event-stream",
-						"Cache-Control": "no-cache",
-						Connection: "keep-alive",
-					},
-				});
-			} catch (err) {
-				console.error("Chat error:", err);
-				return Response.json({ error: "Something went wrong. Please try again." }, { status: 500 });
+	// Save user message to DB if we have a chatId
+	const lastUserMsg = messages.findLast((m: Message) => m.role === "user");
+	if (chatId && lastUserMsg) {
+		await c.env.DB.prepare(
+			"INSERT INTO messages (id, chat_id, role, content) VALUES (?, ?, ?, ?)",
+		)
+			.bind(
+				crypto.randomUUID(),
+				chatId,
+				"user",
+				typeof lastUserMsg.content === "string"
+					? lastUserMsg.content
+					: JSON.stringify(lastUserMsg.content),
+			)
+			.run();
+	}
+
+	const ai = getAI(c.env);
+	const provider = createWorkersAI({ binding: ai as Ai });
+
+	const result = streamText({
+		model: provider("@cf/meta/llama-3.3-70b-instruct-fp8-fast"),
+		system: SYSTEM_PROMPT,
+		messages: convertToCoreMessages(messages),
+		onFinish: async ({ text }) => {
+			// Save assistant response to DB
+			if (chatId && text) {
+				await c.env.DB.prepare(
+					"INSERT INTO messages (id, chat_id, role, content) VALUES (?, ?, ?, ?)",
+				)
+					.bind(crypto.randomUUID(), chatId, "assistant", text)
+					.run();
 			}
-		}
+		},
+	});
+
+	return result.toDataStreamResponse();
+});
+
+// Serve static assets for non-API routes
+app.get("*", async (c) => {
+	return c.env.ASSETS.fetch(c.req.raw);
+});
 
-		return Response.json({ error: "Not found" }, { status: 404 });
-	},
-};
+export default app;

package/templates/ai-chat/wrangler.jsonc

@@ -2,11 +2,18 @@
 	"name": "jack-template",
 	"main": "src/index.ts",
 	"compatibility_date": "2024-12-01",
+	"compatibility_flags": ["nodejs_compat"],
 	"ai": {
 		"binding": "AI"
 	},
 	"assets": {
 		"directory": "public",
 		"binding": "ASSETS"
-	}
+	},
+	"d1_databases": [
+		{
+			"binding": "DB",
+			"database_name": "jack-template-db"
+		}
+	]
 }

package/templates/cron/.jack.json

@@ -0,0 +1,66 @@
+{
+	"name": "cron",
+	"description": "Background tasks with cron scheduling and webhook ingestion",
+	"secrets": [],
+	"capabilities": ["db"],
+	"requires": ["DB", "CRON"],
+	"intent": {
+		"keywords": [
+			"cron",
+			"background",
+			"jobs",
+			"webhook",
+			"scheduled",
+			"queue",
+			"worker",
+			"tasks"
+		],
+		"examples": [
+			"background job processor",
+			"scheduled tasks",
+			"webhook handler",
+			"job queue"
+		]
+	},
+	"agentContext": {
+		"summary": "A background task worker with cron scheduling, D1 job queue, and webhook ingestion.",
+		"full_text": "## Project Structure\n\n- `src/index.ts` - Hono API with cron handler, webhook endpoint, and job status routes\n- `src/jobs.ts` - Job queue: create, process, retry with D1 backend\n- `src/webhooks.ts` - Webhook ingestion with HMAC-SHA256 signature verification\n- `schema.sql` - D1 schema (jobs, webhook_events)\n\n## Cron\n\nThe `POST /__scheduled` route runs on a cron schedule (default: every 5 minutes). It processes pending jobs and retries failed ones.\n\n## Jobs\n\n```typescript\n// Create a job\nawait createJob(db, { type: 'process-order', payload: { orderId: '123' } });\n\n// Jobs are processed automatically by cron\n// Failed jobs retry up to 3 times with exponential backoff\n```\n\n## Webhooks\n\n```\nPOST /webhook\nX-Signature: sha256=abc123...\nContent-Type: application/json\n\n{ \"event\": \"order.completed\", \"data\": { ... } }\n```\n\nWebhooks are verified using HMAC-SHA256, logged to D1, and can create jobs for async processing.\n\n## Endpoints\n\n- `POST /__scheduled` - Cron handler (called by scheduler)\n- `POST /webhook` - Inbound webhook receiver with signature verification\n- `GET /jobs` - List recent jobs with status\n- `GET /health` - Health check\n\n## Environment Variables\n\n- `WEBHOOK_SECRET` - HMAC signing secret for webhook verification (auto-generated)\n\n## Resources\n\n- [Hono Documentation](https://hono.dev)"
+	},
+	"hooks": {
+		"preCreate": [
+			{
+				"action": "require",
+				"source": "secret",
+				"key": "WEBHOOK_SECRET",
+				"message": "Generating webhook signing secret...",
+				"onMissing": "generate",
+				"generateCommand": "openssl rand -hex 32"
+			}
+		],
+		"postDeploy": [
+			{
+				"action": "clipboard",
+				"text": "{{url}}",
+				"message": "Deploy URL copied to clipboard"
+			},
+			{
+				"action": "shell",
+				"command": "curl -s {{url}}/health | head -c 200",
+				"message": "Testing worker health..."
+			},
+			{
+				"action": "box",
+				"title": "Background worker live: {{name}}",
+				"lines": [
+					"{{url}}",
+					"",
+					"Endpoints:",
+					"  POST {{url}}/webhook  — inbound webhook receiver",
+					"  GET  {{url}}/jobs     — job queue status",
+					"",
+					"Cron: runs every 5 minutes"
+				]
+			}
+		]
+	}
+}

package/templates/cron/bun.lock

@@ -0,0 +1,23 @@
+{
+  "lockfileVersion": 1,
+  "configVersion": 1,
+  "workspaces": {
+    "": {
+      "name": "jack-template",
+      "dependencies": {
+        "hono": "^4.6.0",
+      },
+      "devDependencies": {
+        "@cloudflare/workers-types": "^4.20241205.0",
+        "typescript": "^5.0.0",
+      },
+    },
+  },
+  "packages": {
+    "@cloudflare/workers-types": ["@cloudflare/workers-types@4.20260212.0", "", {}, "sha512-ZK+e8T/2tWBCrE8PoAi9oqTxcBen9Apq+dxbsy1R5LFVdB6M4pY+oP49OFuHTTezrvNXbyvmzbf/vjtrCPGdNg=="],
+
+    "hono": ["hono@4.11.9", "", {}, "sha512-Eaw2YTGM6WOxA6CXbckaEvslr2Ne4NFsKrvc0v97JD5awbmeBLO5w9Ho9L9kmKonrwF9RJlW6BxT1PVv/agBHQ=="],
+
+    "typescript": ["typescript@5.9.3", "", { "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" } }, "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw=="],
+  }
+}

package/templates/cron/package.json

@@ -0,0 +1,16 @@
+{
+	"name": "jack-template",
+	"type": "module",
+	"private": true,
+	"scripts": {
+		"dev": "wrangler dev",
+		"deploy": "wrangler deploy"
+	},
+	"dependencies": {
+		"hono": "^4.6.0"
+	},
+	"devDependencies": {
+		"@cloudflare/workers-types": "^4.20241205.0",
+		"typescript": "^5.0.0"
+	}
+}