tina4ruby 3.13.142 → 3.13.143

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7e0e60af31fb00e8d35480634176d6bf978963f0d2e0609ebc9468204d8852d0
-  data.tar.gz: c34fbf17ba63d2295c13071cdc82cf1eca291bd7fafa4a1e8d6510083bd95ba1
+  metadata.gz: 641d95c3ab74eeac0ce2b273ee7c6c44ca8aaab5e7e2a06d8e668eacffc5fb28
+  data.tar.gz: f8ad58627e7263bf560b499dc40fbd249d3267516d61b2c31696051f80b11852
 SHA512:
-  metadata.gz: 4a290825e4873802ac5311a665c67d19fcb618d77048299601f4bb6d9368a389cb093ce1039eaf7b071f30f1b7f0d7d3d2e297617947198ad9e81912909acb23
-  data.tar.gz: 287309debcce829752205d6bafedd17e2849b20726c27e151e69503e31a7656bfb420511946512e6f12b11953ec68e4ed01a1628dbf173d1ad9cdee605e1e49e
+  metadata.gz: 2354cb021a1136116236d2a94f6c5be38331823eda3e4ea4b37483ac395e3324af69b8a88d55e856039fe1951bb74be6e4918505bcbd6f6b70075f9b2ef0f232
+  data.tar.gz: f3c5de4a797f61db477db42c3a46e0f47dd132e7e2522b05d6127ee6c6d84b631215808fcb88953467308291a9754b39811f1ab8604f02fca93921b39b2ea67b

data/CHANGELOG.md

@@ -6,6 +6,10 @@ 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.

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>"
@@ -457,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; }
@@ -491,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">
@@ -526,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
@@ -567,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>
@@ -586,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|
@@ -599,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
@@ -609,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};
@@ -708,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) {
@@ -729,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]');
@@ -748,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", ""))
@@ -205,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}" \
@@ -247,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
@@ -257,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.

data/lib/tina4/gallery/auth/src/routes/api/gallery_auth.rb

@@ -7,15 +7,27 @@
 # Gallery: Auth — JWT login with a visual demo page.
 
 Tina4::Router.get("/gallery/auth") do |request, response|
+  # ADR-0088: this page's inline <style>/<script> carry the response's CSP nonce
+  # so they run under the strict default policy; no inline style=/onclick=.
+  nonce = response.csp_nonce
   html = <<~HTML
     <!DOCTYPE html>
     <html lang="en">
     <head>
     <meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
     <title>Auth Demo</title><link rel="stylesheet" href="/css/tina4.min.css">
+    <style nonce="#{nonce}">
+    .auth-demo{max-width:600px}
+    .is-hidden{display:none}
+    .token-box{word-break:break-all;white-space:pre-wrap;color:#4ade80;background:#1e293b;padding:1rem;border-radius:0.5rem}
+    .payload-box{color:#38bdf8;background:#1e293b;padding:1rem;border-radius:0.5rem}
+    .howto-card{border:1px solid #334155}
+    .howto-heading{color:#e2e8f0}
+    .howto-code{background:#0f172a;color:#4ade80;padding:1rem;border-radius:0.5rem;font-size:0.8rem}
+    </style>
     </head>
     <body class="bg-dark text-light">
-    <div class="container mt-5" style="max-width:600px;">
+    <div class="container mt-5 auth-demo">
         <h2 class="mb-4">JWT Authentication Demo</h2>
         <div class="card mb-4">
             <div class="card-header bg-primary text-white">Login</div>
@@ -28,35 +40,35 @@ Tina4::Router.get("/gallery/auth") do |request, response|
                     <label class="form-label">Password</label>
                     <input type="password" id="password" class="form-control" placeholder="secret" value="secret">
                 </div>
-                <button class="btn btn-primary" onclick="doLogin()">Login</button>
+                <button class="btn btn-primary" id="loginBtn">Login</button>
             </div>
         </div>
-        <div id="result" style="display:none;">
+        <div id="result" class="is-hidden">
             <div class="card mb-3">
                 <div class="card-header bg-success text-white">Token Received</div>
                 <div class="card-body">
-                    <pre id="token" style="word-break:break-all;white-space:pre-wrap;color:#4ade80;background:#1e293b;padding:1rem;border-radius:0.5rem;"></pre>
+                    <pre id="token" class="token-box"></pre>
                 </div>
             </div>
             <div class="card mb-3">
                 <div class="card-header">Token Payload (decoded)</div>
                 <div class="card-body">
-                    <pre id="payload" style="color:#38bdf8;background:#1e293b;padding:1rem;border-radius:0.5rem;"></pre>
+                    <pre id="payload" class="payload-box"></pre>
                 </div>
             </div>
-            <button class="btn btn-outline-info" onclick="verifyToken()">Verify Token</button>
+            <button class="btn btn-outline-info" id="verifyBtn">Verify Token</button>
             <span id="verify-result" class="ms-2"></span>
         </div>
-        <div class="card bg-dark mt-4" style="border:1px solid #334155;">
+        <div class="card bg-dark mt-4 howto-card">
             <div class="card-body">
-                <h6 style="color:#e2e8f0;">How it works</h6>
-                <pre style="background:#0f172a;color:#4ade80;padding:1rem;border-radius:0.5rem;font-size:0.8rem;"><code>token = Tina4::Auth.create_token({ username: "admin" })
+                <h6 class="howto-heading">How it works</h6>
+                <pre class="howto-code"><code>token = Tina4::Auth.create_token({ username: "admin" })
     payload = Tina4::Auth.get_payload(token)
     result = Tina4::Auth.validate_token(token)</code></pre>
             </div>
         </div>
     </div>
-    <script>
+    <script nonce="#{nonce}">
     var currentToken = '';
     function doLogin() {
         fetch('/api/gallery/auth/login', {
@@ -77,7 +89,7 @@ Tina4::Router.get("/gallery/auth") do |request, response|
                 } catch(e) {
                     document.getElementById('payload').textContent = 'Could not decode';
                 }
-                document.getElementById('result').style.display = 'block';
+                document.getElementById('result').classList.remove('is-hidden');
                 document.getElementById('verify-result').textContent = '';
             } else {
                 alert(d.error || 'Login failed');
@@ -95,6 +107,8 @@ Tina4::Router.get("/gallery/auth") do |request, response|
             }
         });
     }
+    document.getElementById('loginBtn').addEventListener('click', doLogin);
+    document.getElementById('verifyBtn').addEventListener('click', verifyToken);
     </script>
     </body></html>
   HTML