npm - almostnode - Versions diffs - 0.2.7 → 0.2.9 - Mend

almostnode 0.2.7 → 0.2.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (64) hide show

package/README.md +4 -2
package/dist/CNAME +1 -0
package/dist/__sw__.js +80 -84
package/dist/assets/{runtime-worker-B8_LZkBX.js → runtime-worker-ujGAG2t7.js} +1278 -828
package/dist/assets/runtime-worker-ujGAG2t7.js.map +1 -0
package/dist/frameworks/code-transforms.d.ts.map +1 -1
package/dist/frameworks/next-config-parser.d.ts +16 -0
package/dist/frameworks/next-config-parser.d.ts.map +1 -0
package/dist/frameworks/next-dev-server.d.ts +6 -6
package/dist/frameworks/next-dev-server.d.ts.map +1 -1
package/dist/frameworks/next-html-generator.d.ts +35 -0
package/dist/frameworks/next-html-generator.d.ts.map +1 -0
package/dist/frameworks/next-shims.d.ts +79 -0
package/dist/frameworks/next-shims.d.ts.map +1 -0
package/dist/index.cjs +3024 -2465
package/dist/index.cjs.map +1 -1
package/dist/index.d.ts +3 -0
package/dist/index.d.ts.map +1 -1
package/dist/index.mjs +3336 -2787
package/dist/index.mjs.map +1 -1
package/dist/og-image.png +0 -0
package/dist/runtime.d.ts +26 -0
package/dist/runtime.d.ts.map +1 -1
package/dist/server-bridge.d.ts +2 -0
package/dist/server-bridge.d.ts.map +1 -1
package/dist/shims/crypto.d.ts +2 -0
package/dist/shims/crypto.d.ts.map +1 -1
package/dist/shims/esbuild.d.ts.map +1 -1
package/dist/shims/fs.d.ts.map +1 -1
package/dist/shims/http.d.ts +29 -0
package/dist/shims/http.d.ts.map +1 -1
package/dist/shims/path.d.ts.map +1 -1
package/dist/shims/stream.d.ts.map +1 -1
package/dist/shims/vfs-adapter.d.ts.map +1 -1
package/dist/shims/ws.d.ts +2 -0
package/dist/shims/ws.d.ts.map +1 -1
package/dist/types/package-json.d.ts +1 -0
package/dist/types/package-json.d.ts.map +1 -1
package/dist/utils/binary-encoding.d.ts +13 -0
package/dist/utils/binary-encoding.d.ts.map +1 -0
package/dist/virtual-fs.d.ts.map +1 -1
package/package.json +4 -4
package/src/convex-app-demo-entry.ts +229 -35
package/src/frameworks/code-transforms.ts +5 -1
package/src/frameworks/next-config-parser.ts +140 -0
package/src/frameworks/next-dev-server.ts +76 -1675
package/src/frameworks/next-html-generator.ts +597 -0
package/src/frameworks/next-shims.ts +1050 -0
package/src/frameworks/tailwind-config-loader.ts +1 -1
package/src/index.ts +2 -0
package/src/runtime.ts +271 -25
package/src/server-bridge.ts +61 -28
package/src/shims/crypto.ts +13 -0
package/src/shims/esbuild.ts +4 -1
package/src/shims/fs.ts +9 -11
package/src/shims/http.ts +312 -3
package/src/shims/path.ts +6 -13
package/src/shims/stream.ts +12 -26
package/src/shims/vfs-adapter.ts +5 -2
package/src/shims/ws.ts +95 -2
package/src/types/package-json.ts +1 -0
package/src/utils/binary-encoding.ts +43 -0
package/src/virtual-fs.ts +7 -15
package/dist/assets/runtime-worker-B8_LZkBX.js.map +0 -1

package/src/frameworks/next-html-generator.ts ADDED Viewed

@@ -0,0 +1,597 @@
+/**
+ * Next.js HTML page generation
+ * Standalone functions extracted from NextDevServer for generating
+ * App Router HTML, Pages Router HTML, and 404 pages.
+ */
+import { Buffer } from '../shims/stream';
+import { ResponseData } from '../dev-server';
+import {
+  TAILWIND_CDN_SCRIPT,
+  CORS_PROXY_SCRIPT,
+  REACT_REFRESH_PREAMBLE,
+  HMR_CLIENT_SCRIPT,
+} from './next-shims';
+/** Resolved App Router route with page, layouts, and UI convention files */
+export interface AppRoute {
+  page: string;
+  layouts: string[];
+  params: Record<string, string | string[]>;
+  loading?: string;
+  error?: string;
+  notFound?: string;
+}
+/** Context needed by HTML generation functions */
+export interface HtmlGeneratorContext {
+  port: number;
+  exists: (path: string) => boolean;
+  generateEnvScript: () => string;
+  loadTailwindConfigIfNeeded: () => Promise<string>;
+}
+/**
+ * Generate HTML for App Router with nested layouts
+ */
+export async function generateAppRouterHtml(
+  ctx: HtmlGeneratorContext,
+  route: AppRoute,
+  pathname: string
+): Promise<string> {
+  // Use virtual server prefix for all file imports so the service worker can intercept them
+  const virtualPrefix = `/__virtual__/${ctx.port}`;
+  // Check for global CSS files
+  const globalCssLinks: string[] = [];
+  const cssLocations = ['/app/globals.css', '/styles/globals.css', '/styles/global.css'];
+  for (const cssPath of cssLocations) {
+    if (ctx.exists(cssPath)) {
+      globalCssLinks.push(`<link rel="stylesheet" href="${virtualPrefix}${cssPath}">`);
+    }
+  }
+  // Build the nested component structure
+  // Layouts wrap the page from outside in
+  const pageModulePath = virtualPrefix + route.page; // route.page already starts with /
+  const layoutImports = route.layouts
+    .map((layout, i) => `import Layout${i} from '${virtualPrefix}${layout}';`)
+    .join('\n    ');
+  // Build convention file paths for the inline script
+  const loadingModulePath = route.loading ? `${virtualPrefix}${route.loading}` : '';
+  const errorModulePath = route.error ? `${virtualPrefix}${route.error}` : '';
+  const notFoundModulePath = route.notFound ? `${virtualPrefix}${route.notFound}` : '';
+  // Build nested JSX: Layout0 > Layout1 > ... > Page
+  let nestedJsx = 'React.createElement(Page)';
+  for (let i = route.layouts.length - 1; i >= 0; i--) {
+    nestedJsx = `React.createElement(Layout${i}, null, ${nestedJsx})`;
+  }
+  // Generate env script for NEXT_PUBLIC_* variables
+  const envScript = ctx.generateEnvScript();
+  // Load Tailwind config if available (must be injected BEFORE CDN script)
+  const tailwindConfigScript = await ctx.loadTailwindConfigIfNeeded();
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <base href="${virtualPrefix}/">
+  <title>Next.js App</title>
+  ${envScript}
+  ${TAILWIND_CDN_SCRIPT}
+  ${tailwindConfigScript}
+  ${CORS_PROXY_SCRIPT}
+  ${globalCssLinks.join('\n  ')}
+  <script type="importmap">
+  {
+    "imports": {
+      "react": "https://esm.sh/react@18.2.0?dev",
+      "react/": "https://esm.sh/react@18.2.0&dev/",
+      "react-dom": "https://esm.sh/react-dom@18.2.0?dev",
+      "react-dom/": "https://esm.sh/react-dom@18.2.0&dev/",
+      "react-dom/client": "https://esm.sh/react-dom@18.2.0/client?dev",
+      "convex/react": "https://esm.sh/convex@1.21.0/react?external=react",
+      "convex/server": "https://esm.sh/convex@1.21.0/server",
+      "convex/values": "https://esm.sh/convex@1.21.0/values",
+      "convex/_generated/api": "${virtualPrefix}/convex/_generated/api.ts",
+      "ai": "https://esm.sh/ai@4?external=react",
+      "ai/react": "https://esm.sh/ai@4/react?external=react",
+      "@ai-sdk/openai": "https://esm.sh/@ai-sdk/openai@1",
+      "next/link": "${virtualPrefix}/_next/shims/link.js",
+      "next/router": "${virtualPrefix}/_next/shims/router.js",
+      "next/head": "${virtualPrefix}/_next/shims/head.js",
+      "next/navigation": "${virtualPrefix}/_next/shims/navigation.js",
+      "next/image": "${virtualPrefix}/_next/shims/image.js",
+      "next/dynamic": "${virtualPrefix}/_next/shims/dynamic.js",
+      "next/script": "${virtualPrefix}/_next/shims/script.js",
+      "next/font/google": "${virtualPrefix}/_next/shims/font/google.js",
+      "next/font/local": "${virtualPrefix}/_next/shims/font/local.js"
+    }
+  }
+  </script>
+  ${REACT_REFRESH_PREAMBLE}
+  ${HMR_CLIENT_SCRIPT}
+</head>
+<body>
+  <div id="__next"></div>
+  <script type="module">
+    import React from 'react';
+    import ReactDOM from 'react-dom/client';
+    const virtualBase = '${virtualPrefix}';
+    // Initial route params (embedded by server for initial page load)
+    const initialRouteParams = ${JSON.stringify(route.params)};
+    const initialPathname = '${pathname}';
+    // Expose initial params for useParams() hook
+    window.__NEXT_ROUTE_PARAMS__ = initialRouteParams;
+    // Convention file paths (loading.tsx, error.tsx, not-found.tsx)
+    const loadingModulePath = '${loadingModulePath}';
+    const errorModulePath = '${errorModulePath}';
+    const notFoundModulePath = '${notFoundModulePath}';
+    // Route params cache for client-side navigation
+    const routeParamsCache = new Map();
+    routeParamsCache.set(initialPathname, initialRouteParams);
+    // Extract route params from server for client-side navigation
+    async function extractRouteParams(pathname) {
+      // Strip virtual base if present
+      let route = pathname;
+      if (route.startsWith(virtualBase)) {
+        route = route.slice(virtualBase.length);
+      }
+      route = route.replace(/^\\/+/, '/') || '/';
+      // Check cache first
+      if (routeParamsCache.has(route)) {
+        return routeParamsCache.get(route);
+      }
+      try {
+        const response = await fetch(virtualBase + '/_next/route-info?pathname=' + encodeURIComponent(route));
+        const info = await response.json();
+        routeParamsCache.set(route, info.params || {});
+        return info.params || {};
+      } catch (e) {
+        console.error('[Router] Failed to extract route params:', e);
+        return {};
+      }
+    }
+    // Convert URL path to app router page module path
+    function getAppPageModulePath(pathname) {
+      let route = pathname;
+      if (route.startsWith(virtualBase)) {
+        route = route.slice(virtualBase.length);
+      }
+      route = route.replace(/^\\/+/, '/') || '/';
+      // App Router: / -> /app/page, /about -> /app/about/page
+      const pagePath = route === '/' ? '/app/page' : '/app' + route + '/page';
+      return virtualBase + '/_next/app' + pagePath + '.js';
+    }
+    // Get layout paths for a route
+    function getLayoutPaths(pathname) {
+      let route = pathname;
+      if (route.startsWith(virtualBase)) {
+        route = route.slice(virtualBase.length);
+      }
+      route = route.replace(/^\\/+/, '/') || '/';
+      // Build layout paths from root to current route
+      const layouts = [virtualBase + '/_next/app/app/layout.js'];
+      if (route !== '/') {
+        const segments = route.split('/').filter(Boolean);
+        let currentPath = '/app';
+        for (const segment of segments) {
+          currentPath += '/' + segment;
+          layouts.push(virtualBase + '/_next/app' + currentPath + '/layout.js');
+        }
+      }
+      return layouts;
+    }
+    // Dynamic page loader with retry (SW may need time to recover after idle termination)
+    async function loadPage(pathname) {
+      const modulePath = getAppPageModulePath(pathname);
+      for (let attempt = 0; attempt < 3; attempt++) {
+        try {
+          const module = await import(/* @vite-ignore */ modulePath + (attempt > 0 ? '?retry=' + attempt : ''));
+          return module.default;
+        } catch (e) {
+          console.warn('[Navigation] Load attempt ' + (attempt + 1) + ' failed:', modulePath, e.message);
+          if (attempt < 2) await new Promise(r => setTimeout(r, 1000));
+        }
+      }
+      console.error('[Navigation] Failed to load page after 3 attempts:', modulePath);
+      return null;
+    }
+    // Load layouts (with caching)
+    const layoutCache = new Map();
+    async function loadLayouts(pathname) {
+      const layoutPaths = getLayoutPaths(pathname);
+      const layouts = [];
+      for (const path of layoutPaths) {
+        if (layoutCache.has(path)) {
+          layouts.push(layoutCache.get(path));
+        } else {
+          try {
+            const module = await import(/* @vite-ignore */ path);
+            layoutCache.set(path, module.default);
+            layouts.push(module.default);
+          } catch (e) {
+            // Layout might not exist for this segment, skip
+          }
+        }
+      }
+      return layouts;
+    }
+    // Load convention components (loading.tsx, error.tsx)
+    let LoadingComponent = null;
+    let ErrorComponent = null;
+    let NotFoundComponent = null;
+    async function loadConventionComponents() {
+      if (loadingModulePath) {
+        try {
+          const mod = await import(/* @vite-ignore */ loadingModulePath);
+          LoadingComponent = mod.default;
+        } catch (e) { /* loading.tsx not available */ }
+      }
+      if (errorModulePath) {
+        try {
+          const mod = await import(/* @vite-ignore */ errorModulePath);
+          ErrorComponent = mod.default;
+        } catch (e) { /* error.tsx not available */ }
+      }
+      if (notFoundModulePath) {
+        try {
+          const mod = await import(/* @vite-ignore */ notFoundModulePath);
+          NotFoundComponent = mod.default;
+        } catch (e) { /* not-found.tsx not available */ }
+      }
+    }
+    await loadConventionComponents();
+    // Error boundary class component
+    class ErrorBoundary extends React.Component {
+      constructor(props) {
+        super(props);
+        this.state = { error: null };
+      }
+      static getDerivedStateFromError(error) {
+        return { error };
+      }
+      componentDidCatch(error, info) {
+        console.error('[ErrorBoundary]', error, info);
+      }
+      render() {
+        if (this.state.error) {
+          if (this.props.fallback) {
+            return React.createElement(this.props.fallback, {
+              error: this.state.error,
+              reset: () => this.setState({ error: null })
+            });
+          }
+          return React.createElement('div', { style: { color: 'red', padding: '20px' } },
+            'Error: ' + this.state.error.message
+          );
+        }
+        return this.props.children;
+      }
+    }
+    // Wrapper that provides searchParams/params props and handles errors
+    function PageWrapper({ component: Component, pathname, search }) {
+      const [searchParams, setSearchParams] = React.useState(() => {
+        const url = new URL(window.location.href);
+        return Promise.resolve(Object.fromEntries(url.searchParams));
+      });
+      const [params, setParams] = React.useState(() => Promise.resolve(initialRouteParams));
+      const [isNotFound, setIsNotFound] = React.useState(false);
+      React.useEffect(() => {
+        // Update searchParams when search changes
+        const url = new URL(window.location.href);
+        setSearchParams(Promise.resolve(Object.fromEntries(url.searchParams)));
+      }, [search]);
+      React.useEffect(() => {
+        // Update route params when pathname changes
+        let cancelled = false;
+        extractRouteParams(pathname).then(routeParams => {
+          if (!cancelled) setParams(Promise.resolve(routeParams));
+        });
+        return () => { cancelled = true; };
+      }, [pathname]);
+      if (isNotFound && NotFoundComponent) {
+        return React.createElement(NotFoundComponent);
+      }
+      if (isNotFound) {
+        return React.createElement('div', { style: { padding: '20px', textAlign: 'center' } },
+          React.createElement('h2', null, '404'),
+          React.createElement('p', null, 'This page could not be found.')
+        );
+      }
+      // Render the component via createElement so hooks work correctly
+      try {
+        return React.createElement(Component, { searchParams, params });
+      } catch (e) {
+        if (e && e.message === 'NEXT_NOT_FOUND') {
+          // Will re-render with notFound on next tick
+          if (!isNotFound) setIsNotFound(true);
+          return null;
+        }
+        throw e; // Let ErrorBoundary handle it
+      }
+    }
+    // Router component
+    function Router() {
+      const [Page, setPage] = React.useState(null);
+      const [layouts, setLayouts] = React.useState([]);
+      const [path, setPath] = React.useState(window.location.pathname);
+      const [search, setSearch] = React.useState(window.location.search);
+      React.useEffect(() => {
+        Promise.all([loadPage(path), loadLayouts(path)]).then(([P, L]) => {
+          if (P) setPage(() => P);
+          setLayouts(L);
+        });
+      }, []);
+      React.useEffect(() => {
+        const handleNavigation = async () => {
+          const newPath = window.location.pathname;
+          const newSearch = window.location.search;
+          console.log('[Router] handleNavigation called, newPath:', newPath, 'current path:', path);
+          // Always update search params
+          if (newSearch !== search) {
+            setSearch(newSearch);
+          }
+          if (newPath !== path) {
+            console.log('[Router] Path changed, loading new page...');
+            setPath(newPath);
+            const [P, L, routeParams] = await Promise.all([loadPage(newPath), loadLayouts(newPath), extractRouteParams(newPath)]);
+            window.__NEXT_ROUTE_PARAMS__ = routeParams;
+            console.log('[Router] Page loaded:', !!P, 'Layouts:', L.length);
+            if (P) setPage(() => P);
+            setLayouts(L);
+          } else {
+            console.log('[Router] Path unchanged, skipping navigation');
+          }
+        };
+        window.addEventListener('popstate', handleNavigation);
+        console.log('[Router] Added popstate listener for path:', path);
+        return () => window.removeEventListener('popstate', handleNavigation);
+      }, [path, search]);
+      if (!Page) return null;
+      // Render page via PageWrapper so hooks work correctly
+      // Pass search to force re-render when query params change
+      let content = React.createElement(PageWrapper, { component: Page, pathname: path, search: search });
+      // Wrap with loading.tsx Suspense fallback if it exists
+      if (LoadingComponent) {
+        content = React.createElement(React.Suspense,
+          { fallback: React.createElement(LoadingComponent) },
+          content
+        );
+      }
+      // Wrap with error boundary if error.tsx exists
+      if (ErrorComponent) {
+        content = React.createElement(ErrorBoundary, { fallback: ErrorComponent }, content);
+      }
+      for (let i = layouts.length - 1; i >= 0; i--) {
+        content = React.createElement(layouts[i], null, content);
+      }
+      return content;
+    }
+    // Mark that we've initialized (for testing no-reload)
+    window.__NEXT_INITIALIZED__ = Date.now();
+    ReactDOM.createRoot(document.getElementById('__next')).render(
+      React.createElement(React.StrictMode, null, React.createElement(Router))
+    );
+  </script>
+</body>
+</html>`;
+}
+/**
+ * Generate HTML shell for a Pages Router page
+ */
+export async function generatePageHtml(
+  ctx: HtmlGeneratorContext,
+  pageFile: string,
+  pathname: string
+): Promise<string> {
+  // Use virtual server prefix for all file imports so the service worker can intercept them
+  // Without this, /pages/index.jsx would go to localhost:5173/pages/index.jsx
+  // instead of /__virtual__/3001/pages/index.jsx
+  const virtualPrefix = `/__virtual__/${ctx.port}`;
+  const pageModulePath = virtualPrefix + pageFile; // pageFile already starts with /
+  // Check for global CSS files
+  const globalCssLinks: string[] = [];
+  const cssLocations = ['/styles/globals.css', '/styles/global.css', '/app/globals.css'];
+  for (const cssPath of cssLocations) {
+    if (ctx.exists(cssPath)) {
+      globalCssLinks.push(`<link rel="stylesheet" href="${virtualPrefix}${cssPath}">`);
+    }
+  }
+  // Generate env script for NEXT_PUBLIC_* variables
+  const envScript = ctx.generateEnvScript();
+  // Load Tailwind config if available (must be injected BEFORE CDN script)
+  const tailwindConfigScript = await ctx.loadTailwindConfigIfNeeded();
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <base href="${virtualPrefix}/">
+  <title>Next.js App</title>
+  ${envScript}
+  ${TAILWIND_CDN_SCRIPT}
+  ${tailwindConfigScript}
+  ${CORS_PROXY_SCRIPT}
+  ${globalCssLinks.join('\n  ')}
+  <script type="importmap">
+  {
+    "imports": {
+      "react": "https://esm.sh/react@18.2.0?dev",
+      "react/": "https://esm.sh/react@18.2.0&dev/",
+      "react-dom": "https://esm.sh/react-dom@18.2.0?dev",
+      "react-dom/": "https://esm.sh/react-dom@18.2.0&dev/",
+      "react-dom/client": "https://esm.sh/react-dom@18.2.0/client?dev",
+      "next/link": "${virtualPrefix}/_next/shims/link.js",
+      "next/router": "${virtualPrefix}/_next/shims/router.js",
+      "next/head": "${virtualPrefix}/_next/shims/head.js",
+      "next/navigation": "${virtualPrefix}/_next/shims/navigation.js",
+      "next/image": "${virtualPrefix}/_next/shims/image.js",
+      "next/dynamic": "${virtualPrefix}/_next/shims/dynamic.js",
+      "next/script": "${virtualPrefix}/_next/shims/script.js",
+      "next/font/google": "${virtualPrefix}/_next/shims/font/google.js",
+      "next/font/local": "${virtualPrefix}/_next/shims/font/local.js"
+    }
+  }
+  </script>
+  ${REACT_REFRESH_PREAMBLE}
+  ${HMR_CLIENT_SCRIPT}
+</head>
+<body>
+  <div id="__next"></div>
+  <script type="module">
+    import React from 'react';
+    import ReactDOM from 'react-dom/client';
+    const virtualBase = '${virtualPrefix}';
+    // Convert URL path to page module path
+    function getPageModulePath(pathname) {
+      let route = pathname;
+      if (route.startsWith(virtualBase)) {
+        route = route.slice(virtualBase.length);
+      }
+      route = route.replace(/^\\/+/, '/') || '/';
+      const modulePath = route === '/' ? '/index' : route;
+      return virtualBase + '/_next/pages' + modulePath + '.js';
+    }
+    // Dynamic page loader
+    async function loadPage(pathname) {
+      const modulePath = getPageModulePath(pathname);
+      try {
+        const module = await import(/* @vite-ignore */ modulePath);
+        return module.default;
+      } catch (e) {
+        console.error('[Navigation] Failed to load:', modulePath, e);
+        return null;
+      }
+    }
+    // Router component
+    function Router() {
+      const [Page, setPage] = React.useState(null);
+      const [path, setPath] = React.useState(window.location.pathname);
+      React.useEffect(() => {
+        loadPage(path).then(C => C && setPage(() => C));
+      }, []);
+      React.useEffect(() => {
+        const handleNavigation = async () => {
+          const newPath = window.location.pathname;
+          if (newPath !== path) {
+            setPath(newPath);
+            const C = await loadPage(newPath);
+            if (C) setPage(() => C);
+          }
+        };
+        window.addEventListener('popstate', handleNavigation);
+        return () => window.removeEventListener('popstate', handleNavigation);
+      }, [path]);
+      if (!Page) return null;
+      return React.createElement(Page);
+    }
+    // Mark that we've initialized (for testing no-reload)
+    window.__NEXT_INITIALIZED__ = Date.now();
+    ReactDOM.createRoot(document.getElementById('__next')).render(
+      React.createElement(React.StrictMode, null, React.createElement(Router))
+    );
+  </script>
+</body>
+</html>`;
+}
+/**
+ * Serve a basic 404 page
+ */
+export function serve404Page(port: number): ResponseData {
+  const virtualPrefix = `/__virtual__/${port}`;
+  const html = `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <base href="${virtualPrefix}/">
+  <title>404 - Page Not Found</title>
+  <style>
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      min-height: 100vh;
+      margin: 0;
+      background: #fafafa;
+    }
+    h1 { font-size: 48px; margin: 0; }
+    p { color: #666; margin-top: 10px; }
+    a { color: #0070f3; text-decoration: none; }
+    a:hover { text-decoration: underline; }
+  </style>
+</head>
+<body>
+  <h1>404</h1>
+  <p>This page could not be found.</p>
+  <p><a href="/">Go back home</a></p>
+</body>
+</html>`;
+  const buffer = Buffer.from(html);
+  return {
+    statusCode: 404,
+    statusMessage: 'Not Found',
+    headers: {
+      'Content-Type': 'text/html; charset=utf-8',
+      'Content-Length': String(buffer.length),
+    },
+    body: buffer,
+  };
+}