agents page: build its CSS, pin and defer the icon script, first paint 2.2s to 0.8s

.github/workflows/site-check.yml

@@ -50,10 +50,10 @@ jobs:
           npm ci || npm install
           npm run build
 
-      - name: Check the homepage stylesheet is up to date
+      - name: Check the page stylesheets are up to date
         run: |
           scripts/build-css.sh
-          git diff --exit-code demo/tailwind.css
+          git diff --exit-code demo/tailwind.css demo-agents/tailwind.css
 
       - name: Assemble the site and check every referenced file
         run: scripts/assemble-site.sh _site

demo-agents/index.html

@@ -25,30 +25,14 @@
   <link rel="icon" type="image/svg+xml" href="./favicon.svg" />
   <link rel="alternate icon" href="./favicon.ico" />
 
-  <script src="https://cdn.tailwindcss.com"></script>
-  <script>
-    tailwind.config = {
-      darkMode: 'class',
-      theme: {
-        extend: {
-          colors: {
-            brand: { 50:'#ecfdf5', 100:'#d1fae5', 400:'#34d399', 500:'#10b981', 600:'#059669', 700:'#047857' },
-            dark: { 950:'#07090E', 900:'#0B0F17', 850:'#111726', 800:'#182238', 700:'#22304E', 600:'#334155' },
-            accent: { cyan:'#06B6D4', violet:'#8B5CF6', amber:'#F59E0B', rose:'#f43f5e' }
-          },
-          fontFamily: {
-            sans: ['Inter', 'system-ui', '-apple-system', 'sans-serif'],
-            mono: ['JetBrains Mono', 'Fira Code', 'monospace']
-          }
-        }
-      }
-    }
-  </script>
+  <link rel="stylesheet" href="./tailwind.css" />
 
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
-  <script src="https://unpkg.com/lucide@latest"></script>
+  <!-- No-op until the icon script below loads. If unpkg.com is blocked or slow, createIcons() does nothing and the page still works; icons just do not draw. -->
+  <script>window.lucide = { createIcons: function () {} };</script>
+  <script src="https://unpkg.com/lucide@1.52.0/dist/umd/lucide.min.js" integrity="sha384-SSRIJfpvnhji4rCcULgpNXRJjQ9P/odU9OaWxSumsZiokvJ7zAu4PGQVWyWxTG3u" crossorigin="anonymous" defer></script>
 
   <script src="wasm_exec.js"></script>
 

demo-agents/tailwind.config.cjs

@@ -0,0 +1,17 @@
+module.exports = {
+  content: ['./index.html'],
+  darkMode: 'class',
+  theme: {
+    extend: {
+      colors: {
+        brand: { 50:'#ecfdf5', 100:'#d1fae5', 400:'#34d399', 500:'#10b981', 600:'#059669', 700:'#047857' },
+        dark: { 950:'#07090E', 900:'#0B0F17', 850:'#111726', 800:'#182238', 700:'#22304E', 600:'#334155' },
+        accent: { cyan:'#06B6D4', violet:'#8B5CF6', amber:'#F59E0B', rose:'#f43f5e' }
+      },
+      fontFamily: {
+        sans: ['Inter', 'system-ui', '-apple-system', 'sans-serif'],
+        mono: ['JetBrains Mono', 'Fira Code', 'monospace']
+      }
+    }
+  }
+};

demo/index.html

@@ -37,7 +37,7 @@
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
   <script>window.lucide = { createIcons: function () {} };</script>
-  <script src="https://unpkg.com/lucide@1.52.0/dist/umd/lucide.min.js" defer></script>
+  <script src="https://unpkg.com/lucide@1.52.0/dist/umd/lucide.min.js" integrity="sha384-SSRIJfpvnhji4rCcULgpNXRJjQ9P/odU9OaWxSumsZiokvJ7zAu4PGQVWyWxTG3u" crossorigin="anonymous" defer></script>
 
   <!-- Go WebAssembly Runtime Support -->
   <script src="wasm_exec.js"></script>

scripts/assemble-site.sh

@@ -22,7 +22,7 @@ cp -r docs/assets/. "$SITE/assets/"
 # SOP Arena lives at a subpath of the same site: joltrinhq.com/arena/
 cp -r sop-arena/dist/. "$SITE/arena/"
 # Agent verification barrier (verify in WASM) lives at joltrinhq.com/agents/
-cp demo-agents/index.html demo-agents/sop-agents.wasm demo-agents/wasm_exec.js demo-agents/favicon.svg demo-agents/favicon.ico demo-agents/og-image.png demo-agents/logo-mark.png "$SITE/agents/"
+cp demo-agents/index.html demo-agents/tailwind.css demo-agents/sop-agents.wasm demo-agents/wasm_exec.js demo-agents/favicon.svg demo-agents/favicon.ico demo-agents/og-image.png demo-agents/logo-mark.png "$SITE/agents/"
 # Preserve custom domain (e.g. joltrinhq.com) if CNAME exists
 if [ -f CNAME ]; then
   cp CNAME "$SITE/CNAME"

scripts/build-css.sh

@@ -1,16 +1,17 @@
 #!/usr/bin/env bash
-# Builds demo/tailwind.css, the stylesheet the homepage links. It replaces the
+# Builds demo/tailwind.css and demo-agents/tailwind.css, the stylesheets the
+# homepage and the agents page link. They replace the
 # Tailwind CDN script, which compiled the page's classes in the browser before
 # first paint. Uses the Tailwind CLI that sop-arena already installs, so run
 # `npm ci` in sop-arena first. Commit the result when index.html changes; the
 # Site Check job fails if demo/tailwind.css is out of date.
 set -euo pipefail
 
 REPO_ROOT="$(cd "$(dirname "${BASH_SOURCE[0]}")/.." && pwd)"
-cd "$REPO_ROOT/demo"
-
-TAILWIND="../sop-arena/node_modules/.bin/tailwindcss"
+TAILWIND="$REPO_ROOT/sop-arena/node_modules/.bin/tailwindcss"
 [ -x "$TAILWIND" ] || { echo "run npm ci in sop-arena first" >&2; exit 1; }
 
 printf '@tailwind base;\n@tailwind components;\n@tailwind utilities;\n' > "${TMPDIR:-/tmp}/joltrin-tailwind-in.css"
-"$TAILWIND" -c tailwind.config.cjs -i "${TMPDIR:-/tmp}/joltrin-tailwind-in.css" -o tailwind.css --minify
+for dir in demo demo-agents; do
+  (cd "$REPO_ROOT/$dir" && "$TAILWIND" -c tailwind.config.cjs -i "${TMPDIR:-/tmp}/joltrin-tailwind-in.css" -o tailwind.css --minify)
+done

tests/site-smoke.spec.ts

@@ -87,10 +87,7 @@ for (const blockThirdParty of [false, true]) {
         expect(box!.height, `${path} an iframe has no height`).toBeGreaterThan(50);
       }
 
-      // /agents/ still loads Tailwind and the icon library from a CDN at runtime, so
-      // those two errors are known when the CDN is blocked. Anything else is not.
-      const known = path === '/agents/' && blockThirdParty ? /^uncaught error: (ReferenceError: )?(Can't find variable: (tailwind|lucide)|(tailwind|lucide) is not defined)$/ : null;
-      expect(problems.filter((p) => !known || !known.test(p)), `${path} problems while loading`).toEqual([]);
+      expect(problems, `${path} problems while loading`).toEqual([]);
     });
   }
 }