feat(bankai): Phase 4 follow-ups — css convention, live titles, prerender, HTTP/2, size budget

- style.css convention: <entry dir>/style.css is imported by the virtual
  client entry (CSS is a client concern; server code never sees it — the
  v8 answer to sheetify), extracted and hashed by Vite, stylesheet-linked
  in the head and preloaded via Early Hints. Counter example styled.
- SSR <title> from state: the server reads the first stream chunk before
  writing the head, by which point stores and the first render slice have
  run — DOMTitleChange emits land in the document title. Counter emits.
- bankai build --prerender /,/about renders routes through the same
  toStream path to static <route>/index.html (precompressed, precached
  by the service worker, served with Early Hints).
- bankai serve --h2: HTTP/2 with a generated local cert (openssl,
  cached; allowHTTP1) — browsers only act on Early Hints over h2/h3.
  Tested with a real h2 client observing the 103 interim response.
- npm run size: the framework wire-size budget, enforced in CI. Whole
  framework (core + html engine + morph + hydrate) is 7.97 kB min+gzip /
  7.15 kB brotli; budget 8.5 kB with the v7 '4kb' context documented
  (that number excluded the html engine, which lived in the browserify
  transform).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_014NgfSjHE11oFpoSnLVKLXd

packages/bankai/lib/serve.js

@@ -1,18 +1,26 @@
 // bankai serve — the production server. Static assets from dist
 // (precompressed variants negotiated, hashed assets cached forever);
-// everything else is a page: 103 Early Hints from the build manifest,
-// then streaming SSR of the entry module — imported natively, because
-// the server side never needed a build.
+// prerendered routes served as static HTML; everything else is a page:
+// 103 Early Hints from the build manifest, then streaming SSR of the
+// entry module — imported natively, because the server side never
+// needed a build. `h2: true` serves HTTP/2 with a generated local cert
+// (allowHTTP1 for tools) — browsers only act on Early Hints over h2/h3,
+// so production deployments want this or a fronting h2 proxy.
 
-import { createServer } from 'node:http'
+import http from 'node:http'
+import http2 from 'node:http2'
+import { execFile } from 'node:child_process'
 import { createReadStream } from 'node:fs'
-import { readFile, stat } from 'node:fs/promises'
+import { readFile, stat, mkdir } from 'node:fs/promises'
 import { join, normalize, extname, resolve } from 'node:path'
 import { pathToFileURL } from 'node:url'
+import { promisify } from 'node:util'
 
 import { resolveApp } from './app.js'
 import { documentHead, documentTail, assetLinks } from './document.js'
 
+const execFileP = promisify(execFile)
+
 const MIME = {
   '.html': 'text/html; charset=utf-8',
   '.js': 'text/javascript; charset=utf-8',
@@ -28,13 +36,13 @@ const MIME = {
   '.ico': 'image/x-icon'
 }
 
-export default async function serve ({ outDir = 'dist', port = 8080 }) {
+export default async function serve ({ outDir = 'dist', port = 8080, h2 = false }) {
   outDir = resolve(outDir)
   const meta = JSON.parse(await readFile(join(outDir, 'bankai.json'), 'utf8'))
   const mod = await import(pathToFileURL(meta.entry))
   const links = assetLinks(meta.assets)
 
-  const server = createServer(async (req, res) => {
+  async function handler (req, res) {
     const url = new URL(req.url, 'http://localhost')
     const pathname = decodeURIComponent(url.pathname)
 
@@ -49,7 +57,14 @@ export default async function serve ({ outDir = 'dist', port = 8080 }) {
       }
     }
 
-    // page: hints first, then stream
+    // prerendered page?
+    const prerendered = normalize(join(outDir, pathname, 'index.html'))
+    if (prerendered.startsWith(outDir) && await isFile(prerendered)) {
+      if (links.length && res.writeEarlyHints) res.writeEarlyHints({ link: links })
+      return sendFile(req, res, prerendered, pathname, { link: links.join(', ') })
+    }
+
+    // live page: hints first, then stream
     try {
       const app = resolveApp(mod, meta.entry)
       const state = {}
@@ -57,13 +72,22 @@ export default async function serve ({ outDir = 'dist', port = 8080 }) {
       if (links.length && res.writeEarlyHints) {
         res.writeEarlyHints({ link: links })
       }
+
+      // first chunk before the head: stores + the first render slice have
+      // run by then, so state.title is populated
+      const reader = app.toStream(req.url, state).getReader()
+      const first = await reader.read()
+
       res.writeHead(200, {
         'content-type': 'text/html; charset=utf-8',
         link: links.join(', ')
       })
-      res.write(documentHead({ title: meta.title, ...meta.assets }))
-      for await (const chunk of app.toStream(req.url, state)) {
-        res.write(chunk)
+      res.write(documentHead({ title: state.title || meta.title, ...meta.assets }))
+      if (!first.done) res.write(first.value)
+      for (;;) {
+        const { done, value } = await reader.read()
+        if (done) break
+        res.write(value)
       }
       res.end(documentTail(state))
     } catch (err) {
@@ -71,17 +95,46 @@ export default async function serve ({ outDir = 'dist', port = 8080 }) {
       if (!res.headersSent) res.writeHead(500, { 'content-type': 'text/plain' })
       res.end('bankai: render error')
     }
-  })
+  }
+
+  let server
+  if (h2) {
+    const { key, cert } = await localCert(outDir)
+    server = http2.createSecureServer({ key, cert, allowHTTP1: true }, handler)
+  } else {
+    server = http.createServer(handler)
+  }
 
   await new Promise((resolveListen) => server.listen(port, resolveListen))
   return {
     server,
     port: server.address().port,
-    origin: `http://localhost:${server.address().port}`,
+    origin: `${h2 ? 'https' : 'http'}://localhost:${server.address().port}`,
     close: () => new Promise((resolveClose) => server.close(resolveClose))
   }
 }
 
+// self-signed localhost cert, generated once via openssl and cached
+// alongside the build (never commit dist)
+async function localCert (outDir) {
+  const dir = join(outDir, '.bankai-cert')
+  const keyPath = join(dir, 'key.pem')
+  const certPath = join(dir, 'cert.pem')
+  if (!(await isFile(keyPath)) || !(await isFile(certPath))) {
+    await mkdir(dir, { recursive: true })
+    await execFileP('openssl', [
+      'req', '-x509', '-newkey', 'rsa:2048', '-nodes', '-days', '365',
+      '-subj', '/CN=localhost',
+      '-addext', 'subjectAltName=DNS:localhost,IP:127.0.0.1',
+      '-keyout', keyPath, '-out', certPath
+    ])
+  }
+  return {
+    key: await readFile(keyPath),
+    cert: await readFile(certPath)
+  }
+}
+
 async function isFile (path) {
   try {
     return (await stat(path)).isFile()
@@ -90,8 +143,9 @@ async function isFile (path) {
   }
 }
 
-async function sendFile (req, res, file, pathname) {
+async function sendFile (req, res, file, pathname, extraHeaders = {}) {
   const headers = {
+    ...extraHeaders,
     'content-type': MIME[extname(file)] || 'application/octet-stream',
     // hashed build assets are immutable; everything else revalidates
     'cache-control': pathname.startsWith('/assets/')