@tenderprompt/accounts 0.2.0

package/templates/shopify-customer-account/apps/portal/scripts/portal-worker.mjs

@@ -0,0 +1,84 @@
+import { readFile } from "node:fs/promises";
+import { join } from "node:path";
+import { describePublicFiles } from "../../../scripts/artifact-contract.mjs";
+
+const CONTENT_TYPES = Object.freeze({
+  ".css": "text/css; charset=utf-8",
+  ".html": "text/html; charset=utf-8",
+  ".js": "text/javascript; charset=utf-8",
+  ".json": "application/json; charset=utf-8",
+  ".png": "image/png",
+  ".svg": "image/svg+xml",
+  ".webp": "image/webp",
+  ".woff": "font/woff",
+  ".woff2": "font/woff2",
+});
+
+export async function readPortalAssets(root) {
+  const files = await describePublicFiles(root);
+  return await Promise.all(files.map(async (file) => ({
+    path: file.path,
+    bytes: (await readFile(join(root, file.path))).toString("base64"),
+    contentType: contentTypeForPath(file.path),
+  })));
+}
+
+export function renderPortalWorker(assets) {
+  if (!Array.isArray(assets) || !assets.some((asset) => asset.path === "index.html")) {
+    throw new Error("The portal build is missing index.html.");
+  }
+  return `const assets = new Map(${JSON.stringify(assets.map((asset) => [asset.path, {
+    bytes: asset.bytes,
+    contentType: asset.contentType,
+  }]))});
+
+function decoded(value) {
+  const binary = atob(value);
+  return Uint8Array.from(binary, (character) => character.charCodeAt(0));
+}
+
+function selectedAsset(pathname) {
+  if (pathname === "/") return "index.html";
+  const direct = pathname.startsWith("/") ? pathname.slice(1) : pathname;
+  if (assets.has(direct)) return direct;
+  return pathname.slice(pathname.lastIndexOf("/") + 1).includes(".") ? null : "index.html";
+}
+
+function headersFor(path, asset) {
+  const headers = new Headers({
+    "content-type": asset.contentType,
+    "referrer-policy": "strict-origin-when-cross-origin",
+    "x-content-type-options": "nosniff",
+    "x-frame-options": "DENY",
+  });
+  if (path === "index.html") {
+    headers.set("cache-control", "no-cache");
+    headers.set("content-security-policy", "default-src 'self'; base-uri 'none'; connect-src 'self'; frame-ancestors 'none'; img-src 'self' data:; object-src 'none'; script-src 'self'; style-src 'self'");
+  } else if (path.startsWith("assets/")) {
+    headers.set("cache-control", "public, max-age=31536000, immutable");
+  }
+  return headers;
+}
+
+export default {
+  async fetch(request) {
+    const url = new URL(request.url);
+    if (url.pathname === "/api/health") {
+      if (request.method !== "GET" && request.method !== "HEAD") return new Response(null, { status: 405, headers: { allow: "GET, HEAD" } });
+      const response = Response.json({ ok: true, service: "portal-ui" }, { headers: { "cache-control": "no-store" } });
+      return request.method === "HEAD" ? new Response(null, { status: 200, headers: response.headers }) : response;
+    }
+    if (request.method !== "GET" && request.method !== "HEAD") return new Response(null, { status: 405, headers: { allow: "GET, HEAD" } });
+    const path = selectedAsset(url.pathname);
+    const asset = path === null ? undefined : assets.get(path);
+    if (!path || !asset) return new Response("Not found", { status: 404 });
+    return new Response(request.method === "HEAD" ? null : decoded(asset.bytes), { status: 200, headers: headersFor(path, asset) });
+  },
+};
+`;
+}
+
+export function contentTypeForPath(path) {
+  const match = /\.[a-z0-9]+$/iu.exec(path);
+  return CONTENT_TYPES[match?.[0]?.toLowerCase()] ?? "application/octet-stream";
+}

package/templates/shopify-customer-account/apps/portal/scripts/portal-worker.test.mjs

@@ -0,0 +1,14 @@
+import assert from "node:assert/strict";
+import { test } from "node:test";
+import { contentTypeForPath, renderPortalWorker } from "./portal-worker.mjs";
+
+test("renders an isolated portal worker with SPA fallback", () => {
+  const worker = renderPortalWorker([{ path: "index.html", bytes: "PGgxPk9rPC9oMT4=", contentType: "text/html; charset=utf-8" }]);
+  assert.match(worker, /frame-ancestors 'none'/u);
+  assert.match(worker, /selectedAsset/u);
+});
+
+test("uses safe content types", () => {
+  assert.equal(contentTypeForPath("assets/app.js"), "text/javascript; charset=utf-8");
+  assert.equal(contentTypeForPath("unknown.bin"), "application/octet-stream");
+});

package/templates/shopify-customer-account/apps/portal/src/App.tsx

@@ -0,0 +1,111 @@
+import { useEffect, useState } from "react";
+
+interface Bootstrap {
+  loginUrl: string | null;
+  localDevelopment?: boolean;
+}
+
+interface Session {
+  authenticated: boolean;
+  localDevelopment?: boolean;
+  customer?: {
+    id: string;
+    displayName: string;
+    emailAddress?: { emailAddress?: string | null } | null;
+  };
+}
+
+type AccountState =
+  | { status: "loading" }
+  | { status: "ready"; bootstrap: Bootstrap; session: Session }
+  | { status: "error" };
+
+export function App() {
+  const [state, setState] = useState<AccountState>({ status: "loading" });
+
+  useEffect(() => {
+    const controller = new AbortController();
+    void Promise.all([
+      fetchJson<Bootstrap>("/api/bootstrap", controller.signal),
+      fetchJson<Session>("/api/session", controller.signal),
+    ]).then(([bootstrap, session]) => setState({ status: "ready", bootstrap, session }))
+      .catch((error: unknown) => {
+        if (!(error instanceof DOMException && error.name === "AbortError")) setState({ status: "error" });
+      });
+    return () => controller.abort();
+  }, []);
+
+  const customer = state.status === "ready" && state.session.authenticated
+    ? state.session.customer
+    : undefined;
+  return (
+    <main className="shell">
+      <header className="masthead">
+        <a className="wordmark" href="/">__APP_NAME__</a>
+        <span className="edition">Customer account</span>
+      </header>
+
+      <section className="hero" aria-busy={state.status === "loading"}>
+        <p className="eyebrow">Your membership, clearly arranged</p>
+        <h1>{customer ? `Welcome back, ${customer.displayName}.` : "Everything yours, in one place."}</h1>
+        <p className="lede">
+          {customer
+            ? "Your account is securely connected to Shopify. Add merchant-specific features without moving customer identity out of its system of record."
+            : "Sign in securely with Shopify to see the details connected to this store."}
+        </p>
+
+        {state.status === "loading" && <p className="status">Opening your account…</p>}
+        {state.status === "error" && (
+          <div className="notice" role="alert">
+            <strong>We could not open the account.</strong>
+            <span>Refresh the page or try again in a moment.</span>
+          </div>
+        )}
+        {state.status === "ready" && !customer && (
+          <div className="actions">
+            {state.bootstrap.loginUrl
+              ? <a className="primary" href={state.bootstrap.loginUrl}>Sign in</a>
+              : <button className="primary" type="button" disabled>Sign in</button>}
+            {state.session.localDevelopment && (
+              <span className="hint">Real sign-in is available on an HTTPS Tender preview.</span>
+            )}
+          </div>
+        )}
+        {customer && (
+          <div className="actions">
+            <form action="/auth/logout" method="post"><button className="secondary" type="submit">Sign out</button></form>
+          </div>
+        )}
+      </section>
+
+      <section className="account-grid" aria-label="Account sections">
+        <article className="account-card feature">
+          <span className="index">01</span>
+          <div><h2>Profile</h2><p>{customer?.emailAddress?.emailAddress ?? "Available after sign-in"}</p></div>
+          <span className="arrow" aria-hidden="true">↗</span>
+        </article>
+        <article className="account-card">
+          <span className="index">02</span>
+          <div><h2>Orders</h2><p>Connect the Shopify order query your experience needs.</p></div>
+          <span className="arrow" aria-hidden="true">↗</span>
+        </article>
+        <article className="account-card">
+          <span className="index">03</span>
+          <div><h2>Membership</h2><p>Add your subscription provider as a replaceable integration.</p></div>
+          <span className="arrow" aria-hidden="true">↗</span>
+        </article>
+      </section>
+
+      <footer>
+        <span>Built for change.</span>
+        <span>Shopify remains the customer system of record.</span>
+      </footer>
+    </main>
+  );
+}
+
+async function fetchJson<T>(path: string, signal: AbortSignal): Promise<T> {
+  const response = await fetch(path, { signal, headers: { Accept: "application/json" } });
+  if (!response.ok) throw new Error(`${path} returned ${response.status}`);
+  return await response.json() as T;
+}

package/templates/shopify-customer-account/apps/portal/src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { App } from "./App";
+import "./styles.css";
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);

package/templates/shopify-customer-account/apps/portal/src/styles.css

@@ -0,0 +1,54 @@
+:root {
+  color: #18261f;
+  background: #ede8dd;
+  font-family: "Avenir Next", "Helvetica Neue", sans-serif;
+  font-synthesis: none;
+  --ink: #18261f;
+  --paper: #f7f3ea;
+  --accent: #ee6f3b;
+  --line: rgba(24, 38, 31, 0.22);
+}
+
+* { box-sizing: border-box; }
+body { margin: 0; min-width: 320px; min-height: 100vh; }
+button, a { font: inherit; }
+button:focus-visible, a:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
+
+.shell { min-height: 100vh; padding: 0 clamp(1.25rem, 4vw, 5rem); overflow: hidden; }
+.masthead { height: 5.5rem; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
+.wordmark { color: var(--ink); font-family: Georgia, serif; font-size: 1.25rem; font-weight: 700; text-decoration: none; }
+.edition, .eyebrow, .index { font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
+
+.hero { position: relative; max-width: 70rem; padding: clamp(4rem, 10vw, 8rem) 0 clamp(3rem, 7vw, 6rem); }
+.hero::before { content: ""; position: absolute; width: 19rem; height: 19rem; right: -5rem; top: 2rem; border-radius: 50%; border: 1px solid var(--line); box-shadow: inset 0 0 0 3rem rgba(247, 243, 234, .3); }
+.eyebrow { margin: 0 0 1.5rem; color: #526158; }
+h1 { position: relative; max-width: 13ch; margin: 0; font-family: Georgia, serif; font-size: clamp(3.5rem, 9vw, 8.5rem); font-weight: 400; letter-spacing: -.065em; line-height: .86; }
+.lede { max-width: 42rem; margin: 2.5rem 0 0; font-size: clamp(1rem, 1.6vw, 1.35rem); line-height: 1.65; }
+.actions { margin-top: 2.25rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
+.primary, .secondary { min-height: 3rem; padding: .8rem 1.5rem; border: 1px solid var(--ink); border-radius: 999px; font-weight: 800; cursor: pointer; }
+.primary { background: var(--ink); color: var(--paper); text-decoration: none; }
+.primary:disabled { opacity: .45; cursor: not-allowed; }
+.secondary { background: transparent; color: var(--ink); }
+.hint, .status { color: #59675f; font-size: .9rem; }
+.notice { margin-top: 2rem; padding: 1rem 1.25rem; border-left: 5px solid var(--accent); display: grid; gap: .3rem; background: var(--paper); }
+
+.account-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
+.account-card { min-height: 15rem; padding: 1.5rem; display: grid; grid-template-columns: auto 1fr auto; gap: 1.25rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(247, 243, 234, .45); transition: transform .25s ease, background .25s ease; }
+.account-card:hover { transform: translateY(-.4rem); background: var(--paper); }
+.account-card.feature { background: var(--accent); }
+.account-card h2 { margin: 0 0 .75rem; font-family: Georgia, serif; font-size: 2rem; font-weight: 400; }
+.account-card p { margin: 0; color: #425048; line-height: 1.5; }
+.feature p { color: var(--ink); }
+.arrow { align-self: end; font-size: 1.5rem; }
+footer { min-height: 6rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; color: #59675f; font-size: .78rem; }
+
+@media (max-width: 760px) {
+  .hero::before { width: 11rem; height: 11rem; opacity: .55; }
+  .account-grid { grid-template-columns: 1fr; }
+  .account-card { min-height: 10rem; }
+  footer { align-items: flex-start; flex-direction: column; justify-content: center; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
+}

package/templates/shopify-customer-account/apps/portal/tender-accounts.json

@@ -0,0 +1,10 @@
+{
+  "schema": "tender.accounts-cli/v1",
+  "commands": {
+    "dev": "npm run dev",
+    "check": "npm run check",
+    "package": "npm run pack:tender"
+  },
+  "artifactDirectory": ".tender/artifacts/current",
+  "returnPath": "/account"
+}

package/templates/shopify-customer-account/apps/portal/tender-app.config.json

@@ -0,0 +1,19 @@
+{
+  "schema": "tender.account-source/v1",
+  "app": {
+    "slug": "portal-ui",
+    "label": "__APP_NAME__ portal UI",
+    "fixture": false
+  },
+  "runtime": {
+    "kind": "worker",
+    "compatibilityDate": "2026-08-25",
+    "mainModule": "worker.mjs"
+  },
+  "health": {
+    "path": "/api/health"
+  },
+  "resources": [],
+  "services": [],
+  "publicVarNames": []
+}

package/templates/shopify-customer-account/apps/portal/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "noEmit": true,
+    "skipLibCheck": true,
+    "types": ["vite/client", "node"]
+  },
+  "include": ["src", "vite.config.ts"]
+}

package/templates/shopify-customer-account/apps/portal/vite.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+export default defineConfig({
+  plugins: [react()],
+  build: { outDir: "dist/client", emptyOutDir: true },
+});

package/templates/shopify-customer-account/apps/portal/worker-configuration.d.ts

@@ -0,0 +1,11 @@
+/* eslint-disable */
+// Generated by Wrangler by running `wrangler types --include-runtime=false` (hash: 6fa2de3ce59698635ff4232fc4f1d661)
+interface __BaseEnv_Env {
+}
+declare namespace Cloudflare {
+	interface GlobalProps {
+		mainModule: typeof import("./.tender/build/worker");
+	}
+	interface Env extends __BaseEnv_Env {}
+}
+interface Env extends __BaseEnv_Env {}

package/templates/shopify-customer-account/apps/portal/wrangler.jsonc

@@ -0,0 +1,22 @@
+{
+  "$schema": "../../node_modules/wrangler/config-schema.json",
+  "name": "__APP_SLUG__-portal",
+  "main": "./.tender/build/worker.mjs",
+  "workers_dev": false,
+  "preview_urls": false,
+  "compatibility_date": "2026-08-25",
+  "compatibility_flags": ["nodejs_compat"],
+  "build": {
+    "command": "npm run build --workspace __APP_SLUG__-portal",
+    "watch_dir": ["./src", "./index.html", "./scripts"]
+  },
+  "dev": {
+    "ip": "127.0.0.1",
+    "port": 8788,
+    "local_protocol": "http"
+  },
+  "observability": {
+    "enabled": true,
+    "head_sampling_rate": 1
+  }
+}

package/templates/shopify-customer-account/dot.dev.vars.example

@@ -0,0 +1,3 @@
+# Short-lived, revocable developer credential for the linked Tender projects.
+# This is CLI-only and is never retained in an application artifact.
+TENDER_ACCOUNTS_TOKEN=

package/templates/shopify-customer-account/dot.gitignore

@@ -0,0 +1,9 @@
+node_modules/
+dist/
+.tender/
+.wrangler/
+.dev.vars
+.dev.vars.*
+!.dev.vars.example
+*.log
+.DS_Store

package/templates/shopify-customer-account/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "__APP_SLUG__",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "workspaces": [
+    "apps/*"
+  ],
+  "scripts": {
+    "build": "npm run build --workspace __APP_SLUG__-portal && npm run build --workspace __APP_SLUG__-gateway",
+    "check": "npm run check --workspace __APP_SLUG__-portal && npm run check --workspace __APP_SLUG__-gateway",
+    "cf:types": "npm run cf:types --workspace __APP_SLUG__-portal && npm run cf:types --workspace __APP_SLUG__-gateway",
+    "dev": "npm run db:migrate:local --workspace __APP_SLUG__-gateway && wrangler dev -c apps/gateway/wrangler.jsonc -c apps/portal/wrangler.jsonc",
+    "dev:gateway": "npm run dev --workspace __APP_SLUG__-gateway",
+    "dev:portal": "npm run dev --workspace __APP_SLUG__-portal",
+    "test": "npm run test --workspace __APP_SLUG__-portal && npm run test --workspace __APP_SLUG__-gateway",
+    "typecheck": "npm run typecheck --workspace __APP_SLUG__-portal && npm run typecheck --workspace __APP_SLUG__-gateway"
+  },
+  "engines": {
+    "node": ">=22.0.0"
+  }
+}

package/templates/shopify-customer-account/scripts/artifact-contract.mjs

@@ -0,0 +1,109 @@
+import { createHash } from "node:crypto";
+import { readdir, readFile } from "node:fs/promises";
+import { join, relative, sep } from "node:path";
+
+const PUBLIC_VAR_NAME = /^[A-Z][A-Z0-9_]{2,63}$/;
+const LOGICAL_BINDING_NAME = /^[A-Z][A-Z0-9_]{2,63}$/;
+const RESOURCE_TYPES = new Set(["d1", "kv", "r2", "queue", "workflow", "durable_object"]);
+const SQL_OBJECT_NAME = /^[a-z][a-z0-9_]{1,127}$/;
+
+export function sha256(value) {
+  return createHash("sha256").update(value).digest("hex");
+}
+
+export function bundleDigest(module, files, databaseSchema) {
+  return sha256(JSON.stringify({ module, files, databaseSchema }));
+}
+
+export async function describePublicFiles(root) {
+  const paths = await walk(root);
+  const descriptors = [];
+  for (const absolutePath of paths) {
+    const path = relative(root, absolutePath).split(sep).join("/");
+    if (!isSafeArtifactPath(path)) throw new Error("Unsafe artifact path: " + path);
+    const bytes = await readFile(absolutePath);
+    descriptors.push({ path, sha256: sha256(bytes), bytes: bytes.byteLength });
+  }
+  return descriptors.sort((left, right) => left.path.localeCompare(right.path));
+}
+
+export function exactPublicVars(candidate, requiredNames, optionalNames = []) {
+  const result = {};
+  for (const name of [...requiredNames].sort()) {
+    const value = candidate[name];
+    if (!PUBLIC_VAR_NAME.test(name) || name.startsWith("TENDER_") || typeof value !== "string" || !value) {
+      throw new Error("Missing or invalid required public var: " + name);
+    }
+    result[name] = value;
+  }
+  for (const name of [...optionalNames].sort()) {
+    const value = candidate[name];
+    if (!PUBLIC_VAR_NAME.test(name) || name.startsWith("TENDER_") || requiredNames.includes(name)) {
+      throw new Error("Invalid optional public var: " + name);
+    }
+    if (value === undefined || value === "") continue;
+    if (typeof value !== "string") throw new Error("Invalid optional public var: " + name);
+    result[name] = value;
+  }
+  return result;
+}
+
+export function exactResourceRequests(candidate) {
+  if (!Array.isArray(candidate) || candidate.length > 24) throw new Error("Invalid resource declarations.");
+  const names = new Set();
+  return candidate.map((resource) => {
+    if (!resource || Object.keys(resource).sort().join(",") !== "name,type"
+        || !RESOURCE_TYPES.has(resource.type) || !LOGICAL_BINDING_NAME.test(resource.name)
+        || names.has(resource.name)) {
+      throw new Error("Invalid resource declaration.");
+    }
+    names.add(resource.name);
+    return { type: resource.type, name: resource.name };
+  });
+}
+
+export function exactDatabaseSchema(candidate) {
+  if (!candidate || candidate.schema !== "tender.d1-schema/v1"
+      || !Array.isArray(candidate.statements) || !Array.isArray(candidate.objects)
+      || candidate.statements.length !== candidate.objects.length) {
+    throw new Error("Invalid D1 schema contract.");
+  }
+  const statements = candidate.statements.map((statement) => {
+    if (typeof statement !== "string" || statement.includes(";")
+        || !/^CREATE (?:TABLE|INDEX) IF NOT EXISTS [a-z][a-z0-9_]*\b/.test(statement)) {
+      throw new Error("Invalid D1 schema statement.");
+    }
+    return statement;
+  });
+  const names = new Set();
+  const objects = candidate.objects.map((object, statementIndex) => {
+    if (!object || !SQL_OBJECT_NAME.test(object.name) || !SQL_OBJECT_NAME.test(object.tableName)
+        || (object.type !== "table" && object.type !== "index")
+        || object.statementIndex !== statementIndex || names.has(object.name)) {
+      throw new Error("Invalid D1 schema object.");
+    }
+    names.add(object.name);
+    return { type: object.type, name: object.name, tableName: object.tableName, statementIndex };
+  });
+  return { schema: "tender.d1-schema/v1", statements, objects };
+}
+
+function isSafeArtifactPath(value) {
+  return Boolean(value) && value.length <= 512 && !value.startsWith("/") && !value.includes("\\")
+    && !value.includes("%") && value.split("/").every((segment) => (
+      segment !== "." && segment !== ".." && /^[A-Za-z0-9][A-Za-z0-9._-]*$/.test(segment)
+    ));
+}
+
+async function walk(root) {
+  const entries = await readdir(root, { withFileTypes: true });
+  const files = [];
+  for (const entry of entries.sort((left, right) => left.name.localeCompare(right.name))) {
+    const path = join(root, entry.name);
+    if (entry.isSymbolicLink()) throw new Error("Artifact symlinks are not allowed: " + path);
+    if (entry.isDirectory()) files.push(...await walk(path));
+    else if (entry.isFile()) files.push(path);
+    else throw new Error("Unsupported artifact entry: " + path);
+  }
+  return files;
+}