tina4ruby 3.13.141 → 3.13.143

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0aa7d16e6192a9b815d104ed73e28d9dcfc0059017c8980cd2fa6593f23f3c95
-  data.tar.gz: c9eb3c6c4141f58c7539fc65ad1d7596dca9602968b1094d6c6a3b236492aa6b
+  metadata.gz: 641d95c3ab74eeac0ce2b273ee7c6c44ca8aaab5e7e2a06d8e668eacffc5fb28
+  data.tar.gz: f8ad58627e7263bf560b499dc40fbd249d3267516d61b2c31696051f80b11852
 SHA512:
-  metadata.gz: 11b4e161b6412ca687ff1022e1575336f5aeb6b17c54ee72d05db86d045cba8b5e4e5aa52c126fe7f761a234fcfec5215b8cd8a4ae5284c5738f84a4dea91b13
-  data.tar.gz: b80d9c080a764c3ecd5912f6a7081e61f5196e1f751a86a52da62612f46223bea3148c203dbc549846ba916aadda20c831a1310472179dcd3f888da016624323
+  metadata.gz: 2354cb021a1136116236d2a94f6c5be38331823eda3e4ea4b37483ac395e3324af69b8a88d55e856039fe1951bb74be6e4918505bcbd6f6b70075f9b2ef0f232
+  data.tar.gz: f3c5de4a797f61db477db42c3a46e0f47dd132e7e2522b05d6127ee6c6d84b631215808fcb88953467308291a9754b39811f1ab8604f02fca93921b39b2ea67b

data/CHANGELOG.md

@@ -6,6 +6,28 @@ number means the same thing everywhere.
 **The authoritative release notes for every shipped version live in the documentation:**
 https://tina4.com/ruby/36-releases
 
+## 3.13.143 — 2026-10-01
+
+A fresh project's own styling now loads under the strict default Content-Security-Policy. The framework serves `default-src 'self'`, which a browser enforces by refusing every inline `<style>` and `<script>` -- so a new project rendered unstyled with its scripts blocked. The framework now mints one nonce per response, injects it into the `style-src` and `script-src` directives, and stamps it on every inline block it emits, de-inlining the `style=` and `on*=` attributes it used to rely on; a template that needs an inline block stamps `csp_nonce()` on it (ADR-0088, #96). A session's expiry now slides on activity: a read-only request that touched a stored session re-writes the merged record to move the deadline forward, so a request in flight next to a logout no longer loses the wrong state (ADR-0087, #94). Internally, the serve-debug readiness probe is identity-guarded so a foreign server on a reused ephemeral port can no longer be mistaken for the child under test -- a continuous-integration flake fix with no runtime change (#95). The framework still has no required runtime dependencies.
+
+## 3.13.142 — 2026-09-30
+
+A release led by real fixes for anyone on WebSockets, sessions, or the gallery queue, then a round of internal tidying and a new metrics gate that holds the line on complexity. The framework still carries no required runtime dependencies.
+
+### Fixes
+- WebSocket now delivers a fragmented message whole. A client that splits a payload across continuation frames (RFC 6455 §5.4) used to have each fragment handed over on its own, so the handler saw pieces instead of the message. The frames are reassembled and delivered once, complete (#87).
+- `session.regenerate` mid-request re-emits the session cookie, so a login that rotates the id keeps the browser in step instead of dropping it on the next request. Parity with the same fix in the php framework (tina4-php#253) (#90).
+- The gallery queue reads a bounded batch instead of draining without limit, and the NATS backplane keeper stops busy-polling and blocks for work instead. Less wheel-spinning, the same behaviour (#89).
+- A flaky serve-debug spec now polls `/__dev` for real readiness and retries a transient boot, so the suite stops tripping over its own startup timing (#91).
+
+### Refactors
+- Cyclomatic complexity comes down across the flagged modules, and all six cross-file duplicate blocks in `lib/tina4` are gone, each one characterised first so the behaviour cannot shift (#86, #88).
+
+### Chore
+- `TINA4_TEST_NATS_URL` joins the canonical test-env set (ADR-0038), so the NATS URL is named the same way everywhere.
+- The nats-pure dependency and its transitive gems were licence-reviewed, unblocking the release-package workflow.
+- CI wires the `tina4 metrics --fail-on-regression` ratchet gate with a committed baseline (ADR-0002), so a new complexity offender fails the build instead of drifting in unseen (#92).
+
 ## 3.13.141 — 2026-09-29
 
 A hardening release. The sibling php framework shipped committed absolute symlinks that broke `composer install` on Windows, so every framework now refuses a committed symlink up front. Ruby carries no such link today, so this guard is preventive parity: it keeps the door shut before anything can wander in. The framework still carries no required runtime dependencies.

data/lib/tina4/cli.rb

@@ -2749,7 +2749,11 @@ module Tina4
           {% extends "base.twig" %}
           {% block title %}Login{% endblock %}
           {% block content %}
-          <div class="container mt-4" style="max-width:400px">
+          {# No inline style attribute: a nonce lets this style block run under the
+             strict default Content-Security-Policy. csp_nonce() is a built-in
+             Frond global that returns this response's nonce. #}
+          <style nonce="{{ csp_nonce() }}">.auth-form{max-width:400px;margin:0 auto}</style>
+          <div class="container mt-4 auth-form">
               <h1>Login</h1>
               <form method="post" action="/api/auth/login">
                   {{ form_token() }}
@@ -2777,7 +2781,8 @@ module Tina4
           {% extends "base.twig" %}
           {% block title %}Register{% endblock %}
           {% block content %}
-          <div class="container mt-4" style="max-width:400px">
+          <style nonce="{{ csp_nonce() }}">.auth-form{max-width:400px;margin:0 auto}</style>
+          <div class="container mt-4 auth-form">
               <h1>Register</h1>
               <form method="post" action="/api/auth/register">
                   {{ form_token() }}

data/lib/tina4/crud.rb

@@ -126,8 +126,8 @@ module Tina4
           end
           if editable
             html += "<td>"
-            html += "<button class=\"btn btn-sm btn-primary me-1\" onclick=\"crudSave('#{table_name}', '#{pk_value}')\">Save</button>"
-            html += "<button class=\"btn btn-sm btn-danger\" onclick=\"crudDelete('#{table_name}', '#{pk_value}')\">Delete</button>"
+            html += "<button class=\"btn btn-sm btn-primary me-1\" data-crud-inline=\"save\" data-table=\"#{h(table_name)}\" data-id=\"#{h(pk_value)}\">Save</button>"
+            html += "<button class=\"btn btn-sm btn-danger\" data-crud-inline=\"delete\" data-table=\"#{h(table_name)}\" data-id=\"#{h(pk_value)}\">Delete</button>"
             html += "</td>"
           end
           html += "</tr>"
@@ -407,14 +407,12 @@ module Tina4
         }
       end
 
-      # Escape HTML special characters
+      # Escape HTML special characters. Delegates to the framework's one
+      # canonical escaper (Frond.escape_html, single-pass, byte-identical
+      # & < > " ' -> &amp; &lt; &gt; &quot; &#39;) so CRUD and the error
+      # overlay never carry their own private copy of the HTML escape table.
       def h(text)
-        text.to_s
-          .gsub("&", "&amp;")
-          .gsub("<", "&lt;")
-          .gsub(">", "&gt;")
-          .gsub('"', "&quot;")
-          .gsub("'", "&#39;")
+        Tina4::Frond.escape_html(text)
       end
 
       # Pretty label from a column name: "user_name" => "User Name"
@@ -459,7 +457,7 @@ module Tina4
           <meta name="viewport" content="width=device-width, initial-scale=1.0">
           <title>#{h(title)}</title>
           <link rel="stylesheet" href="/css/tina4.min.css">
-          <style>
+          <style nonce="#{Tina4::Csp.current_nonce}">
           .crud-container { max-width: 1200px; margin: 2rem auto; padding: 0 1rem; }
           .crud-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
           .crud-search { max-width: 300px; }
@@ -493,7 +491,7 @@ module Tina4
                     class="form-control crud-search">
                   <button type="submit" class="btn btn-secondary">Search</button>
                 </form>
-                <button class="btn btn-primary" onclick="crudShowCreate()">+ New</button>
+                <button class="btn btn-primary" data-crud-action="create">+ New</button>
               </div>
             </div>
             <div class="crud-info">
@@ -528,8 +526,8 @@ module Tina4
               html += "<td>#{h(value)}</td>"
             end
             html += "<td>"
-            html += "<button class=\"btn btn-sm btn-primary me-1\" onclick=\"crudShowEdit(#{pk_value.is_a?(String) ? "'#{h(pk_value)}'" : pk_value})\">Edit</button>"
-            html += "<button class=\"btn btn-sm btn-danger\" onclick=\"crudShowDelete(#{pk_value.is_a?(String) ? "'#{h(pk_value)}'" : pk_value})\">Delete</button>"
+            html += "<button class=\"btn btn-sm btn-primary me-1\" data-crud-action=\"edit\" data-id=\"#{h(pk_value)}\">Edit</button>"
+            html += "<button class=\"btn btn-sm btn-danger\" data-crud-action=\"delete\" data-id=\"#{h(pk_value)}\">Delete</button>"
             html += "</td></tr>"
           end
         end
@@ -569,8 +567,8 @@ module Tina4
               <p>Are you sure you want to delete this record? This action cannot be undone.</p>
               <input type="hidden" id="delete-pk-value">
               <div class="modal-footer">
-                <button class="btn btn-secondary" onclick="crudCloseModal('delete')">Cancel</button>
-                <button class="btn btn-danger" onclick="crudConfirmDelete()">Delete</button>
+                <button class="btn btn-secondary" data-crud-action="close" data-crud-modal="delete">Cancel</button>
+                <button class="btn btn-danger" data-crud-action="confirm-delete">Delete</button>
               </div>
             </div>
           </div>
@@ -588,7 +586,7 @@ module Tina4
         html = "<div class=\"modal-overlay\" id=\"modal-#{id}\">"
         html += "<div class=\"modal-box\">"
         html += "<h3>#{h(title)}</h3>"
-        html += "<form id=\"form-#{id}\" onsubmit=\"return false;\">"
+        html += "<form id=\"form-#{id}\" data-crud-form=\"1\">"
         html += "<input type=\"hidden\" id=\"#{id}-pk-value\" name=\"#{pk}\">" if edit
 
         columns.each do |col|
@@ -601,8 +599,8 @@ module Tina4
         end
 
         html += "<div class=\"modal-footer\">"
-        html += "<button type=\"button\" class=\"btn btn-secondary\" onclick=\"crudCloseModal('#{id}')\">Cancel</button>"
-        html += "<button type=\"button\" class=\"btn btn-primary\" onclick=\"crudSave#{edit ? 'Edit' : 'Create'}()\">Save</button>"
+        html += "<button type=\"button\" class=\"btn btn-secondary\" data-crud-action=\"close\" data-crud-modal=\"#{h(id)}\">Cancel</button>"
+        html += "<button type=\"button\" class=\"btn btn-primary\" data-crud-action=\"save\" data-crud-mode=\"#{edit ? 'edit' : 'create'}\">Save</button>"
         html += "</div></form></div></div>"
         html
       end
@@ -611,7 +609,7 @@ module Tina4
       def build_crud_javascript(api_path, pk, columns, request_path)
         columns_json = JSON.generate(columns.map(&:to_s))
         <<~HTML
-          <script>
+          <script nonce="#{Tina4::Csp.current_nonce}">
           var CRUD_API = '#{api_path}';
           var CRUD_PK = '#{pk}';
           var CRUD_COLUMNS = #{columns_json};
@@ -710,6 +708,37 @@ module Tina4
             .catch(function(e) { crudShowAlert('Failed to delete: ' + e, 'danger'); });
           }
 
+          // Replaces the modal forms' inline submit handler (a CSP-blocked on*=
+          // attribute): they post over fetch(), so stop the native submit here.
+          document.addEventListener('submit', function (event) {
+            if (event.target.closest('form[data-crud-form]')) {
+              event.preventDefault();
+            }
+          });
+
+          // CSP-clean action wiring: a nonce authorises this <script> element
+          // but never an inline on*= attribute, so every button carries
+          // data-crud-action and binds through one delegated listener.
+          document.addEventListener('click', function (event) {
+            var button = event.target.closest('[data-crud-action]');
+            if (!button) return;
+            var action = button.dataset.crudAction;
+            if (action === 'create') {
+              crudShowCreate();
+            } else if (action === 'edit') {
+              crudShowEdit(button.dataset.id);
+            } else if (action === 'delete') {
+              crudShowDelete(button.dataset.id);
+            } else if (action === 'close') {
+              crudCloseModal(button.dataset.crudModal);
+            } else if (action === 'confirm-delete') {
+              crudConfirmDelete();
+            } else if (action === 'save') {
+              if (button.dataset.crudMode === 'edit') { crudSaveEdit(); }
+              else { crudSaveCreate(); }
+            }
+          });
+
           // Close modal on overlay click
           document.querySelectorAll('.modal-overlay').forEach(function(overlay) {
             overlay.addEventListener('click', function(e) {
@@ -731,7 +760,7 @@ module Tina4
 
       def inline_crud_javascript(table_name)
         <<~JS
-          <script>
+          <script nonce="#{Tina4::Csp.current_nonce}">
           function crudSave(table, id) {
             const row = document.querySelector(`tr[data-id="${id}"]`);
             const cells = row.querySelectorAll('td[data-field]');
@@ -750,6 +779,18 @@ module Tina4
               .then(d => { document.querySelector(`tr[data-id="${id}"]`).remove(); })
               .catch(e => alert('Error: ' + e));
           }
+          // CSP-clean wiring: a nonce authorises this <script> element but never
+          // an inline on*= attribute, so the Save/Delete buttons carry
+          // data-crud-inline + data-* and bind through one delegated listener.
+          document.addEventListener('click', function (event) {
+            var button = event.target.closest('[data-crud-inline]');
+            if (!button) return;
+            if (button.dataset.crudInline === 'save') {
+              crudSave(button.dataset.table, button.dataset.id);
+            } else if (button.dataset.crudInline === 'delete') {
+              crudDelete(button.dataset.table, button.dataset.id);
+            }
+          });
           </script>
         JS
       end

data/lib/tina4/csp.rb

@@ -0,0 +1,119 @@
+# frozen_string_literal: true
+# 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/.
+
+require "securerandom"
+
+module Tina4
+  # Per-response Content-Security-Policy nonce (ADR-0088).
+  #
+  # The framework serves a strict default CSP (`default-src 'self'`). A browser
+  # refuses every inline `<style>` and `<script>` under that policy unless the
+  # element carries a nonce that the `Content-Security-Policy` header also names.
+  # So the framework mints one cryptographically-random nonce per response, stamps
+  # it on every inline `<style>`/`<script>` it emits, and injects the matching
+  # `'nonce-<X>'` into the `style-src` and `script-src` directives of the CSP
+  # header. The same value reaches user templates through the Frond global
+  # `csp_nonce()`.
+  #
+  # The nonce lives in a thread-local, so each request (one Puma worker thread)
+  # gets its own value and concurrent requests never see each other's.
+  # `RackApp#call` sets a fresh nonce at the start of every request and clears it
+  # in `ensure`, exactly as it does the request id. Whoever touches the nonce
+  # first in a request — the body emitter rendering inline content, or the
+  # security middleware building the header — gets the same value, because
+  # {current_nonce} generates one on first access and caches it on the thread for
+  # the rest of the request.
+  module Csp
+    THREAD_KEY = :tina4_csp_nonce
+
+    module_function
+
+    # Return a fresh cryptographically-random nonce (128 bits, base64).
+    # SecureRandom.base64 is stdlib (no `base64` gem), encodes 16 random bytes.
+    def generate_nonce
+      SecureRandom.base64(16)
+    end
+
+    # Set the nonce for the current request (thread) context.
+    def set_current_nonce(value)
+      Thread.current[THREAD_KEY] = value
+    end
+
+    # Clear the nonce at the end of a request (mirrors Log.clear_request_id).
+    def clear_current_nonce
+      Thread.current[THREAD_KEY] = nil
+    end
+
+    # Return the current request's nonce, minting one on first access.
+    #
+    # Generate-on-first-access makes the value independent of ordering: whether
+    # the inline body or the CSP header is built first, both read the same nonce.
+    def current_nonce
+      value = Thread.current[THREAD_KEY]
+      if value.nil? || value.empty?
+        value = generate_nonce
+        Thread.current[THREAD_KEY] = value
+      end
+      value
+    end
+
+    # Frond / template global: the current response's CSP nonce.
+    #
+    #   <style nonce="{{ csp_nonce() }}"> ... </style>
+    #   <script nonce="{{ csp_nonce() }}"> ... </script>
+    def csp_nonce
+      current_nonce
+    end
+
+    # Return +csp+ with `'nonce-<nonce>'` present in style-src AND script-src.
+    #
+    # For the default `default-src 'self'` this yields
+    # `default-src 'self'; style-src 'self' 'nonce-X'; script-src 'self' 'nonce-X'`.
+    # When a directive is absent it is derived from `default-src` (falling back to
+    # `'self'`) so the framework's own nonce'd content always works; when present
+    # the nonce is appended (idempotently). Every other directive is kept, in order.
+    def inject_nonce_into_csp(csp, nonce)
+      token = "'nonce-#{nonce}'"
+      directives = []
+      csp.to_s.split(";").each do |part|
+        part = part.strip
+        next if part.empty?
+
+        bits = part.split(/\s+/, 2)
+        name = bits[0].downcase
+        value = bits.length > 1 ? bits[1].strip : ""
+        directives << [name, value]
+      end
+
+      default_pair = directives.find { |name, _| name == "default-src" }
+      default_value = default_pair ? default_pair[1] : "'self'"
+
+      %w[style-src script-src].each do |directive|
+        existing = directives.find { |name, _| name == directive }
+        if existing
+          existing[1] = "#{existing[1]} #{token}".strip unless existing[1].split(/\s+/).include?(token)
+        else
+          base = default_value.empty? ? "'self'" : default_value
+          directives << [directive, "#{base} #{token}".strip]
+        end
+      end
+
+      directives.map { |name, value| value.empty? ? name : "#{name} #{value}" }.join("; ")
+    end
+
+    # Build the CSP header value for +nonce+ from the environment.
+    #
+    # Honours TINA4_CSP (default `default-src 'self'`) and always injects the
+    # nonce into style-src and script-src. A blank TINA4_CSP is treated as the
+    # default policy (the empty-string / unset behaviour is unchanged elsewhere).
+    def resolve_csp_header(nonce)
+      csp = ENV["TINA4_CSP"]
+      csp = "default-src 'self'" if csp.nil? || csp.empty?
+      inject_nonce_into_csp(csp, nonce)
+    end
+  end
+end

data/lib/tina4/error_overlay.rb

@@ -86,7 +86,7 @@ module Tina4
         end
         hidden = backtrace.length - [backtrace.length, MAX_FRAMES].min
         if hidden.positive?
-          frames_html << "<div style=\"color:#{SUBTEXT};padding:8px 0;font-size:13px;\">" \
+          frames_html << "<div class=\"eo-hidden-frames\">" \
             "&#8230; #{hidden} more stack frames hidden (truncated at #{MAX_FRAMES})</div>"
         end
 
@@ -121,6 +121,10 @@ module Tina4
         env_section = collapsible("Environment", table(env_pairs))
         stack_section = collapsible("Stack Trace", frames_html, open_by_default: true)
 
+        # ADR-0088: one nonce'd <style> holds the whole overlay stylesheet; no
+        # element carries a style= attribute, because a nonce covers a <style>
+        # ELEMENT but never a style attribute. The value matches the CSP header.
+        nonce = Tina4::Csp.current_nonce
         <<~HTML
           <!DOCTYPE html>
           <html lang="en">
@@ -128,25 +132,24 @@ module Tina4
           <meta charset="utf-8">
           <meta name="viewport" content="width=device-width,initial-scale=1">
           <title>Tina4 Error — #{esc(exc_type)}</title>
-          <style>
-          *{margin:0;padding:0;box-sizing:border-box;}
-          body{background:#{BG};color:#{TEXT_COLOR};font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;padding:24px;line-height:1.5;}
+          <style nonce="#{nonce}">
+          #{overlay_stylesheet}
           </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(exc_type)}</h1>
-              <p style="color:#{TEXT_COLOR};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(exc_msg)}</p>
+              <h1 class="eo-type">#{esc(exc_type)}</h1>
+              <p class="eo-msg">#{esc(exc_msg)}</p>
             </div>
             #{stack_section}
             #{request_section}
             #{env_section}
-            <div style="margin-top:32px;padding-top:16px;border-top:1px solid #{OVERLAY_COLOR};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>
@@ -155,6 +158,45 @@ module Tina4
         HTML
       end
 
+      # 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.
+      def overlay_stylesheet
+        <<~CSS
+          *{margin:0;padding:0;box-sizing:border-box;}
+          body{background:#{BG};color:#{TEXT_COLOR};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_COLOR};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};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_COLOR};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_COLOR};padding:4px 0;word-break:break-all;}
+          .eo-none{color:#{SUBTEXT};}
+          .eo-hidden-frames{color:#{SUBTEXT};padding:8px 0;font-size:13px;}
+        CSS
+      end
+
       # Return true if TINA4_DEBUG is enabled.
       def is_debug_mode
         Tina4::Env.is_truthy(ENV.fetch("TINA4_DEBUG", ""))
@@ -169,13 +211,11 @@ module Tina4
         key.to_s.match?(SENSITIVE_KEY_RE) ? REDACTED : value
       end
 
+      # Delegates to the framework's one canonical escaper (Frond.escape_html,
+      # single-pass, byte-identical & < > " ' -> &amp; &lt; &gt; &quot; &#39;)
+      # rather than keeping a private copy of the escape table here.
       def esc(text)
-        text.to_s
-            .gsub("&", "&amp;")
-            .gsub("<", "&lt;")
-            .gsub(">", "&gt;")
-            .gsub('"', "&quot;")
-            .gsub("'", "&#39;")
+        Tina4::Frond.escape_html(text)
       end
 
       def parse_backtrace_line(line)
@@ -207,30 +247,28 @@ module Tina4
         return "" if lines.empty?
 
         rows = lines.map do |num, text, is_error|
-          bg = is_error ? "background:#{ERROR_LINE_BG};" : ""
+          row_class = is_error ? "eo-line eo-line-err" : "eo-line"
           marker = is_error ? "&#x25b6;" : " "
-          "<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_COLOR};white-space:pre-wrap;tab-size:4;\">#{esc(text)}</span>" \
+          "<div class=\"#{row_class}\">" \
+            "<span class=\"eo-ln\">#{num}</span>" \
+            "<span class=\"eo-marker\">#{marker}</span>" \
+            "<span class=\"eo-code\">#{esc(text)}</span>" \
             "</div>"
         end.join("\n")
 
-        "<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>"
+        "<div class=\"eo-source\">#{rows}</div>"
       end
 
       def format_frame(filename, lineno, func_name, captured_at: 0.0)
         source = (filename && lineno.positive?) ? format_source_block(filename, lineno) : ""
         stale_badge = stale_file_badge(filename, captured_at)
-        "<div style=\"margin-bottom:16px;\">" \
-          "<div style=\"margin-bottom:4px;\">" \
-          "<span style=\"color:#{BLUE};\">#{esc(filename.to_s)}</span>" \
-          "<span style=\"color:#{SUBTEXT};\"> : </span>" \
-          "<span style=\"color:#{YELLOW};\">#{lineno}</span>" \
-          "<span style=\"color:#{SUBTEXT};\"> in </span>" \
-          "<span style=\"color:#{GREEN};\">#{esc(func_name.to_s)}</span>" \
+        "<div class=\"eo-frame\">" \
+          "<div class=\"eo-frame-head\">" \
+          "<span class=\"eo-file\">#{esc(filename.to_s)}</span>" \
+          "<span class=\"eo-sep\"> : </span>" \
+          "<span class=\"eo-lineno\">#{lineno}</span>" \
+          "<span class=\"eo-sep\"> in </span>" \
+          "<span class=\"eo-fn\">#{esc(func_name.to_s)}</span>" \
           "#{stale_badge}" \
           "</div>" \
           "#{source}" \
@@ -249,8 +287,7 @@ module Tina4
         return "" if mtime <= captured_at + 0.5
 
         mtime_str = Time.at(mtime).utc.strftime("%H:%M:%S")
-        "<span style=\"background:#{PEACH};color:#{BG};padding:1px 8px;" \
-          "border-radius:3px;font-size:11px;font-weight:700;margin-left:6px;\">" \
+        "<span class=\"eo-stale\">" \
           "FILE MODIFIED @ #{mtime_str} UTC &mdash; source may not match what failed" \
           "</span>"
       rescue StandardError
@@ -259,23 +296,22 @@ module Tina4
 
       def collapsible(title, content, open_by_default: false)
         open_attr = open_by_default ? " open" : ""
-        "<details style=\"margin-top:16px;\"#{open_attr}>" \
-          "<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>" \
+        "<details class=\"eo-details\"#{open_attr}>" \
+          "<summary class=\"eo-summary\">#{esc(title)}</summary>" \
+          "<div class=\"eo-details-body\">#{content}</div>" \
           "</details>"
       end
 
       def table(pairs)
-        return "<span style=\"color:#{SUBTEXT};\">None</span>" if pairs.empty?
+        return "<span class=\"eo-none\">None</span>" if pairs.empty?
 
         rows = pairs.map do |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_COLOR};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>"
         end.join
-        "<table style=\"border-collapse:collapse;width:100%;\">#{rows}</table>"
+        "<table class=\"eo-table\">#{rows}</table>"
       end
     end
   end

data/lib/tina4/frond.rb

@@ -3184,6 +3184,13 @@ module Tina4
       # Both this global and the |dump filter call Frond.render_dump which
       # returns an empty SafeString in production so dump never leaks state.
       @globals["dump"] = ->(value = nil) { Frond.render_dump(value) }
+
+      # CSP nonce: {{ csp_nonce() }} returns the current response's nonce so a
+      # template can serve an inline <style>/<script> under the strict default
+      # Content-Security-Policy — <style nonce="{{ csp_nonce() }}">. The value
+      # matches the 'nonce-X' the security middleware puts in the CSP header
+      # (ADR-0088).
+      @globals["csp_nonce"] = -> { Tina4::Csp.current_nonce }
     end
 
     # Render a value as a pre-formatted inspect() wrapped in <pre> tags.