Improve Early Hints tooling and documentation

- check_early_hints.js: Exit with error code 1 when no Early Hints found
- Footer.jsx: Extract reusable SVG icon components to reduce duplication
- chrome-mcp-server-setup.md: Add note about Playwright not capturing 103 responses,
  show CDP approach for detecting Early Hints
- thruster.md: Add Shakapacker early_hints configuration example

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

Author: justin808

check_early_hints.js

@@ -57,7 +57,10 @@ const req = http.get('http://localhost:9222/json', (res) => {
           // Look for Early Hints debug comments
           const earlyHintsMatch = html.match(/<!--[\s\S]*?Early Hints[\s\S]{0,500}?-->/g);
 
+          let earlyHintsFound = false;
+
           if (earlyHintsMatch) {
+            earlyHintsFound = true;
             console.log('🎉 Found Early Hints debug comments in HTML!\n');
             earlyHintsMatch.forEach(match => {
               console.log(match);
@@ -82,7 +85,7 @@ const req = http.get('http://localhost:9222/json', (res) => {
           }
 
           ws.close();
-          process.exit(0);
+          process.exit(earlyHintsFound ? 0 : 1);
         }
       } catch (e) {
         // Ignore parse errors for other messages

check_early_hints.py

@@ -1,6 +1,37 @@
 import React from 'react';
 import BaseComponent from 'libs/components/BaseComponent';
 
+// Reusable icon components to reduce SVG duplication
+const CheckmarkIcon = ({ className = 'w-4 h-4', color = 'text-green-400' }) => (
+  <svg className={`${className} ${color}`} fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
+    <path
+      fillRule="evenodd"
+      d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+
+const CheckmarkCircleIcon = ({ className = 'w-4 h-4', color = 'text-green-400' }) => (
+  <svg className={`${className} ${color}`} fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
+    <path
+      fillRule="evenodd"
+      d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+
+const InfoIcon = ({ className = 'w-4 h-4', color = 'text-yellow-400' }) => (
+  <svg className={`${className} ${color}`} fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
+    <path
+      fillRule="evenodd"
+      d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+
 export default class Footer extends BaseComponent {
   render() {
     return (
@@ -19,13 +50,7 @@ export default class Footer extends BaseComponent {
           <div className="mt-6 pt-6 border-t border-neutral-700 text-sm text-neutral-400">
             <div className="flex flex-col gap-3">
               <div className="flex items-center gap-2">
-                <svg className="w-4 h-4 text-green-400" fill="currentColor" viewBox="0 0 20 20">
-                  <path
-                    fillRule="evenodd"
-                    d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
-                    clipRule="evenodd"
-                  />
-                </svg>
+                <CheckmarkCircleIcon className="w-4 h-4" color="text-green-400" />
                 <span>
                   Powered by{' '}
                   <a
@@ -41,37 +66,19 @@ export default class Footer extends BaseComponent {
               </div>
               <div className="flex flex-wrap gap-x-4 gap-y-2 ml-6">
                 <div className="flex items-center gap-1.5">
-                  <svg className="w-3.5 h-3.5 text-emerald-400" fill="currentColor" viewBox="0 0 20 20">
-                    <path
-                      fillRule="evenodd"
-                      d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
-                      clipRule="evenodd"
-                    />
-                  </svg>
+                  <CheckmarkIcon className="w-3.5 h-3.5" color="text-emerald-400" />
                   <span className="text-xs">HTTP/2 Enabled</span>
                 </div>
                 <div className="flex items-center gap-1.5">
-                  <svg className="w-3.5 h-3.5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
-                    <path
-                      fillRule="evenodd"
-                      d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
-                      clipRule="evenodd"
-                    />
-                  </svg>
+                  <InfoIcon className="w-3.5 h-3.5" color="text-yellow-400" />
                   <span className="text-xs" title="Configured in Rails but stripped by Cloudflare CDN">
                     Early Hints (Configured)
                   </span>
                 </div>
                 <div className="flex items-center gap-1.5">
-                  <svg className="w-3.5 h-3.5 text-emerald-400" fill="currentColor" viewBox="0 0 20 20">
-                    <path
-                      fillRule="evenodd"
-                      d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
-                      clipRule="evenodd"
-                    />
-                  </svg>
+                  <CheckmarkIcon className="w-3.5 h-3.5" color="text-emerald-400" />
                   <span className="text-xs">
-                    Hosted on{' '}
+                    Supports{' '}
                     <a
                       href="https://shakacode.controlplane.com"
                       className="text-blue-400 hover:text-blue-300 underline"
@@ -80,6 +87,7 @@ export default class Footer extends BaseComponent {
                     >
                       Control Plane
                     </a>
+                    {' '}hosting
                   </span>
                 </div>
               </div>

client/app/bundles/comments/components/Footer/ror_components/Footer.jsx

@@ -256,6 +256,12 @@ If the MCP server is too complex, you could also:
    ```
 
 2. **Create a test script:**
+
+   > **Note:** Playwright's `page.on('response')` does not capture HTTP 1xx informational
+   > responses (status 103). The browser handles 103 Early Hints as preload hints without
+   > exposing them as regular Response objects. To detect Early Hints programmatically,
+   > you need to use the Chrome DevTools Protocol (CDP) directly.
+
    ```javascript
    // verify-early-hints.js
    const { chromium } = require('playwright');
@@ -265,12 +271,19 @@ If the MCP server is too complex, you could also:
      const context = await browser.newContext();
      const page = await context.newPage();
 
-     // Listen to all network responses
+     // Use CDP to detect Early Hints (103 responses)
+     const client = await context.newCDPSession(page);
+     await client.send('Network.enable');
+
+     // Listen for Early Hints via CDP
+     client.on('Network.responseReceivedEarlyHints', (params) => {
+       console.log('✅ Early Hints detected!');
+       console.log('Headers:', params.headers);
+     });
+
+     // Regular responses (won't include 103)
      page.on('response', response => {
        console.log(`${response.status()} ${response.url()}`);
-       if (response.status() === 103) {
-         console.log('✅ Early Hints detected!');
-       }
      });
 
      await page.goto('https://rails-pdzxq1kxxwqg8.cpln.app/');

docs/chrome-mcp-server-setup.md

@@ -295,6 +295,24 @@ Thruster works seamlessly with Shakapacker for both Webpack and Rspack:
 - Manifest files are properly served
 - Hot Module Replacement (HMR) still works in development
 
+#### Shakapacker Early Hints Configuration
+
+To enable early hints in production, add the following to your `config/shakapacker.yml`:
+
+```yaml
+# config/shakapacker.yml
+production:
+  <<: *default
+  # ... other settings ...
+
+  # Early hints configuration
+  early_hints:
+    enabled: true
+    debug: true  # Set to true to output debug info as HTML comments
+```
+
+This allows Shakapacker to send Link headers for webpack assets, which Thruster can use to optimize asset loading via HTTP/2 server push or 103 Early Hints responses.
+
 ## Performance Expectations
 
 Based on typical Rails applications with Thruster: