tina4ruby 3.13.142 → 3.13.144

data/lib/tina4/gallery/queue/src/routes/api/gallery_queue.rb

@@ -67,7 +67,7 @@ GALLERY_QUEUE_HTML = <<~'HTML'
                 <div class="card-body">
                     <div class="d-flex gap-2">
                         <input type="text" id="msgInput" class="form-control" placeholder="Enter a task message, e.g. send-email">
-                        <button class="btn btn-primary" onclick="produce()">Produce</button>
+                        <button class="btn btn-primary" id="produceBtn">Produce</button>
                     </div>
                 </div>
             </div>
@@ -76,10 +76,10 @@ GALLERY_QUEUE_HTML = <<~'HTML'
             <div class="card">
                 <div class="card-header">Actions</div>
                 <div class="card-body d-flex gap-2 flex-wrap">
-                    <button class="btn btn-success" onclick="consume()">Consume Next</button>
-                    <button class="btn btn-danger" onclick="failNext()">Fail Next</button>
-                    <button class="btn btn-warning" onclick="retryFailed()">Retry Failed</button>
-                    <button class="btn btn-secondary" onclick="refresh()">Refresh</button>
+                    <button class="btn btn-success" id="consumeBtn">Consume Next</button>
+                    <button class="btn btn-danger" id="failBtn">Fail Next</button>
+                    <button class="btn btn-warning" id="retryBtn">Retry Failed</button>
+                    <button class="btn btn-secondary" id="refreshBtn">Refresh</button>
                 </div>
             </div>
         </div>
@@ -112,7 +112,7 @@ GALLERY_QUEUE_HTML = <<~'HTML'
     </div>
 </div>
 
-<script>
+<script nonce="__CSP_NONCE__">
 function statusBadge(status) {
     var colors = {pending:"primary", reserved:"warning", completed:"success", failed:"danger", dead:"secondary"};
     var color = colors[status] || "secondary";
@@ -122,7 +122,7 @@ function statusBadge(status) {
 function showAlert(msg, type) {
     var area = document.getElementById("alertArea");
     area.innerHTML = '<div class="alert alert-' + type + ' alert-dismissible">' + msg +
-        '<button type="button" class="btn-close" onclick="this.parentElement.remove()"></button></div>';
+        '<button type="button" class="btn-close js-alert-close"></button></div>';
     setTimeout(function(){ area.innerHTML = ""; }, 3000);
 }
 
@@ -196,6 +196,16 @@ async function retryFailed() {
     refresh();
 }
 
+// CSP-clean wiring: no inline onclick — bind every control via addEventListener.
+document.getElementById("produceBtn").addEventListener("click", produce);
+document.getElementById("consumeBtn").addEventListener("click", consume);
+document.getElementById("failBtn").addEventListener("click", failNext);
+document.getElementById("retryBtn").addEventListener("click", retryFailed);
+document.getElementById("refreshBtn").addEventListener("click", refresh);
+document.getElementById("alertArea").addEventListener("click", function(e){
+    if (e.target.classList.contains("js-alert-close")) e.target.parentElement.remove();
+});
+
 refresh();
 setInterval(refresh, 2000);
 </script>
@@ -206,7 +216,10 @@ HTML
 # ── Render the interactive HTML page ──────────────────────────
 
 Tina4::Router.get("/gallery/queue") do |request, response|
-  response.html(GALLERY_QUEUE_HTML)
+  # ADR-0088: stamp this response's CSP nonce on the inline <script> so it runs
+  # under the strict default policy (the HTML is a frozen, non-interpolated
+  # constant, so the nonce is substituted at serve time).
+  response.html(GALLERY_QUEUE_HTML.gsub("__CSP_NONCE__", response.csp_nonce))
 end
 
 # ── Produce — add a message to the queue ──────────────────────

data/lib/tina4/gallery/templates/src/templates/gallery_page.twig

@@ -5,10 +5,23 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>{{ title }}</title>
     <link rel="stylesheet" href="/css/tina4.min.css">
-    <style>
+    <style nonce="{{ csp_nonce() }}">
         .component-section { margin-bottom: 2.5rem; }
         .component-section h3 { border-bottom: 2px solid var(--bs-primary, #0d6efd); padding-bottom: 0.5rem; margin-bottom: 1rem; }
         .code-preview { background: #1e293b; color: #4ade80; padding: 1rem; border-radius: 0.5rem; font-family: monospace; font-size: 0.85rem; overflow-x: auto; margin-top: 0.75rem; }
+        .progress-25 { width: 25%; }
+        .progress-50 { width: 50%; }
+        .progress-75 { width: 75%; }
+        .progress-100 { width: 100%; }
+        .build-card { background: #0f172a; border: 1px solid #334155; }
+        .build-heading { color: #e2e8f0; }
+        .build-code { background: #1e293b; border: 1px solid #334155; border-radius: 0.5rem; padding: 1.25rem; margin-top: 0.75rem; overflow-x: auto; font-family: 'SF Mono', SFMono-Regular, Consolas, monospace; font-size: 0.9rem; line-height: 1.7; }
+        .build-note { color: #94a3b8; margin-top: 0.75rem; margin-bottom: 0; }
+        .tok-kw { color: #38bdf8; }
+        .tok-str { color: #4ade80; }
+        .tok-fn { color: #fbbf24; }
+        .tok-dec { color: #c084fc; }
+        .tok-comment { color: #94a3b8; }
     </style>
 </head>
 <body>
@@ -29,7 +42,7 @@
 
     <div class="alert alert-info alert-dismissible mb-4">
         <strong>tina4css</strong> — Zero-dependency CSS framework (~24KB). Bootstrap-compatible class names, dark mode ready. No CDN needed — ships with every Tina4 project.
-        <button type="button" class="btn-close" onclick="this.parentElement.remove()"></button>
+        <button type="button" class="btn-close js-dismiss"></button>
     </div>
 
     <!-- Buttons -->
@@ -217,10 +230,10 @@
     <!-- Progress -->
     <div class="component-section">
         <h3>Progress Bars</h3>
-        <div class="progress mb-2"><div class="progress-bar bg-primary" style="width: 25%">25%</div></div>
-        <div class="progress mb-2"><div class="progress-bar bg-success" style="width: 50%">50%</div></div>
-        <div class="progress mb-2"><div class="progress-bar bg-warning" style="width: 75%">75%</div></div>
-        <div class="progress"><div class="progress-bar bg-danger" style="width: 100%">100%</div></div>
+        <div class="progress mb-2"><div class="progress-bar bg-primary progress-25">25%</div></div>
+        <div class="progress mb-2"><div class="progress-bar bg-success progress-50">50%</div></div>
+        <div class="progress mb-2"><div class="progress-bar bg-warning progress-75">75%</div></div>
+        <div class="progress"><div class="progress-bar bg-danger progress-100">100%</div></div>
     </div>
 
     <!-- List Group -->
@@ -235,23 +248,29 @@
     </div>
 
     <!-- How this page was built -->
-    <div class="card mt-4 mb-5" style="background:#0f172a;border:1px solid #334155;">
+    <div class="card mt-4 mb-5 build-card">
         <div class="card-body">
-            <h5 style="color:#e2e8f0;">How this page was built</h5>
-            <pre style="background:#1e293b;border:1px solid #334155;border-radius:0.5rem;padding:1.25rem;margin-top:0.75rem;overflow-x:auto;font-family:'SF Mono',SFMono-Regular,Consolas,monospace;font-size:0.9rem;line-height:1.7;"><code><span style="color:#c084fc;">Tina4::Router.get</span> <span style="color:#4ade80;">"/gallery/page"</span>, <span style="color:#38bdf8;">template:</span> <span style="color:#4ade80;">"gallery_page.twig"</span> <span style="color:#c084fc;">do</span> |request, response|
+            <h5 class="build-heading">How this page was built</h5>
+            <pre class="build-code"><code><span class="tok-dec">Tina4::Router.get</span> <span class="tok-str">"/gallery/page"</span>, <span class="tok-fn">template:</span> <span class="tok-str">"gallery_page.twig"</span> <span class="tok-dec">do</span> |request, response|
   response.call({
-    <span style="color:#fbbf24;">title:</span> <span style="color:#4ade80;">"tina4css Component Showcase"</span>,
-    <span style="color:#fbbf24;">items:</span> [...]
+    <span class="tok-fn">title:</span> <span class="tok-str">"tina4css Component Showcase"</span>,
+    <span class="tok-fn">items:</span> [...]
   }, Tina4::HTTP_OK)
-<span style="color:#c084fc;">end</span></code></pre>
-            <p style="color:#94a3b8;margin-top:0.75rem;margin-bottom:0;">
-                Rendered via <code style="color:#c084fc;">template:</code> keyword. Styled with <strong style="color:#e2e8f0;">tina4css</strong> — zero external CDN.
-                All components above use only <code style="color:#4ade80;">&lt;link href="/css/tina4.min.css"&gt;</code>.
+<span class="tok-dec">end</span></code></pre>
+            <p class="build-note">
+                Rendered via <code class="tok-dec">template:</code> keyword. Styled with <strong class="build-heading">tina4css</strong> — zero external CDN.
+                All components above use only <code class="tok-str">&lt;link href="/css/tina4.min.css"&gt;</code>.
             </p>
         </div>
     </div>
 
 </div>
 
+<script nonce="{{ csp_nonce() }}">
+    document.querySelectorAll('.js-dismiss').forEach(function(b){
+        b.addEventListener('click', function(){ this.parentElement.remove(); });
+    });
+</script>
+
 </body>
 </html>

data/lib/tina4/graphql.rb

@@ -1205,19 +1205,25 @@ module Tina4
     private
 
     def graphiql_html(endpoint)
+      # ADR-0088: no inline style= attribute, and the inline bootstrap <script>
+      # carries this response's CSP nonce. The cross-origin GraphiQL CDN assets
+      # still need TINA4_CSP to list unpkg.com (the default 'self' blocks them),
+      # same as the swagger UI — this is a dev-only playground.
+      nonce = Tina4::Csp.current_nonce
       <<~HTML
         <!DOCTYPE html>
         <html>
         <head>
           <title>GraphiQL — Tina4 Ruby</title>
           <link rel="stylesheet" href="https://unpkg.com/graphiql@3/graphiql.min.css" />
+          <style nonce="#{nonce}">body{margin:0;height:100vh}#graphiql{height:100vh}</style>
         </head>
-        <body style="margin:0;height:100vh;">
-          <div id="graphiql" style="height:100vh;"></div>
+        <body>
+          <div id="graphiql"></div>
           <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
           <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
           <script crossorigin src="https://unpkg.com/graphiql@3/graphiql.min.js"></script>
-          <script>
+          <script nonce="#{nonce}">
             const fetcher = GraphiQL.createFetcher({ url: '#{endpoint}' });
             ReactDOM.createRoot(document.getElementById('graphiql'))
               .render(React.createElement(GraphiQL, { fetcher }));

data/lib/tina4/middleware.rb

@@ -805,7 +805,14 @@ module Tina4
         [
           ["X-Frame-Options", ENV["TINA4_FRAME_OPTIONS"] || "SAMEORIGIN"],
           ["X-Content-Type-Options", "nosniff"],
-          ["Content-Security-Policy", ENV["TINA4_CSP"] || "default-src 'self'"],
+          # ADR-0088: always name a per-response nonce in style-src AND script-src
+          # so the framework's own inline <style>/<script> (and app templates using
+          # the Frond csp_nonce() global) run under the strict policy without ever
+          # adding 'unsafe-inline'. Derives style-src/script-src from default-src /
+          # 'self' when TINA4_CSP omits them. The value comes from the request
+          # thread-local so it matches the nonce the HTML body stamps on its inline
+          # elements.
+          ["Content-Security-Policy", Tina4::Csp.resolve_csp_header(Tina4::Csp.current_nonce)],
           ["Referrer-Policy", ENV["TINA4_REFERRER_POLICY"] || "strict-origin-when-cross-origin"],
           ["X-XSS-Protection", "0"],
           ["Permissions-Policy", ENV["TINA4_PERMISSIONS_POLICY"] || "camera=(), microphone=(), geolocation=()"]
@@ -847,11 +854,14 @@ module Tina4
 
         @csp_default_warned = true
         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'\"."
         begin
           Tina4::Log.warning(message)
         rescue StandardError

data/lib/tina4/rack_app.rb

@@ -103,6 +103,11 @@ module Tina4
       # on the response whatever outcome the pipeline produced (200/404/500/413).
       request_id = Tina4::Log.sanitize_request_id(env["HTTP_X_REQUEST_ID"]) || SecureRandom.hex(4)
       Tina4::Log.set_request_id(request_id)
+      # One CSP nonce per request, published on the thread-local (ADR-0088) so the
+      # inline HTML body and the security middleware's CSP header name the SAME
+      # value. Cleared in `ensure`, exactly like the request id (an overlapping
+      # request on another thread never shares it).
+      Tina4::Csp.set_current_nonce(Tina4::Csp.generate_nonce)
 
       begin
         result = dispatch_pipeline(env)
@@ -112,8 +117,10 @@ module Tina4
         # The request pipeline installs the id before its first log and
         # clears it in `finally`/`ensure` after its last (Decision 12 /
         # LOG-Q03), so an overlapping request on another thread can never
-        # observe a stale id from a request that already finished.
+        # observe a stale id from a request that already finished. The CSP
+        # nonce has the same lifetime.
         Tina4::Log.clear_request_id
+        Tina4::Csp.clear_current_nonce
       end
     end
 
@@ -374,6 +381,10 @@ module Tina4
       # zero-dependency — no vendored ~1.4MB swagger-ui-dist). Air-gapped
       # deployments point TINA4_SWAGGER_UI_CDN at a self-hosted mirror.
       cdn = (ENV["TINA4_SWAGGER_UI_CDN"] || "https://cdn.jsdelivr.net/npm/swagger-ui-dist@5").sub(%r{/+\z}, "")
+      # ADR-0088: nonce the inline bootstrap <script> so it runs under the strict
+      # default CSP. The external <script src>/<link> need none ('self' allows
+      # same-origin; a CDN still needs TINA4_CSP to list its host).
+      nonce = Tina4::Csp.current_nonce
       html = <<~HTML
         <!DOCTYPE html>
         <html lang="en">
@@ -385,7 +396,7 @@ module Tina4
         <body>
           <div id="swagger-ui"></div>
           <script src="#{cdn}/swagger-ui-bundle.js"></script>
-          <script>
+          <script nonce="#{nonce}">
             SwaggerUIBundle({ url: '/swagger/openapi.json', dom_id: '#swagger-ui' });
           </script>
         </body>
@@ -554,6 +565,12 @@ module Tina4
 
     def render_landing_page
       port = ENV["PORT"] || "7145"
+      # One CSP nonce for this response (ADR-0088): the <style>/<script> below
+      # carry it, and the security middleware names the SAME value in the CSP
+      # header. No inline style=/onclick= — a nonce covers a <style>/<script>
+      # ELEMENT but never a style or event-handler ATTRIBUTE, so every style
+      # lives in a class and every handler is bound with addEventListener.
+      nonce = Tina4::Csp.current_nonce
 
       # Check deployed state for each gallery item
       project_src = File.join(@root_dir, "src")
@@ -569,13 +586,13 @@ module Tina4
 
       gallery_cards = gallery_items.map do |item|
         deployed = File.file?(File.join(project_src, item[:file_check]))
-        deployed_badge = deployed ? '<span style="position:absolute;top:0.75rem;right:0.75rem;background:#22c55e;color:#fff;font-size:0.65rem;padding:0.15rem 0.5rem;border-radius:0.25rem;font-weight:600;">DEPLOYED</span>' : ''
+        deployed_badge = deployed ? '<span class="deployed-badge">DEPLOYED</span>' : ''
         try_btn = if deployed
                     %(<a href="#{item[:try_url]}" class="gbtn gbtn-try" target="_blank">Try It</a>)
                   else
-                    %(<button class="gbtn gbtn-deploy" onclick="deployGallery('#{item[:id]}','#{item[:try_url]}')">Deploy &amp; Try</button>)
+                    %(<button class="gbtn gbtn-deploy" data-gallery-deploy data-id="#{item[:id]}" data-try-url="#{item[:try_url]}">Deploy &amp; Try</button>)
                   end
-        view_btn = %(<button class="gbtn gbtn-view" onclick="viewGallery('#{item[:id]}')">View</button>)
+        view_btn = %(<button class="gbtn gbtn-view" data-gallery-view data-id="#{item[:id]}">View</button>)
 
         <<~CARD
           <div class="gallery-card">
@@ -584,7 +601,7 @@ module Tina4
               <div class="icon">#{item[:icon]}</div>
               <h3>#{item[:name]}</h3>
               <p>#{item[:desc]}</p>
-              <div style="display:flex;gap:0.5rem;margin-top:0.75rem;">#{try_btn}#{view_btn}</div>
+              <div class="gallery-card-actions">#{try_btn}#{view_btn}</div>
           </div>
         CARD
       end.join
@@ -596,7 +613,7 @@ module Tina4
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <title>Tina4Ruby</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}
@@ -638,6 +655,21 @@ module Tina4
         .view-modal-close:hover{color:#e2e8f0}
         @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}
+        .tagline-sub{font-size:0.95rem;margin-top:-1rem}
+        .deployed-badge{position:absolute;top:0.75rem;right:0.75rem;background:#22c55e;color:#fff;font-size:0.65rem;padding:0.15rem 0.5rem;border-radius:0.25rem;font-weight:600}
+        .gallery-card-actions{display:flex;gap:0.5rem;margin-top:0.75rem}
+        .gallery-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem}
+        .view-modal-title{margin-bottom:1rem;color:#e2e8f0}
+        .vm-intro{color:#94a3b8;margin-bottom:1rem}
+        .vm-file-list{list-style:none;padding:0}
+        .vm-file{padding:0.25rem 0;color:#4ade80;font-family:monospace;font-size:0.85rem}
+        .vm-tryurl{color:#94a3b8;margin-top:1rem}
+        .vm-code{color:#38bdf8}
+        .tok-comment{color:#64748b}
+        .tok-kw{color:#c084fc}
+        .tok-str{color:#4ade80}
+        .tok-fn{color:#38bdf8}
+        .tok-dec{color:#fbbf24}
         </style>
         </head>
         <body>
@@ -646,7 +678,7 @@ module Tina4
             <img src="/images/tina4-logo-icon.webp" class="logo" alt="Tina4">
             <h1>Tina4Ruby</h1>
             <p class="tagline">The Intelligent Native Application 4ramework</p>
-            <p class="tagline" style="font-size:0.95rem;margin-top:-1rem">Simple. Fast. Human. &nbsp;|&nbsp; Built for AI. Built for you.</p>
+            <p class="tagline tagline-sub">Simple. Fast. Human. &nbsp;|&nbsp; Built for AI. Built for you.</p>
             <div class="actions">
                 <a href="https://tina4.com/ruby" class="btn" target="_blank">Website</a>
                 <a href="/__dev" class="btn">Dev Admin</a>
@@ -664,33 +696,32 @@ module Tina4
         <div class="section">
             <div class="card">
                 <h2>Getting Started</h2>
-                <pre class="code-block"><code><span style="color:#64748b"># app.rb</span>
-        <span style="color:#c084fc">require</span> <span style="color:#4ade80">"tina4"</span>
+                <pre class="code-block"><code><span class="tok-comment"># app.rb</span>
+        <span class="tok-kw">require</span> <span class="tok-str">"tina4"</span>
 
-        Tina4::Router.<span style="color:#38bdf8">get</span>(<span style="color:#4ade80">"/hello"</span>) <span style="color:#c084fc">do</span> |request, response|
-          response.<span style="color:#38bdf8">json</span>({ <span style="color:#fbbf24">message:</span> <span style="color:#4ade80">"Hello World!"</span> })
-        <span style="color:#c084fc">end</span>
+        Tina4::Router.<span class="tok-fn">get</span>(<span class="tok-str">"/hello"</span>) <span class="tok-kw">do</span> |request, response|
+          response.<span class="tok-fn">json</span>({ <span class="tok-dec">message:</span> <span class="tok-str">"Hello World!"</span> })
+        <span class="tok-kw">end</span>
 
-        Tina4::WebServer.new(<span style="color:#fbbf24">port:</span> <span style="color:#38bdf8">7145</span>).start  <span style="color:#64748b"># starts on port 7145</span></code></pre>
+        Tina4::WebServer.new(<span class="tok-dec">port:</span> <span class="tok-fn">7145</span>).start  <span class="tok-comment"># starts on port 7145</span></code></pre>
             </div>
         </div>
         <div class="gallery">
             <h2 id="gallery">Gallery</h2>
-            <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem;">
+            <div class="gallery-grid">
                 #{gallery_cards}
             </div>
         </div>
         <div class="view-modal" id="viewModal">
             <div class="view-modal-content">
-                <button class="view-modal-close" onclick="document.getElementById('viewModal').classList.remove('active')">&times;</button>
-                <h3 id="viewModalTitle" style="margin-bottom:1rem;color:#e2e8f0;"></h3>
+                <button class="view-modal-close" data-modal-close>&times;</button>
+                <h3 id="viewModalTitle" class="view-modal-title"></h3>
                 <div id="viewModalBody"></div>
             </div>
         </div>
-        <script>
-        function deployGallery(name, tryUrl) {
+        <script nonce="#{nonce}">
+        function deployGallery(btn, name, tryUrl) {
             if (!confirm('Deploy the "' + name + '" gallery example into your project?')) return;
-            var btn = event.target;
             btn.disabled = true;
             btn.textContent = 'Deploying...';
             fetch('/__dev/api/gallery/deploy', {
@@ -733,18 +764,34 @@ module Tina4
                 var title = document.getElementById('viewModalTitle');
                 var body = document.getElementById('viewModalBody');
                 title.textContent = item.name + ' — ' + item.description;
-                var html = '<p style="color:#94a3b8;margin-bottom:1rem;">Files that will be deployed:</p><ul style="list-style:none;padding:0;">';
+                var html = '<p class="vm-intro">Files that will be deployed:</p><ul class="vm-file-list">';
                 (item.files || []).forEach(function(f) {
-                    html += '<li style="padding:0.25rem 0;color:#4ade80;font-family:monospace;font-size:0.85rem;">src/' + f + '</li>';
+                    html += '<li class="vm-file">src/' + f + '</li>';
                 });
                 html += '</ul>';
                 if (item.try_url) {
-                    html += '<p style="color:#94a3b8;margin-top:1rem;">Try URL: <code style="color:#38bdf8;">' + item.try_url + '</code></p>';
+                    html += '<p class="vm-tryurl">Try URL: <code class="vm-code">' + item.try_url + '</code></p>';
                 }
                 body.innerHTML = html;
                 document.getElementById('viewModal').classList.add('active');
             });
         }
+        // CSP-clean wiring: no inline onclick handlers — bind every gallery
+        // button from its data-* attributes (a nonce covers script elements, not
+        // event-handler attributes).
+        document.querySelectorAll('[data-gallery-deploy]').forEach(function(btn){
+            btn.addEventListener('click', function(){
+                deployGallery(btn, btn.dataset.id, btn.dataset.tryUrl);
+            });
+        });
+        document.querySelectorAll('[data-gallery-view]').forEach(function(btn){
+            btn.addEventListener('click', function(){ viewGallery(btn.dataset.id); });
+        });
+        document.querySelectorAll('[data-modal-close]').forEach(function(btn){
+            btn.addEventListener('click', function(){
+                document.getElementById('viewModal').classList.remove('active');
+            });
+        });
         document.getElementById('viewModal').addEventListener('click', function(e) {
             if (e.target === this) this.classList.remove('active');
         });

data/lib/tina4/response.rb

@@ -63,7 +63,7 @@ module Tina4
     TEXT_CONTENT_TYPE = "text/plain; charset=utf-8"
     XML_CONTENT_TYPE  = "application/xml; charset=utf-8"
 
-    attr_accessor :status_code, :headers, :body, :cookies
+    attr_accessor :status_code, :headers, :body, :cookies, :csp_nonce
 
     # ADR-0068: a header name must be an RFC 9110 token, and a header value,
     # redirect location or cookie attribute may never carry CR, LF or NUL (a
@@ -89,6 +89,11 @@ module Tina4
       @body = ""
       @cookies = nil  # Lazy -- most responses have no cookies
       @content_type_from_header = false
+      # Per-response CSP nonce (ADR-0088). RackApp#call mints one per request on
+      # the thread-local, so every Response built during that request reads the
+      # SAME value the security middleware names in the Content-Security-Policy
+      # header and the framework's inline <style>/<script> stamp on themselves.
+      @csp_nonce = Tina4::Csp.current_nonce
     end
 
     # Chainable status setter