@deepraxis/app-template 0.0.0-stage → 0.1.0-dev.61eb886

package/LICENSE

@@ -0,0 +1,67 @@
+Deepractice Commercial Proprietary License
+
+Copyright (c) 2026 南京深度实践人工智能科技有限公司.
+Unified Social Credit Code: 91430104MAEDATJ09G.
+All rights reserved.
+
+IMPORTANT: THIS IS NOT AN OPEN SOURCE LICENSE.
+
+This repository and its source code, documentation, architecture, tests,
+scripts, configuration, prompts, agent designs, protocols, workflows, and other
+accompanying materials are proprietary commercial assets owned by 南京深度实践
+人工智能科技有限公司 (the "Copyright Holder").
+The Copyright Holder's Unified Social Credit Code is 91430104MAEDATJ09G.
+
+The purpose of this license is to bind this repository and the project code to
+the Copyright Holder as closed-source commercial intellectual property.
+
+No rights are granted by default. Access to this repository, possession of a
+copy of the source code, visibility into commit history, participation in
+business discussions, employment, consulting, shareholder status, investment,
+or cooperation with any related entity does not grant any ownership interest,
+copyright license, patent license, trademark license, trade secret license, or
+other intellectual property right.
+
+Without a separate written commercial agreement signed by the Copyright Holder,
+no person or entity may, directly or indirectly:
+
+1. use, run, deploy, host, or provide the software as a service;
+2. copy, modify, merge, adapt, translate, or create derivative works;
+3. publish, distribute, sublicense, lease, sell, transfer, or disclose the
+   software or any substantial part of it;
+4. reverse engineer, decompile, disassemble, or otherwise attempt to derive
+   source, structure, architecture, protocols, prompts, trade secrets, or
+   implementation details;
+5. use the software, code, documentation, architecture, protocols, prompts, or
+   repository history to train, fine-tune, evaluate, or improve any AI model,
+   coding agent, software-generation system, or competing product;
+6. remove, obscure, or alter copyright, license, ownership, confidentiality, or
+   attribution notices.
+
+All commercial use, internal business use, customer delivery, private
+deployment, SaaS operation, resale, redistribution, integration into another
+product, or access by third parties requires prior written authorization from
+the Copyright Holder.
+
+Contributions are accepted only on the basis that the contributor has the right
+to contribute them and assigns, or agrees to assign, all applicable rights in
+those contributions to the Copyright Holder unless a separate written agreement
+signed by the Copyright Holder states otherwise.
+
+This license applies to this repository as a whole. No part of this repository
+may be treated as public domain, community property, jointly owned project
+property, or an implied asset of any company, shareholder, collaborator,
+customer, investor, or business partner other than the Copyright Holder without
+a separate written agreement signed by the Copyright Holder.
+
+The Chinese legal name "南京深度实践人工智能科技有限公司" is the authoritative
+identity of the Copyright Holder. Any English rendering of that name is for
+identification convenience only and does not create a separate legal entity or
+alter ownership.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE, TITLE, AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES, OR OTHER LIABILITY ARISING
+FROM OR IN CONNECTION WITH THE SOFTWARE OR THE USE OF OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,7 @@
-# Temporary Holding Version
+# @deepraxis/app-template
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+The standard Praxis application template: a vinext (Next.js App Router on Workers) app with
+end-user sign-up and sign-in, D1 via drizzle, R2 image upload and an admin area.
+`praxis app create` copies `template/` into a new project and replaces the `<app-name>` placeholder
+in `praxis.jsonc`; an AI agent or a developer then adapts it. See `template/README.md` for the stack.
+It has no runtime code and no private dependency; `spec/` holds the develop proof and is not published.

package/SKILL.md

@@ -0,0 +1,121 @@
+---
+name: build-application
+description: "Required before building, changing, deploying or operating a web application on Praxis: a website, booking or ordering site, store, member area, internal tool, or any app with pages, sign-in, a database or uploads. Uses the standard Praxis stack (Next.js App Router on Workers via vinext, D1, R2) with `praxis app create` and `praxis app deploy`. Never deploy with wrangler and never pick another framework."
+---
+
+# Build an application on Praxis
+
+Use this skill when the user wants a working web application: something with pages people open in a browser, and usually sign-in, stored data or uploads. The result is a live URL on Praxis that the user can open and share.
+
+The stack and the architecture are fixed. Do not compare frameworks, do not ask the user to choose one, and do not deploy any other way. Every app starts from the standard template and is shipped with `praxis app deploy`.
+
+## The standard stack
+
+| Part | What it is | Where it lives in the project |
+|---|---|---|
+| Pages and API | Next.js App Router (v15), run on Cloudflare Workers by vinext | `app/` |
+| Business rules | Plain TypeScript, server-only | `lib/` |
+| Database | D1 (SQLite) with drizzle-orm; SQL migrations applied automatically on the first request | `migrations/`, `lib/migrations.ts`, `lib/schema.ts` |
+| Files | R2 bucket `IMAGES` | `lib/storage.ts` |
+| End-user accounts | Username and password; signed HttpOnly session cookie; the first account to register becomes `admin` | `lib/auth.ts`, `lib/session.ts`, `lib/users.ts`, `lib/guard.ts` |
+| UI | Tailwind CSS with Button, Input, Label and Card in `components/ui/` | `components/ui/` |
+| Validation | zod | in each route handler |
+| Project file | `praxis.jsonc`: name, secrets, health check | project root |
+
+The template already contains sign-up, sign-in, sign-out, an account page with image upload, an admin page and `/api/health`. Build the user's app by changing and extending it, not by starting over.
+
+## Where to run commands
+
+- **You are a Praxis platform agent.** Run `praxis` in your machine's terminal (the Bash tool). The CLI is preinstalled and already signed in through the `PRAXIS_API_TOKEN` environment variable, so never run `praxis login`. For questions about deployed apps (versions, deployments, events, secrets) you can also call the SDK from codemode: `praxis.application.workers.list()`, `praxis.application.workers.deployments.list({ path: { worker_id } })` and so on.
+- **You run elsewhere (Claude Code, Cursor, CI).** Install the CLI with `npm install -g @deepraxis/cli`. Sign in with `praxis login`, or set `PRAXIS_API_KEY`. Use the CLI for everything.
+
+## Steps
+
+### 1. Turn the request into a short plan
+Write down, for yourself:
+- the pages;
+- the data, which becomes tables and columns;
+- who may do what, as roles (`user` and `admin` already exist);
+- what is uploaded.
+
+Ask the user only when the answer would change the data model, for example "can a customer book more than one slot?". Otherwise choose a sensible default, say what you chose, and keep going.
+
+### 2. Create the project
+```bash
+praxis app create <name>
+cd <name>
+```
+`<name>` becomes part of the public URL: 3–40 lowercase letters, digits or single hyphens. `www`, `api`, `admin`, `app`, `docs`, `console` and `status` are reserved. The command copies the template and installs the dependencies.
+
+Read `README.md` in the new project once. It has the folder map and the recipes below in more detail.
+
+### 3. Develop
+- **Tables**: add `migrations/0002_<what>.sql` using `CREATE TABLE IF NOT EXISTS …`. Import it with `?raw` and append it to the list in `lib/migrations.ts`, then describe the table in `lib/schema.ts`. Migrations run once, in order, on the first request after a deploy. **Never edit a migration that has already been deployed**; add a new one instead.
+- **Rules** (prices, availability, who owns what) go in `lib/`. Pages and route handlers only call them.
+- **Pages**: `app/<path>/page.tsx`. Protect them with `await requireUser("/<path>")` or `await requireAdmin("/<path>")` from `lib/guard.ts`.
+- **Forms**: post to a route handler in `app/api/…/route.ts`. Validate with zod and answer with a 303 redirect (`redirectResponse` in `lib/guard.ts`), the way the sign-in form does.
+- **Uploads**: follow `app/api/images/route.ts` and `lib/storage.ts`. That code checks type and size, stores the file under the owner and records it in D1.
+- **New bindings**: declare them in `wrangler.jsonc` (`d1_databases`, `kv_namespaces`, `r2_buckets`, `vars`), add the type to `env.d.ts`, and read them with `import { env } from "cloudflare:workers"`.
+- **Secrets**: add them to `praxis.jsonc` `secrets`. `"generate"` creates a random value on the first deploy and keeps it on every later deploy. Never write a secret value into a file.
+- **UI**: use the components in `components/ui/` and Tailwind classes. Keep the existing layout and navigation.
+
+### 4. Check before deploying
+```bash
+bun run typecheck && bun test && bun run build
+```
+Fix every error before you deploy. `bun run dev` serves the app locally if you want to look at it first.
+
+### 5. Deploy
+```bash
+praxis app deploy
+```
+It builds, uploads only the changed files, creates a version, deploys it, keeps or creates the secrets and calls the `healthcheck` path. It prints the URL. The first deploy takes about one to two minutes.
+
+### 6. Verify it like a user
+- Open the URL. If the `control-browser` skill is available, use it, and walk through the main flow: register, sign in, do the main task, and check the admin page.
+- **The first account registered on a fresh app becomes the admin.** Register that account yourself with the username the user asked for (or `admin`) and a strong random password, then hand both to the user. Any test accounts you create after that are ordinary users; mention them so the user can ignore them.
+
+### 7. Report to the user
+Give:
+- the URL;
+- the admin username and password;
+- what the app does, in a few lines;
+- how to ask for changes.
+
+Keep technical words out of the report (no "worker", "D1" or "migration").
+
+## Changing the app later
+Edit the code, then run step 4 and step 5 again. The data in D1 and R2 stays across deploys.
+
+If a deploy breaks something, go back to the previous version at once and then fix forward:
+```bash
+praxis app rollback            # the version before the current one
+praxis app rollback --to <version_id>
+```
+
+## Operating the app
+| Question | CLI | Codemode |
+|---|---|---|
+| Which versions exist? | `praxis api application worker version list --worker <worker_id>` | `praxis.application.workers.versions.list({ path: { worker_id } })` |
+| What was deployed, and when? | `praxis api application worker deployment list --worker <worker_id>` | `praxis.application.workers.deployments.list({ path: { worker_id } })` |
+| What happened (deploys, failures)? | `praxis api application worker event list --worker <worker_id>` | `praxis.application.workers.events.list({ path: { worker_id } })` |
+| Which secrets are set? | `praxis api application worker secret list --worker <worker_id>` | `praxis.application.workers.secrets.list({ path: { worker_id } })` |
+| Find the worker id | `praxis api application worker list` | `praxis.application.workers.list()` |
+
+Runtime logs are not available yet. To find out why a page fails, reproduce the failure, read the error page or the API response, and add clear error messages in the route handler.
+
+## Limits
+- **Not supported**: service bindings, queues, Durable Objects, Workers AI, Analytics Engine. A deploy that declares one fails with `UNSUPPORTED` and names it. Use D1, KV, R2, vars, secrets and static files instead.
+- **Rollout**: there is no gradual rollout. A deploy replaces the live version.
+- **Files**: each file can be at most 25 MiB. The template limits image uploads to 5 MB.
+- **Template parts to leave alone**: `vinext-plugins.ts` and `vite.config.ts`. They make the build deployable; removing them breaks deploys with "No such module".
+
+## When something fails
+| Symptom | Cause | Fix |
+|---|---|---|
+| `praxis: command not found` | The CLI is not installed | `npm install -g @deepraxis/cli` |
+| `NOT_LOGGED_IN`, or 401 on a platform agent's machine | The machine credentials are missing | Run the command again. If it persists, tell the user the machine has no platform credentials. Do not run `praxis login` there. |
+| `UNSUPPORTED … services` (or queues and so on) | A binding the platform does not offer | Remove it from `wrangler.jsonc` and use D1, KV or R2 |
+| Health check failed after the deploy | The app throws on `/api/health`, usually a broken migration | Open the URL to read the error, fix the migration with a NEW migration file, deploy again; `praxis app rollback` meanwhile |
+| Sign-in answers 500 "SESSION_SECRET is not configured" | The secret was removed from `praxis.jsonc` | Put `"SESSION_SECRET": "generate"` back and deploy |
+| A build error about modules or `import.meta.url` | `vinext-plugins.ts` was changed or removed | Restore it from the template |

package/package.json

@@ -1,6 +1,14 @@
 {
   "name": "@deepraxis/app-template",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0-dev.61eb886",
+  "description": "The standard Praxis application template: vinext + D1 + R2 + end-user auth + admin area.",
+  "license": "Apache-2.0",
+  "files": [
+    "template",
+    "README.md",
+    "SKILL.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/template/README.md

@@ -0,0 +1,53 @@
+# Praxis app
+
+A Next.js App Router app (run by vinext on Cloudflare Workers) with end-user sign-up and sign-in,
+a D1 database, R2 image upload and an admin area. It deploys through the Praxis Application API only.
+
+## Stack
+
+- **vinext + Next.js 15 App Router**: ordinary `app/` pages and route handlers, built to a Worker.
+- **D1 + drizzle-orm**: queries are typed; schema is plain SQL migrations applied at runtime.
+- **R2**: image storage (binding `IMAGES`).
+- **Auth**: username + password (PBKDF2-SHA256 via WebCrypto), HttpOnly signed session cookie, sessions stored hashed in D1. The first user to register becomes `admin`.
+- **Tailwind CSS 3 + shadcn/ui-style primitives** in `components/ui/`.
+- **zod** for input validation.
+
+## Folder map
+
+```
+praxis.jsonc        project file: kind, name, secrets, healthcheck (read by `praxis app deploy`)
+wrangler.jsonc      bindings the app needs (read at build time; never used to deploy)
+app/                pages and route handlers (/, /login, /register, /account, /admin, /api/*, /images/*)
+lib/                server-only code and business rules
+  db.ts             getDb(): migrates once per isolate, returns the drizzle client
+  migrate.ts        runtime migrator   migrations.ts  bundled migration list   schema.ts  drizzle tables
+  auth.ts           password hashing, cookie signing, validation (no framework imports)
+  session.ts        session rows + cookie strings    users.ts  user rules (first user = admin)
+  guard.ts          getCurrentUser / requireUser / requireAdmin
+  storage.ts        image rules and R2/D1 access
+components/ui/      Button, Input, Label, Card
+migrations/         numbered SQL files
+```
+
+Keep business rules in `lib/`; pages and route handlers only call them.
+
+## Common changes
+
+- **Add a page**: create `app/<name>/page.tsx`. Call `await requireUser("/<name>")` or `requireAdmin` from `lib/guard.ts` to protect it.
+- **Add a table**: write `migrations/0002_<name>.sql` (idempotent: `CREATE TABLE IF NOT EXISTS`), import it with `?raw` and append it in `lib/migrations.ts`, then add the table to `lib/schema.ts`. It is applied on the first request after deploy.
+- **Add a binding**: declare it in `wrangler.jsonc` (supported: `d1_databases`, `kv_namespaces`, `r2_buckets`, `vars`), add its type to `env.d.ts`, read it with `import { env } from "cloudflare:workers"`. The platform creates worker-owned resources and ignores ids.
+- **Add a secret**: add it to `Cloudflare.Env` in `env.d.ts`, read `env.NAME`, and declare it in `praxis.jsonc` `secrets` (`"generate"` makes `praxis app deploy` create a random value once and keep it). To set your own value: `praxis api application worker secret put`. Secrets are never written in files. `SESSION_SECRET` is required: without it sign-in and sign-up return a 500 naming it.
+
+## Run
+
+- `bun install` then `bun run dev` for local development.
+- `bun run typecheck`, `bun test` (auth and migrator unit tests), `bun run build` (output in `dist/`).
+- `praxis app deploy` builds, uploads and deploys, then checks `healthcheck`. `praxis app rollback` returns to the previous version. Nothing here calls wrangler to deploy.
+
+## Not supported on the platform
+
+Service bindings, queues, Durable Objects, Workers AI, Analytics Engine. Use D1, KV, R2, plain/json/secret values and static assets.
+
+## Not included yet
+
+Rate limiting (comments in `app/api/auth/*/route.ts` mark where it goes), password reset, email verification.

package/template/_gitignore

@@ -0,0 +1,7 @@
+node_modules
+dist
+.wrangler
+.dev.vars
+.next
+next-env.d.ts
+bun.lock

package/template/app/account/page.tsx

@@ -0,0 +1,45 @@
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { getDb } from "@/lib/db";
+import { requireUser } from "@/lib/guard";
+import { listImages } from "@/lib/storage";
+
+export const dynamic = "force-dynamic";
+
+export default async function Account({ searchParams }: { searchParams: Promise<{ error?: string }> }) {
+  const user = await requireUser("/account");
+  const { error } = await searchParams;
+  const mine = await listImages(await getDb(), user.id);
+  return (
+    <div className="space-y-6">
+      <Card>
+        <CardHeader><CardTitle>{user.username}</CardTitle></CardHeader>
+        <CardContent className="text-sm">Role: {user.role}</CardContent>
+      </Card>
+      <Card>
+        <CardHeader><CardTitle>Upload an image</CardTitle></CardHeader>
+        <CardContent>
+          <form action="/api/images" method="post" encType="multipart/form-data" className="flex items-center gap-3">
+            <Input name="image" type="file" accept="image/jpeg,image/png,image/webp" required />
+            <Button type="submit">Upload</Button>
+          </form>
+          {error && <p role="alert" className="mt-2 text-sm text-red-600">{error}</p>}
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader><CardTitle>Your images ({mine.length})</CardTitle></CardHeader>
+        <CardContent>
+          <ul className="grid grid-cols-2 gap-3 sm:grid-cols-3">
+            {mine.map(img => (
+              <li key={img.id} className="text-xs">
+                <a href={`/images/${img.key}`}><img src={`/images/${img.key}`} alt="" className="h-32 w-full rounded-md border object-cover" /></a>
+                <span className="text-slate-500">{img.contentType} · {img.size} bytes</span>
+              </li>
+            ))}
+          </ul>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

package/template/app/admin/page.tsx

@@ -0,0 +1,49 @@
+import { count, desc } from "drizzle-orm";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { getDb } from "@/lib/db";
+import { requireAdmin } from "@/lib/guard";
+import { images, users } from "@/lib/schema";
+
+export const dynamic = "force-dynamic";
+
+export default async function Admin() {
+  await requireAdmin("/admin");
+  const db = await getDb();
+  const [allUsers, allImages, [userCount], [imageCount]] = await Promise.all([
+    db.select({ id: users.id, username: users.username, role: users.role, createdAt: users.createdAt }).from(users).orderBy(users.createdAt),
+    db.select().from(images).orderBy(desc(images.createdAt)),
+    db.select({ n: count() }).from(users),
+    db.select({ n: count() }).from(images),
+  ]);
+  const nameOf = new Map(allUsers.map(u => [u.id, u.username]));
+  return (
+    <div className="space-y-6">
+      <Card>
+        <CardHeader><CardTitle>Users ({userCount!.n})</CardTitle></CardHeader>
+        <CardContent>
+          <table className="w-full text-left text-sm">
+            <thead><tr><th>Username</th><th>Role</th><th>Created</th></tr></thead>
+            <tbody>
+              {allUsers.map(u => (
+                <tr key={u.id}><td>{u.username}</td><td>{u.role}</td><td>{new Date(u.createdAt).toISOString()}</td></tr>
+              ))}
+            </tbody>
+          </table>
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader><CardTitle>Images ({imageCount!.n})</CardTitle></CardHeader>
+        <CardContent>
+          <table className="w-full text-left text-sm">
+            <thead><tr><th>Owner</th><th>Key</th><th>Type</th><th>Size</th></tr></thead>
+            <tbody>
+              {allImages.map(i => (
+                <tr key={i.id}><td>{nameOf.get(i.ownerId) ?? i.ownerId}</td><td><a className="underline" href={`/images/${i.key}`}>{i.key}</a></td><td>{i.contentType}</td><td>{i.size}</td></tr>
+              ))}
+            </tbody>
+          </table>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

package/template/app/api/auth/login/route.ts

@@ -0,0 +1,30 @@
+import { env } from "cloudflare:workers";
+import { credentialsSchema, hashPassword, MissingSecretError, requireSecret, verifyPassword } from "@/lib/auth";
+import { getDb } from "@/lib/db";
+import { redirectResponse, safeNext } from "@/lib/guard";
+import { createSession, sessionCookie } from "@/lib/session";
+import { findUserByUsername } from "@/lib/users";
+
+// Rate limiting for sign-in (per IP and per username) would go here, before the password check.
+export async function POST(req: Request) {
+  try {
+    requireSecret(env.SESSION_SECRET);
+    const form = await req.formData();
+    const next = String(form.get("next") ?? "");
+    const fail = () => redirectResponse(`/login?error=${encodeURIComponent("Wrong username or password")}${next ? `&next=${encodeURIComponent(next)}` : ""}`);
+    const parsed = credentialsSchema.safeParse({ username: form.get("username"), password: form.get("password") });
+    if (!parsed.success) return fail();
+    const db = await getDb();
+    const user = await findUserByUsername(db, parsed.data.username);
+    if (!user) {
+      await hashPassword(parsed.data.password); // spend the same time as a real check
+      return fail();
+    }
+    if (!(await verifyPassword(parsed.data.password, user.passwordHash))) return fail();
+    const session = await createSession(db, user.id, env.SESSION_SECRET);
+    return redirectResponse(safeNext(next), sessionCookie(session.value, session.expiresAt));
+  } catch (e) {
+    if (e instanceof MissingSecretError) return new Response(e.message, { status: 500 });
+    throw e;
+  }
+}

package/template/app/api/auth/register/route.ts

@@ -0,0 +1,24 @@
+import { env } from "cloudflare:workers";
+import { credentialsSchema, hashPassword, MissingSecretError, requireSecret } from "@/lib/auth";
+import { getDb } from "@/lib/db";
+import { redirectResponse } from "@/lib/guard";
+import { createSession, sessionCookie } from "@/lib/session";
+import { createUser } from "@/lib/users";
+
+// Rate limiting for sign-up (per IP) would go here, before any hashing or database work.
+export async function POST(req: Request) {
+  try {
+    requireSecret(env.SESSION_SECRET); // fail before creating a user that could never sign in
+    const form = await req.formData();
+    const parsed = credentialsSchema.safeParse({ username: form.get("username"), password: form.get("password") });
+    if (!parsed.success) return redirectResponse(`/register?error=${encodeURIComponent(parsed.error.issues[0]!.message)}`);
+    const db = await getDb();
+    const created = await createUser(db, { username: parsed.data.username, passwordHash: await hashPassword(parsed.data.password) });
+    if (!created.ok) return redirectResponse(`/register?error=${encodeURIComponent("That username is taken")}`);
+    const session = await createSession(db, created.user.id, env.SESSION_SECRET);
+    return redirectResponse("/account", sessionCookie(session.value, session.expiresAt));
+  } catch (e) {
+    if (e instanceof MissingSecretError) return new Response(e.message, { status: 500 });
+    throw e;
+  }
+}

package/template/app/api/health/route.ts

@@ -0,0 +1,10 @@
+import { sql } from "drizzle-orm";
+import { getDb } from "@/lib/db";
+
+export const dynamic = "force-dynamic";
+
+export async function GET() {
+  const db = await getDb();
+  await db.run(sql`SELECT 1`);
+  return Response.json({ ok: true });
+}

package/template/app/api/images/route.ts

@@ -0,0 +1,15 @@
+import { env } from "cloudflare:workers";
+import { getDb } from "@/lib/db";
+import { getCurrentUser, redirectResponse } from "@/lib/guard";
+import { checkImage, saveImage } from "@/lib/storage";
+
+export async function POST(req: Request) {
+  const user = await getCurrentUser(req.headers.get("cookie"));
+  if (!user) return redirectResponse("/login?next=%2Faccount");
+  const file = (await req.formData()).get("image");
+  if (!(file instanceof File)) return redirectResponse(`/account?error=${encodeURIComponent("Choose an image to upload")}`);
+  const problem = checkImage(file);
+  if (problem) return redirectResponse(`/account?error=${encodeURIComponent(problem)}`);
+  await saveImage(await getDb(), env.IMAGES, user.id, file);
+  return redirectResponse("/account");
+}

package/template/app/globals.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/template/app/images/[...key]/route.ts

@@ -0,0 +1,20 @@
+import { env } from "cloudflare:workers";
+import { getDb } from "@/lib/db";
+import { getCurrentUser } from "@/lib/guard";
+import { findImage } from "@/lib/storage";
+
+export const dynamic = "force-dynamic";
+
+// Images are private: only the owner and admins can read them.
+export async function GET(req: Request, { params }: { params: Promise<{ key: string[] }> }) {
+  const user = await getCurrentUser(req.headers.get("cookie"));
+  if (!user) return new Response("Sign in first", { status: 401 });
+  const key = (await params).key.join("/");
+  const image = await findImage(await getDb(), key);
+  if (!image || (image.ownerId !== user.id && user.role !== "admin")) return new Response("Not found", { status: 404 });
+  const object = await env.IMAGES.get(key);
+  if (!object) return new Response("Not found", { status: 404 });
+  return new Response(object.body, {
+    headers: { "Content-Type": image.contentType, "Content-Length": String(image.size), "Cache-Control": "private, max-age=3600", "X-Content-Type-Options": "nosniff" },
+  });
+}

package/template/app/layout.tsx

@@ -0,0 +1,35 @@
+import "./globals.css";
+import Link from "next/link";
+import { getCurrentUser } from "@/lib/guard";
+
+export const metadata = { title: "Praxis App", description: "A Praxis application" };
+export const dynamic = "force-dynamic";
+
+export default async function RootLayout({ children }: { children: React.ReactNode }) {
+  const user = await getCurrentUser();
+  return (
+    <html lang="en">
+      <body className="min-h-screen bg-slate-50 text-slate-900 antialiased">
+        <header className="border-b border-slate-200 bg-white">
+          <nav className="mx-auto flex max-w-4xl items-center gap-4 px-4 py-3 text-sm">
+            <Link href="/" className="font-semibold">Praxis App</Link>
+            <span className="flex-1" />
+            {user ? (
+              <>
+                <Link href="/account">Account</Link>
+                {user.role === "admin" && <Link href="/admin">Admin</Link>}
+                <form action="/logout" method="post"><button className="text-slate-600 hover:underline">Sign out ({user.username})</button></form>
+              </>
+            ) : (
+              <>
+                <Link href="/login">Sign in</Link>
+                <Link href="/register">Sign up</Link>
+              </>
+            )}
+          </nav>
+        </header>
+        <main className="mx-auto max-w-4xl px-4 py-8">{children}</main>
+      </body>
+    </html>
+  );
+}

package/template/app/login/page.tsx

@@ -0,0 +1,26 @@
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+
+export const dynamic = "force-dynamic";
+
+export default async function Login({ searchParams }: { searchParams: Promise<{ error?: string; next?: string }> }) {
+  const { error, next } = await searchParams;
+  return (
+    <Card className="mx-auto max-w-sm">
+      <CardHeader><CardTitle>Sign in</CardTitle></CardHeader>
+      <CardContent>
+        <form action="/api/auth/login" method="post" className="space-y-4">
+          <input type="hidden" name="next" value={next ?? ""} />
+          <div className="space-y-1.5"><Label htmlFor="username">Username</Label><Input id="username" name="username" autoComplete="username" required /></div>
+          <div className="space-y-1.5"><Label htmlFor="password">Password</Label><Input id="password" name="password" type="password" autoComplete="current-password" required /></div>
+          {error && <p role="alert" className="text-sm text-red-600">{error}</p>}
+          <Button type="submit" className="w-full">Sign in</Button>
+        </form>
+        <p className="mt-4 text-sm"><Link className="underline" href="/register">Create an account</Link></p>
+      </CardContent>
+    </Card>
+  );
+}

package/template/app/logout/route.ts

@@ -0,0 +1,9 @@
+import { env } from "cloudflare:workers";
+import { getDb } from "@/lib/db";
+import { redirectResponse } from "@/lib/guard";
+import { clearedSessionCookie, destroySession } from "@/lib/session";
+
+export async function POST(req: Request) {
+  await destroySession(await getDb(), req.headers.get("cookie"), env.SESSION_SECRET);
+  return redirectResponse("/", clearedSessionCookie);
+}

package/template/app/page.tsx

@@ -0,0 +1,21 @@
+import Link from "next/link";
+import { getCurrentUser } from "@/lib/guard";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+
+export const dynamic = "force-dynamic";
+
+export default async function Home() {
+  const user = await getCurrentUser();
+  return (
+    <Card>
+      <CardHeader><CardTitle>Welcome</CardTitle></CardHeader>
+      <CardContent className="space-y-3 text-sm">
+        {user ? (
+          <p>Signed in as <strong>{user.username}</strong> ({user.role}). <Link className="underline" href="/account">Go to your account</Link>.</p>
+        ) : (
+          <p>You are not signed in. <Link className="underline" href="/login">Sign in</Link> or <Link className="underline" href="/register">create an account</Link>.</p>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

package/template/app/register/page.tsx

@@ -0,0 +1,25 @@
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+
+export const dynamic = "force-dynamic";
+
+export default async function Register({ searchParams }: { searchParams: Promise<{ error?: string }> }) {
+  const { error } = await searchParams;
+  return (
+    <Card className="mx-auto max-w-sm">
+      <CardHeader><CardTitle>Create account</CardTitle></CardHeader>
+      <CardContent>
+        <form action="/api/auth/register" method="post" className="space-y-4">
+          <div className="space-y-1.5"><Label htmlFor="username">Username</Label><Input id="username" name="username" autoComplete="username" required /></div>
+          <div className="space-y-1.5"><Label htmlFor="password">Password</Label><Input id="password" name="password" type="password" autoComplete="new-password" required /></div>
+          {error && <p role="alert" className="text-sm text-red-600">{error}</p>}
+          <Button type="submit" className="w-full">Create account</Button>
+        </form>
+        <p className="mt-4 text-sm"><Link className="underline" href="/login">Already have an account?</Link></p>
+      </CardContent>
+    </Card>
+  );
+}

package/template/components/ui/button.tsx

@@ -0,0 +1,24 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-400 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-slate-900 text-white hover:bg-slate-800",
+        outline: "border border-slate-300 bg-white hover:bg-slate-50",
+        ghost: "hover:bg-slate-100",
+      },
+      size: { default: "h-9 px-4 py-2", sm: "h-8 px-3" },
+    },
+    defaultVariants: { variant: "default", size: "default" },
+  },
+);
+
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {}
+
+export function Button({ className, variant, size, ...props }: ButtonProps) {
+  return <button className={cn(buttonVariants({ variant, size }), className)} {...props} />;
+}