tina4-nodejs 3.13.141 → 3.13.143

package/packages/core/src/errorOverlay.ts

@@ -34,6 +34,7 @@ file, You can obtain one at https://mozilla.org/MPL/2.0/.
 import { readFileSync, statSync } from "node:fs";
 import { resolve } from "node:path";
 import { isTruthy } from "./dotenv.js";
+import { currentCspNonce } from "./csp.js";
 
 // OVERLAY-DEC-03: cap the rendered frames so a deep/recursive stack yields a bounded
 // page, not one source-file read per frame.
@@ -124,18 +125,16 @@ function formatSourceBlock(filename: string, lineno: number): string {
   if (lines.length === 0) return "";
 
   const rows = lines.map(([num, text, isError]) => {
-    const bg = isError ? `background:${ERROR_LINE_BG};` : "";
+    const rowClass = isError ? "eo-line eo-line-err" : "eo-line";
     const marker = isError ? "▶" : " ";
-    return `<div style="${bg}display:flex;padding:1px 0;">`
-      + `<span style="color:${YELLOW};min-width:3.5em;text-align:right;padding-right:1em;user-select:none;">${num}</span>`
-      + `<span style="color:${RED};width:1.2em;user-select:none;">${marker}</span>`
-      + `<span style="color:${TEXT};white-space:pre-wrap;tab-size:4;">${esc(text)}</span>`
+    return `<div class="${rowClass}">`
+      + `<span class="eo-ln">${num}</span>`
+      + `<span class="eo-marker">${marker}</span>`
+      + `<span class="eo-code">${esc(text)}</span>`
       + `</div>`;
   }).join("\n");
 
-  return `<div style="background:${SURFACE};border-radius:6px;padding:12px;overflow-x:auto;`
-    + `font-family:'SF Mono','Fira Code','Consolas',monospace;font-size:13px;line-height:1.6;">`
-    + rows + `</div>`;
+  return `<div class="eo-source">` + rows + `</div>`;
 }
 
 /**
@@ -162,21 +161,20 @@ function formatFrame(frame: StackFrame, capturedAt = 0): string {
         const mtimeIso = `${String(d.getUTCHours()).padStart(2, "0")}:`
           + `${String(d.getUTCMinutes()).padStart(2, "0")}:`
           + `${String(d.getUTCSeconds()).padStart(2, "0")}`;
-        staleBadge = ` <span style="background:${PEACH};color:${BG};padding:1px 8px;`
-          + `border-radius:3px;font-size:11px;font-weight:700;margin-left:6px;">`
+        staleBadge = ` <span class="eo-stale">`
           + `FILE MODIFIED @ ${mtimeIso} UTC &mdash; source may not match what failed</span>`;
       }
     } catch {
       // best-effort — ignore missing files / permission errors
     }
   }
-  return `<div style="margin-bottom:16px;">`
-    + `<div style="margin-bottom:4px;">`
-    + `<span style="color:${BLUE};">${esc(frame.file)}</span>`
-    + `<span style="color:${SUBTEXT};"> : </span>`
-    + `<span style="color:${YELLOW};">${frame.line}</span>`
-    + `<span style="color:${SUBTEXT};"> in </span>`
-    + `<span style="color:${GREEN};">${esc(frame.func)}</span>`
+  return `<div class="eo-frame">`
+    + `<div class="eo-frame-head">`
+    + `<span class="eo-file">${esc(frame.file)}</span>`
+    + `<span class="eo-sep"> : </span>`
+    + `<span class="eo-lineno">${frame.line}</span>`
+    + `<span class="eo-sep"> in </span>`
+    + `<span class="eo-fn">${esc(frame.func)}</span>`
     + staleBadge
     + `</div>`
     + source
@@ -185,22 +183,21 @@ function formatFrame(frame: StackFrame, capturedAt = 0): string {
 
 function collapsible(title: string, content: string, openByDefault = false): string {
   const open = openByDefault ? " open" : "";
-  return `<details style="margin-top:16px;"${open}>`
-    + `<summary style="cursor:pointer;color:${LAVENDER};font-weight:600;font-size:15px;`
-    + `padding:8px 0;user-select:none;">${esc(title)}</summary>`
-    + `<div style="padding:8px 0;">${content}</div>`
+  return `<details class="eo-details"${open}>`
+    + `<summary class="eo-summary">${esc(title)}</summary>`
+    + `<div class="eo-details-body">${content}</div>`
     + `</details>`;
 }
 
 function table(pairs: Array<[string, string]>): string {
-  if (pairs.length === 0) return `<span style="color:${SUBTEXT};">None</span>`;
+  if (pairs.length === 0) return `<span class="eo-none">None</span>`;
   const rows = pairs.map(([key, val]) =>
     `<tr>`
-    + `<td style="color:${PEACH};padding:4px 16px 4px 0;vertical-align:top;white-space:nowrap;">${esc(key)}</td>`
-    + `<td style="color:${TEXT};padding:4px 0;word-break:break-all;">${esc(val)}</td>`
+    + `<td class="eo-key">${esc(key)}</td>`
+    + `<td class="eo-val">${esc(val)}</td>`
     + `</tr>`
   ).join("");
-  return `<table style="border-collapse:collapse;width:100%;">${rows}</table>`;
+  return `<table class="eo-table">${rows}</table>`;
 }
 
 /**
@@ -232,7 +229,7 @@ export function renderErrorOverlay(error: Error, request?: any): string {
   }
   const hidden = frames.length - Math.min(frames.length, MAX_FRAMES);
   if (hidden > 0) {
-    framesHtml += `<div style="color:${SUBTEXT};padding:8px 0;font-size:13px;">`
+    framesHtml += `<div class="eo-hidden-frames">`
       + `&#8230; ${hidden} more stack frames hidden (truncated at ${MAX_FRAMES})</div>`;
   }
 
@@ -277,31 +274,34 @@ export function renderErrorOverlay(error: Error, request?: any): string {
   const envSection = collapsible("Environment", table(envPairs));
   const stackSection = collapsible("Stack Trace", framesHtml, true);
 
+  // The overlay runs under the strict default CSP: one nonce'd <style> carries
+  // every rule, and the body uses classes only — no style= attribute, because a
+  // nonce covers a <style> ELEMENT but never a style attribute (ADR-0088).
+  const nonce = currentCspNonce();
   return `<!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <title>Tina4 Error — ${esc(excType)}</title>
-<style>
-*{margin:0;padding:0;box-sizing:border-box;}
-body{background:${BG};color:${TEXT};font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;padding:24px;line-height:1.5;}
+<style nonce="${nonce}">
+${overlayStylesheet()}
 </style>
 </head>
 <body>
-<div style="max-width:960px;margin:0 auto;">
-  <div style="margin-bottom:24px;">
-    <div style="display:flex;align-items:center;gap:12px;margin-bottom:12px;">
-      <span style="background:${RED};color:${BG};padding:4px 12px;border-radius:4px;font-weight:700;font-size:13px;text-transform:uppercase;">Error</span>
-      <span style="color:${SUBTEXT};font-size:14px;">Tina4 Debug Overlay</span>
+<div class="eo-wrap">
+  <div class="eo-header">
+    <div class="eo-badge-row">
+      <span class="eo-badge">Error</span>
+      <span class="eo-sub">Tina4 Debug Overlay</span>
     </div>
-    <h1 style="color:${RED};font-size:28px;font-weight:700;margin-bottom:8px;">${esc(excType)}</h1>
-    <p style="color:${TEXT};font-size:18px;font-family:'SF Mono','Fira Code','Consolas',monospace;background:${SURFACE};padding:12px 16px;border-radius:6px;border-left:4px solid ${RED};">${esc(excMsg)}</p>
+    <h1 class="eo-type">${esc(excType)}</h1>
+    <p class="eo-msg">${esc(excMsg)}</p>
   </div>
   ${stackSection}
   ${requestSection}
   ${envSection}
-  <div style="margin-top:32px;padding-top:16px;border-top:1px solid ${OVERLAY};color:${SUBTEXT};font-size:12px;">
+  <div class="eo-footer">
     Tina4 Debug Overlay &mdash; This page is only shown in debug mode. Set TINA4_DEBUG=false in production.
   </div>
 </div>
@@ -309,6 +309,49 @@ body{background:${BG};color:${TEXT};font-family:-apple-system,BlinkMacSystemFont
 </html>`;
 }
 
+/**
+ * The overlay's full stylesheet, served inside one nonce'd <style> block.
+ *
+ * Keeping the rules here (not on the elements) is what makes the overlay
+ * CSP-clean: no framework page emits a style="..." attribute, because a nonce
+ * covers a <style> ELEMENT but never a style attribute (ADR-0088).
+ */
+function overlayStylesheet(): string {
+  return `
+*{margin:0;padding:0;box-sizing:border-box;}
+body{background:${BG};color:${TEXT};font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;padding:24px;line-height:1.5;}
+.eo-wrap{max-width:960px;margin:0 auto;}
+.eo-header{margin-bottom:24px;}
+.eo-badge-row{display:flex;align-items:center;gap:12px;margin-bottom:12px;}
+.eo-badge{background:${RED};color:${BG};padding:4px 12px;border-radius:4px;font-weight:700;font-size:13px;text-transform:uppercase;}
+.eo-sub{color:${SUBTEXT};font-size:14px;}
+.eo-type{color:${RED};font-size:28px;font-weight:700;margin-bottom:8px;}
+.eo-msg{color:${TEXT};font-size:18px;font-family:'SF Mono','Fira Code','Consolas',monospace;background:${SURFACE};padding:12px 16px;border-radius:6px;border-left:4px solid ${RED};}
+.eo-footer{margin-top:32px;padding-top:16px;border-top:1px solid ${OVERLAY};color:${SUBTEXT};font-size:12px;}
+.eo-source{background:${SURFACE};border-radius:6px;padding:12px;overflow-x:auto;font-family:'SF Mono','Fira Code','Consolas',monospace;font-size:13px;line-height:1.6;}
+.eo-line{display:flex;padding:1px 0;}
+.eo-line-err{background:${ERROR_LINE_BG};}
+.eo-ln{color:${YELLOW};min-width:3.5em;text-align:right;padding-right:1em;user-select:none;}
+.eo-marker{color:${RED};width:1.2em;user-select:none;}
+.eo-code{color:${TEXT};white-space:pre-wrap;tab-size:4;}
+.eo-frame{margin-bottom:16px;}
+.eo-frame-head{margin-bottom:4px;}
+.eo-file{color:${BLUE};}
+.eo-sep{color:${SUBTEXT};}
+.eo-lineno{color:${YELLOW};}
+.eo-fn{color:${GREEN};}
+.eo-stale{background:${PEACH};color:${BG};padding:1px 8px;border-radius:3px;font-size:11px;font-weight:700;margin-left:6px;}
+.eo-details{margin-top:16px;}
+.eo-summary{cursor:pointer;color:${LAVENDER};font-weight:600;font-size:15px;padding:8px 0;user-select:none;}
+.eo-details-body{padding:8px 0;}
+.eo-table{border-collapse:collapse;width:100%;}
+.eo-key{color:${PEACH};padding:4px 16px 4px 0;vertical-align:top;white-space:nowrap;}
+.eo-val{color:${TEXT};padding:4px 0;word-break:break-all;}
+.eo-none{color:${SUBTEXT};}
+.eo-hidden-frames{color:${SUBTEXT};padding:8px 0;font-size:13px;}
+`;
+}
+
 /**
  * Check if TINA4_DEBUG is enabled.
  */

package/packages/core/src/etag.ts

@@ -0,0 +1,24 @@
+/*
+Copyright (c) 2026 Code Infinity
+SPDX-License-Identifier: MPL-2.0
+This Source Code Form is subject to the terms of the Mozilla Public
+License, v. 2.0. If a copy of the MPL was not distributed with this
+file, You can obtain one at https://mozilla.org/MPL/2.0/.
+*/
+
+/**
+ * Does an `If-None-Match` header match the response ETag?
+ *
+ * The header may be `*`, a single tag, or a comma-separated list; the `W/`
+ * weak prefix is stripped on both sides before comparing (RFC 7232 §2.3.2
+ * weak comparison). Shared by the static file server and the compression
+ * interceptor so both answer 304 the same way.
+ */
+export function etagMatches(ifNoneMatch: string, etag: string): boolean {
+  const strip = (tag: string) => tag.trim().replace(/^W\//, "");
+  const target = strip(etag);
+  return ifNoneMatch.split(",").some((candidate) => {
+    const trimmed = candidate.trim();
+    return trimmed === "*" || strip(trimmed) === target;
+  });
+}

package/packages/core/src/feedback.ts

@@ -36,6 +36,7 @@ import { fileURLToPath } from "node:url";
 
 import { authenticateRequest } from "./auth.js";
 import { supervisorBaseUrl } from "./devAdmin.js";
+import { relayUpstreamResponse } from "./upstreamResponse.js";
 import type { RouteHandler, Tina4Request } from "./types.js";
 import type { Router } from "./router.js";
 
@@ -221,17 +222,7 @@ export const handleFeedbackTurn: RouteHandler = async (req, res) => {
   }
   clearTimeout(timer);
 
-  const raw = await upstream.text();
-  const status = upstream.status || 200;
-  try {
-    res.json(JSON.parse(raw), status);
-  } catch {
-    res.raw.writeHead(status, {
-      "Content-Type":
-        upstream.headers.get("content-type") ?? "text/plain; charset=utf-8",
-    });
-    res.raw.end(raw);
-  }
+  await relayUpstreamResponse(res, upstream);
 };
 
 // Widget bundle lives at packages/core/src/__feedback/widget.js so that

package/packages/core/src/index.ts

@@ -114,6 +114,16 @@ export { WSDLService, WSDLOperation } from "./wsdl.js";
 export type { WSDLOperationMeta } from "./wsdl.js";
 export { HtmlElement, htmlElement, addHtmlHelpers, Raw, SafeString } from "./htmlElement.js";
 export { renderErrorOverlay, isDebugMode } from "./errorOverlay.js";
+export {
+  cspNonce,
+  currentCspNonce,
+  generateNonce,
+  injectNonceIntoCsp,
+  resolveCspHeader,
+  runWithCspNonce,
+  setCurrentNonce,
+  clearCurrentNonce,
+} from "./csp.js";
 export { AI_TOOLS, isInstalled, showMenu, installSelected, installAll, generateContext } from "./ai.js";
 export type { AiTool } from "./ai.js";
 export { Sso, SSO, SsoError } from "./sso.js";

package/packages/core/src/middleware.ts

@@ -13,6 +13,7 @@ import { Log } from "./logger.js";
 import { isTruthy } from "./dotenv.js";
 import { defaultRouter, type Router } from "./router.js";
 import { resolveClientIp } from "./trustedProxy.js";
+import { currentCspNonce, resolveCspHeader } from "./csp.js";
 import { getFrond, getFrameworkFrond, wantsJson, negotiatedErrorBody } from "./response.js";
 
 /**
@@ -951,12 +952,18 @@ export class SecurityHeadersMiddleware {
    * overrides, WITHOUT Strict-Transport-Security, which depends on the
    * request's scheme. Also what a transport rejection carries (ADR-0068
    * section 4), written before the scheme is known.
+   *
+   * Content-Security-Policy always carries a per-response nonce in style-src
+   * AND script-src (ADR-0088), read from the request async-context (minted on
+   * first access), so the framework's own inline content runs under the strict
+   * default without 'unsafe-inline'. The nonce is random per response, so a
+   * caller comparing this header must assert its STRUCTURE, never a byte string.
    */
   static canonicalHeaders(): Record<string, string> {
     return {
       "X-Frame-Options": process.env.TINA4_FRAME_OPTIONS ?? "SAMEORIGIN",
       "X-Content-Type-Options": "nosniff",
-      "Content-Security-Policy": process.env.TINA4_CSP ?? "default-src 'self'",
+      "Content-Security-Policy": resolveCspHeader(currentCspNonce()),
       "Referrer-Policy": process.env.TINA4_REFERRER_POLICY ?? "strict-origin-when-cross-origin",
       "X-XSS-Protection": "0",
       "Permissions-Policy": process.env.TINA4_PERMISSIONS_POLICY ?? "camera=(), microphone=(), geolocation=()",
@@ -985,6 +992,10 @@ export class SecurityHeadersMiddleware {
     if (process.env.TINA4_CSP === undefined) {
       SecurityHeadersMiddleware.warnCspDefaultOnce();
     }
+    // Content-Security-Policy carries a per-response nonce in style-src AND
+    // script-src (ADR-0088), already resolved in canonical, so the framework's
+    // own inline <style>/<script> (and user templates using the Frond
+    // csp_nonce() global) run under the strict policy without 'unsafe-inline'.
     for (const name of ["Content-Security-Policy", "Referrer-Policy", "X-XSS-Protection", "Permissions-Policy"]) {
       res.header(name, canonical[name]);
     }
@@ -1012,11 +1023,14 @@ export class SecurityHeadersMiddleware {
     SecurityHeadersMiddleware.cspDefaultWarned = true;
     const message =
       "TINA4_CSP is not set, so Tina4 is serving the default Content-Security-Policy " +
-      "\"default-src 'self'\" on every response. That default blocks runtime-injected " +
-      "inline styles, cross-origin fonts/scripts/CDNs, data: URIs, and cross-origin " +
-      "WebSocket/XHR (e.g. a separate API or LiveKit host). If your app uses any of " +
-      "these, set TINA4_CSP to a policy that allows them (see https://tina4.com); to " +
-      "silence this notice without changing behaviour, set TINA4_CSP=\"default-src 'self'\".";
+      "\"default-src 'self'\" on every response. The framework injects a per-response " +
+      "nonce into style-src and script-src, so its own inline <style>/<script> (and " +
+      "your templates using the csp_nonce() Frond global) work under this policy. The " +
+      "default still blocks cross-origin fonts/scripts/CDNs, data: URIs, and " +
+      "cross-origin WebSocket/XHR (e.g. a separate API or LiveKit host). If your app " +
+      "uses any of these, set TINA4_CSP to a policy that allows them (see " +
+      "https://tina4.com); to silence this notice without changing behaviour, set " +
+      "TINA4_CSP=\"default-src 'self'\".";
     try {
       Log.warning(message);
     } catch {

package/packages/core/src/response.ts

@@ -11,6 +11,7 @@ import fs from "node:fs";
 import nodePath from "node:path";
 import { once } from "node:events";
 import type { Tina4Response, CookieOptions } from "./types.js";
+import { currentCspNonce } from "./csp.js";
 
 /**
  * Best-effort close of a streaming source on client disconnect or a mid-stream
@@ -93,7 +94,8 @@ export async function getFrond(): Promise<InstanceType<any>> {
   const dir = _defaultTemplatesDir ?? nodePath.resolve(process.cwd(), "src/templates");
   let engine = _frondCache.get(dir);
   if (!engine) {
-    const { Frond } = await import("../../frond/src/engine.js");
+    const { Frond, setCspNonceProvider } = await import("../../frond/src/engine.js");
+    setCspNonceProvider(currentCspNonce);
     engine = new Frond(dir);
     _frondCache.set(dir, engine);
   }
@@ -109,7 +111,8 @@ export async function getFrameworkFrond(): Promise<InstanceType<any> | null> {
   const frameworkDir = nodePath.resolve(nodePath.dirname(import.meta.url.replace("file://", "")), "..", "templates");
   if (!_frameworkFrond && fs.existsSync(frameworkDir)) {
     try {
-      const { Frond } = await import("../../frond/src/engine.js");
+      const { Frond, setCspNonceProvider } = await import("../../frond/src/engine.js");
+      setCspNonceProvider(currentCspNonce);
       _frameworkFrond = new Frond(frameworkDir);
     } catch { return null; }
   }
@@ -262,6 +265,13 @@ export function createResponse(res: ServerResponse): Tina4Response {
   // ── Attach the underlying ServerResponse ──
   response.raw = res;
 
+  // ── Per-response CSP nonce (ADR-0088) ──
+  // Read the request-scoped nonce (csp.ts), minting one on first access. Inside
+  // a request this is the SAME value runDispatch() established and the security
+  // middleware names in the Content-Security-Policy header, so a route emitting
+  // an inline block as `<script nonce="${res.cspNonce}">` stays CSP-clean.
+  response.cspNonce = currentCspNonce();
+
   // ── Explicit methods ──
 
   response.json = function (data: unknown, status?: number): Tina4Response {
@@ -450,7 +460,8 @@ export function createResponse(res: ServerResponse): Tina4Response {
     templateDir?: string,
   ): Promise<Tina4Response> {
     try {
-      const { Frond } = await import("../../frond/src/engine.js");
+      const { Frond, setCspNonceProvider } = await import("../../frond/src/engine.js");
+      setCspNonceProvider(currentCspNonce);
       const dir = templateDir ?? _defaultTemplatesDir ?? nodePath.resolve(process.cwd(), "src/templates");
       let engine = _frondCache.get(dir);
       if (!engine) {

package/packages/core/src/server.ts

@@ -42,6 +42,7 @@ import { MiddlewareChain, MiddlewareRunner, cors, requestLogger, isMiddlewareCla
 import { tryServeStatic } from "./static.js";
 import { loadEnv, isTruthy } from "./dotenv.js";
 import { isDebugMode } from "./errorOverlay.js";
+import { generateNonce, runWithCspNonce, currentCspNonce } from "./csp.js";
 import { createHealthRoutes } from "./health.js";
 import { rateLimiter } from "./rateLimiter.js";
 import { Log } from "./logger.js";
@@ -493,7 +494,8 @@ async function renderErrorPage(
   templatesDir: string,
 ): Promise<string | null> {
   try {
-    const { Frond } = await import("../../frond/src/engine.js");
+    const { Frond, setCspNonceProvider } = await import("../../frond/src/engine.js");
+    setCspNonceProvider(currentCspNonce);
     const templateFile = `errors/${code}.twig`;
 
     // Helper: get-or-create a cached Frond instance for a directory
@@ -706,6 +708,10 @@ export function resolveTemplate(pathname: string, templatesDir: string): string
 
 function renderLandingPage(port: number = 7148): string {
   const version = TINA4_VERSION;
+  // The framework's welcome page runs under the strict default CSP. Every inline
+  // <style>/<script> below carries this response's nonce (ADR-0088); there are no
+  // style= or onclick= attributes (a nonce covers an element, never an attribute).
+  const nonce = currentCspNonce();
 
   const galleryItems = [
     { id: "rest-api", icon: "&#128640;", name: "REST API", desc: "A simple JSON API with GET and POST endpoints", accent: "accent-blue", tryUrl: "/api/gallery/hello" },
@@ -729,7 +735,7 @@ function renderLandingPage(port: number = 7148): string {
       : "";
     const deployBtn = isDeployed
       ? `<span class="gbtn gbtn-deployed">Deployed</span>`
-      : `<button class="gbtn gbtn-deploy" onclick="deployGallery('${item.id}')">Deploy</button>`;
+      : `<button class="gbtn gbtn-deploy" data-deploy="${item.id}">Deploy</button>`;
     return `<div class="gallery-card">
             <div class="accent ${item.accent}"></div>
             <div class="icon">${item.icon}</div>
@@ -745,7 +751,7 @@ function renderLandingPage(port: number = 7148): string {
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Tina4NodeJs</title>
-<style>
+<style nonce="${nonce}">
 *{margin:0;padding:0;box-sizing:border-box}
 body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:#0f172a;color:#e2e8f0;min-height:100vh;display:flex;flex-direction:column;align-items:center;position:relative}
 .bg-watermark{position:fixed;bottom:-5%;right:-5%;width:45%;opacity:0.04;pointer-events:none;z-index:0}
@@ -784,6 +790,11 @@ h1{font-size:3rem;font-weight:700;margin-bottom:0.25rem;letter-spacing:-1px}
 .gbtn-deployed{background:transparent;border:1px solid #22c55e;color:#22c55e;cursor:default;font-size:0.7rem}
 @keyframes wiggle{0%{transform:rotate(0deg)}15%{transform:rotate(14deg)}30%{transform:rotate(-10deg)}45%{transform:rotate(8deg)}60%{transform:rotate(-4deg)}75%{transform:rotate(2deg)}100%{transform:rotate(0deg)}}
 .star-wiggle{display:inline-block;transform-origin:center}
+.gallery-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem}
+.tok-comment{color:#64748b}
+.tok-kw{color:#c084fc}
+.tok-str{color:#4ade80}
+.tok-fn{color:#38bdf8}
 </style>
 </head>
 <body>
@@ -809,23 +820,23 @@ h1{font-size:3rem;font-weight:700;margin-bottom:0.25rem;letter-spacing:-1px}
 <div class="section">
     <div class="card">
         <h2>Getting Started</h2>
-        <pre class="code-block"><code><span style="color:#64748b">// app.ts</span>
-<span style="color:#c084fc">import</span> { startServer, Router } <span style="color:#c084fc">from</span> <span style="color:#4ade80">"tina4-nodejs"</span>;
+        <pre class="code-block"><code><span class="tok-comment">// app.ts</span>
+<span class="tok-kw">import</span> { startServer, Router } <span class="tok-kw">from</span> <span class="tok-str">"tina4-nodejs"</span>;
 
-Router.get(<span style="color:#4ade80">"/hello"</span>, <span style="color:#c084fc">async</span> (<span style="color:#38bdf8">req</span>, <span style="color:#38bdf8">res</span>) =&gt; {
-    <span style="color:#c084fc">return</span> res.json({ message: <span style="color:#4ade80">"Hello World!"</span> });
+Router.get(<span class="tok-str">"/hello"</span>, <span class="tok-kw">async</span> (<span class="tok-fn">req</span>, <span class="tok-fn">res</span>) =&gt; {
+    <span class="tok-kw">return</span> res.json({ message: <span class="tok-str">"Hello World!"</span> });
 });
 
-startServer({ port: 7148 });  <span style="color:#64748b">// starts on port 7148</span></code></pre>
+startServer({ port: 7148 });  <span class="tok-comment">// starts on port 7148</span></code></pre>
     </div>
 </div>
 <div class="gallery">
     <h2 id="gallery">What You Can Build</h2>
-    <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem;">
+    <div class="gallery-cards">
         ${galleryCards}
     </div>
 </div>
-<script>
+<script nonce="${nonce}">
 function deployGallery(name) {
     if (!confirm('Deploy the "' + name + '" gallery example into your project? This will copy files into src/.')) return;
     fetch('/__dev/api/gallery/deploy', {
@@ -860,6 +871,12 @@ function deployGallery(name) {
     }
     setTimeout(doWiggle,3000);
 })();
+// CSP-clean wiring: no inline onclick handlers — bind every Deploy button from
+// its data-deploy attribute (a nonce covers script elements, not event-handler
+// attributes).
+document.querySelectorAll('.gbtn-deploy[data-deploy]').forEach(function(btn){
+    btn.addEventListener('click', function(){ deployGallery(btn.dataset.deploy); });
+});
 </script>
 </body>
 </html>`;
@@ -1685,7 +1702,8 @@ export async function buildDispatchContext(router: Router, base?: string): Promi
 
   let frondEngine: DispatchContext["frondEngine"] = null;
   try {
-    const { Frond } = await import("../../frond/src/engine.js");
+    const { Frond, setCspNonceProvider } = await import("../../frond/src/engine.js");
+    setCspNonceProvider(currentCspNonce);
     frondEngine = new Frond(templatesDir);
   } catch {
     // Frond not available — template-route fallback stays inert, same guard startServer() uses.
@@ -1891,7 +1909,14 @@ export async function runDispatch(
   // requests interleaving on the one event loop never read each other's id.
   const requestId = Log.sanitizeRequestId(rawReq.headers["x-request-id"]) ?? randomBytes(4).toString("hex");
   if (!rawRes.headersSent) rawRes.setHeader("x-request-id", requestId);
-  return Log.runWithRequestId(requestId, () => dispatchInner(ctx, rawReq, rawRes, requestId));
+  // One CSP nonce per request (ADR-0088), established in the SAME async scope as
+  // the request id so the inline HTML body, the Frond csp_nonce() global, and the
+  // security middleware's Content-Security-Policy header all name one value - and
+  // two requests interleaving on the one event loop never share it.
+  const requestNonce = generateNonce();
+  return Log.runWithRequestId(requestId, () =>
+    runWithCspNonce(requestNonce, () => dispatchInner(ctx, rawReq, rawRes, requestId)),
+  );
 }
 
 /**
@@ -2128,7 +2153,8 @@ export async function startServer(config?: Tina4Config): Promise<{
   let frondEngine: any = null;
   setDefaultTemplatesDir(templatesDir);
   try {
-    const { Frond } = await import("../../frond/src/engine.js");
+    const { Frond, setCspNonceProvider } = await import("../../frond/src/engine.js");
+    setCspNonceProvider(currentCspNonce);
     frondEngine = new Frond(templatesDir);
 
     // Always-on Frond {% live %} refresh endpoint. Re-renders a server-rendered
@@ -2367,10 +2393,21 @@ export async function startServer(config?: Tina4Config): Promise<{
         });
 
         aiServer.on("error", (err: any) => {
-          if (err.code === "EADDRINUSE") {
+          // The auxiliary AI/test port is a debug convenience, never
+          // load-bearing: ANY bind failure must degrade to no-aux-port, logged
+          // LOUD, never silent. The old handler logged only EADDRINUSE and
+          // silently swallowed every other code (EADDRNOTAVAIL, EACCES, ...),
+          // leaving `aiServer` a dangling non-listening object. The 'error'
+          // listener's presence already stops Node throwing, so the main server
+          // never crashes; this just makes the degrade visible and resets the
+          // handle on every failure. (The synchronous ERR_SOCKET_BAD_PORT for
+          // an out-of-range derived port is handled separately by aiPortInRange.)
+          if (err?.code === "EADDRINUSE") {
             Log.warning(`Test port ${testPort} in use — skipping`);
-            aiServer = null;
+          } else {
+            Log.error(`Test port ${testPort} bind failed (${err?.code ?? err}) — skipping`);
           }
+          aiServer = null;
         });
 
         aiServer.listen(testPort, host);