@shopify/cli-hydrogen 7.1.2 → 8.0.1

package/dist/lib/flags.js

@@ -3,11 +3,10 @@ import { camelize } from '@shopify/cli-kit/common/string';
 import { renderInfo } from '@shopify/cli-kit/node/ui';
 import { normalizeStoreFqdn } from '@shopify/cli-kit/node/context/fqdn';
 import colors from '@shopify/cli-kit/node/colors';
-import { STYLING_CHOICES } from './setups/css/index.js';
 import { I18N_CHOICES } from './setups/i18n/index.js';
-import { DEFAULT_INSPECTOR_PORT } from './mini-oxygen/common.js';
 
-const DEFAULT_PORT = 3e3;
+const DEFAULT_APP_PORT = 3e3;
+const DEFAULT_INSPECTOR_PORT = 9229;
 const commonFlags = {
   path: {
     path: Flags.string({
@@ -17,9 +16,8 @@ const commonFlags = {
   },
   port: {
     port: Flags.integer({
-      description: `The port to run the server on. Defaults to ${DEFAULT_PORT}.`,
-      env: "SHOPIFY_HYDROGEN_FLAG_PORT",
-      default: DEFAULT_PORT
+      description: `The port to run the server on. Defaults to ${DEFAULT_APP_PORT}.`,
+      env: "SHOPIFY_HYDROGEN_FLAG_PORT"
     })
   },
   legacyRuntime: {
@@ -50,17 +48,23 @@ const commonFlags = {
       allowNo: true
     })
   },
+  env: {
+    env: Flags.string({
+      description: "Specifies the environment to perform the operation using its handle. Fetch the handle using the `env list` command.",
+      exclusive: ["env-branch"]
+    })
+  },
+  /**
+   * @deprecated use `env` instead.
+   */
   envBranch: {
     "env-branch": Flags.string({
-      description: "Specifies the environment to pull variables from using its Git branch name.",
+      description: "Specifies the environment to perform the operation using its Git branch name.",
       env: "SHOPIFY_HYDROGEN_ENVIRONMENT_BRANCH",
-      char: "e"
-    })
-  },
-  env: {
-    env: Flags.string({
-      description: "Specifies an environment's name when using remote environment variables.",
-      env: "SHOPIFY_HYDROGEN_ENVIRONMENT_NAME"
+      deprecated: {
+        to: "env",
+        message: "--env-branch is deprecated. Use --env instead."
+      }
     })
   },
   sourcemap: {
@@ -83,15 +87,6 @@ const commonFlags = {
       dependsOn: ["codegen"]
     })
   },
-  styling: {
-    styling: Flags.string({
-      description: `Sets the styling strategy to use. One of ${STYLING_CHOICES.map(
-        (item) => `\`${item}\``
-      ).join(", ")}.`,
-      choices: STYLING_CHOICES,
-      env: "SHOPIFY_HYDROGEN_FLAG_STYLING"
-    })
-  },
   markets: {
     markets: Flags.string({
       description: `Sets the URL structure to support multiple markets. Must be one of: ${I18N_CHOICES.map(
@@ -118,8 +113,7 @@ const commonFlags = {
   inspectorPort: {
     "inspector-port": Flags.integer({
       description: `The port where the inspector is available. Defaults to ${DEFAULT_INSPECTOR_PORT}.`,
-      env: "SHOPIFY_HYDROGEN_FLAG_INSPECTOR_PORT",
-      default: DEFAULT_INSPECTOR_PORT
+      env: "SHOPIFY_HYDROGEN_FLAG_INSPECTOR_PORT"
     })
   },
   diff: {
@@ -149,6 +143,23 @@ const commonFlags = {
       description: "Disables any warnings about missing standard routes.",
       env: "SHOPIFY_HYDROGEN_FLAG_DISABLE_ROUTE_WARNING"
     })
+  },
+  customerAccountPush: {
+    "customer-account-push__unstable": Flags.boolean({
+      hidden: true,
+      description: "Use tunneling for local development and push the tunneling domain to admin. Required to use Customer Account API's Oauth flow",
+      required: false,
+      default: false,
+      env: "SHOPIFY_HYDROGEN_FLAG_CUSTOMER_ACCOUNT_PUSH"
+    })
+  },
+  verbose: {
+    verbose: Flags.boolean({
+      description: "Outputs more information about the command's execution.",
+      required: false,
+      default: false,
+      env: "SHOPIFY_HYDROGEN_FLAG_VERBOSE"
+    })
   }
 };
 function flagsToCamelObject(obj) {
@@ -202,4 +213,4 @@ function overrideFlag(flags, extra) {
   );
 }
 
-export { DEFAULT_PORT, commonFlags, deprecated, flagsToCamelObject, overrideFlag, parseProcessFlags };
+export { DEFAULT_APP_PORT, DEFAULT_INSPECTOR_PORT, commonFlags, deprecated, flagsToCamelObject, overrideFlag, parseProcessFlags };

package/dist/lib/get-oxygen-deployment-data.js

@@ -1,10 +1,9 @@
-import { renderConfirmationPrompt } from '@shopify/cli-kit/node/ui';
 import { outputWarn } from '@shopify/cli-kit/node/output';
-import { linkStorefront } from '../commands/hydrogen/link.js';
 import { login } from './auth.js';
 import { getCliCommand } from './shell.js';
-import { renderMissingLink, renderMissingStorefront } from './render-errors.js';
+import { renderMissingStorefront } from './render-errors.js';
 import { getOxygenData } from './graphql/admin/get-oxygen-data.js';
+import { verifyLinkedStorefront } from './verify-linked-storefront.js';
 
 async function getOxygenDeploymentData({
   root
@@ -13,21 +12,15 @@ async function getOxygenDeploymentData({
     login(root),
     getCliCommand()
   ]);
-  if (!config.storefront?.id) {
-    renderMissingLink({ session, cliCommand });
-    const runLink = await renderConfirmationPrompt({
-      message: ["Run", { command: `${cliCommand} link` }]
-    });
-    if (!runLink) {
-      return;
-    }
-    config.storefront = await linkStorefront(root, session, config, {
-      cliCommand
-    });
-  }
-  if (!config.storefront) {
+  const linkedStorefront = await verifyLinkedStorefront({
+    root,
+    session,
+    config,
+    cliCommand
+  });
+  if (!linkedStorefront)
     return;
-  }
+  config.storefront = linkedStorefront;
   const { storefront } = await getOxygenData(session, config.storefront.id);
   if (!storefront) {
     renderMissingStorefront({

package/dist/lib/graphql/admin/customer-application-update.js

@@ -0,0 +1,29 @@
+import { adminRequest } from './client.js';
+
+const CUSTOMER_APPLICATION_URLS_REPLACE = `#graphql
+  mutation CustomerApplicationUrlsReplace($storefrontId: ID!, $urlsReplaceInput: HydrogenStorefrontCustomerApplicationUrlsReplaceInput!) {
+    hydrogenStorefrontCustomerApplicationUrlsReplace(
+      storefrontId: $storefrontId,
+      urlsReplaceInput: $urlsReplaceInput,
+    ) {
+      success
+      userErrors {
+        code
+        field
+        message
+      }
+    }
+  }
+`;
+async function replaceCustomerApplicationUrls(adminSession, storefrontId, urlsReplaceInput) {
+  const {
+    hydrogenStorefrontCustomerApplicationUrlsReplace: { success, userErrors }
+  } = await adminRequest(
+    CUSTOMER_APPLICATION_URLS_REPLACE,
+    adminSession,
+    { storefrontId, urlsReplaceInput }
+  );
+  return { success, userErrors };
+}
+
+export { CUSTOMER_APPLICATION_URLS_REPLACE, replaceCustomerApplicationUrls };

package/dist/lib/graphql/admin/get-oxygen-data.js

@@ -6,6 +6,7 @@ const GetDeploymentDataQuery = `#graphql
       oxygenDeploymentToken
       environments {
         name
+        handle
         branch
         type
       }

package/dist/lib/graphql/admin/list-environments.js

@@ -10,6 +10,7 @@ const ListEnvironmentsQuery = `#graphql
         createdAt
         id
         name
+        handle
         type
         url
       }

package/dist/lib/graphql/admin/pull-variables.js

@@ -1,10 +1,10 @@
 import { adminRequest } from './client.js';
 
 const PullVariablesQuery = `#graphql
-  query PullVariables($id: ID!, $branch: String) {
+  query PullVariables($id: ID!, $handle: String) {
     hydrogenStorefront(id: $id) {
       id
-      environmentVariables(branchName: $branch) {
+      environmentVariables(handle: $handle) {
         id
         isSecret
         readOnly
@@ -14,13 +14,13 @@ const PullVariablesQuery = `#graphql
     }
   }
 `;
-async function getStorefrontEnvVariables(adminSession, storefrontId, envBranch) {
+async function getStorefrontEnvVariables(adminSession, storefrontId, envHandle) {
   const { hydrogenStorefront } = await adminRequest(
     PullVariablesQuery,
     adminSession,
     {
       id: storefrontId,
-      branch: envBranch
+      handle: envHandle
     }
   );
   return hydrogenStorefront;

package/dist/lib/graphql/admin/test-helper.js

@@ -0,0 +1,37 @@
+function dummyListEnvironments(storefrontId) {
+  return {
+    id: storefrontId,
+    productionUrl: "https://my-shop.myshopify.com",
+    environments: [
+      {
+        id: "gid://shopify/HydrogenStorefrontEnvironment/1",
+        branch: "main",
+        type: "PRODUCTION",
+        name: "Production",
+        handle: "production",
+        createdAt: "2023-02-16T22:35:42Z",
+        url: "https://oxygen-123.example.com"
+      },
+      {
+        id: "gid://shopify/HydrogenStorefrontEnvironment/2",
+        branch: null,
+        type: "PREVIEW",
+        name: "Preview",
+        handle: "preview",
+        createdAt: "2023-02-16T22:35:42Z",
+        url: null
+      },
+      {
+        id: "gid://shopify/HydrogenStorefrontEnvironment/3",
+        branch: "staging",
+        type: "CUSTOM",
+        name: "Staging",
+        handle: "staging",
+        createdAt: "2023-05-08T20:52:29Z",
+        url: "https://oxygen-456.example.com"
+      }
+    ]
+  };
+}
+
+export { dummyListEnvironments };

package/dist/lib/log.js

@@ -34,16 +34,19 @@ function debounceMessage(args, debounceFor) {
 }
 function warningDebouncer([first]) {
   return typeof first === "string" && // Show these warnings only once.
-  (first.includes("[h2:warn:createStorefrontClient]") || first.includes("[h2:warn:createCustomerAccountClient]")) ? true : void 0;
+  /\[h2:(warn|info):(createStorefrontClient|createCustomerAccountClient)\]/.test(
+    first
+  ) ? true : void 0;
 }
 function injectLogReplacer(method, debouncer) {
   if (!methodsReplaced.has(method)) {
     methodsReplaced.add(method);
     console[method] = (...args) => {
-      if (debounceMessage(args, debouncer?.(args)))
+      if (debouncer !== false && debounceMessage(args, debouncer?.(args))) {
         return;
+      }
       const replacers = messageReplacers.reduce((acc, [matcher, replacer]) => {
-        if (matcher(args))
+        if (matcher(args, acc.length))
           acc.push(replacer);
         return acc;
       }, []);
@@ -62,6 +65,7 @@ function muteDevLogs({ workerReload } = {}) {
   injectLogReplacer("log");
   injectLogReplacer("error");
   injectLogReplacer("warn", warningDebouncer);
+  injectLogReplacer("debug", false);
   let isFirstWorkerReload = true;
   addMessageReplacers("dev-node", [
     ([first]) => typeof first === "string" && first.includes("[mf:"),
@@ -114,6 +118,60 @@ function muteDevLogs({ workerReload } = {}) {
       }
     ]
   );
+  let isLastLineBlank = false;
+  let isLastLineRequestLog = false;
+  addMessageReplacers(
+    "dev-vite",
+    // Vite logs
+    [
+      // This log must come from Rollup and does not go through Vite's customLogger
+      ([first]) => typeof first === "string" && /^Sourcemap for .*@remix-run/i.test(first),
+      () => {
+      }
+    ],
+    [
+      // Log generated from Workerd HMR connection to Vite
+      ([first]) => typeof first === "string" && /^\[vite\] (connected|program reload)/i.test(first),
+      () => {
+      }
+    ],
+    [
+      // Log that gets entangled with our initial dev logs
+      ([first]) => typeof first === "string" && /^Re-optimizing dependencies because/i.test(first),
+      () => {
+      }
+    ],
+    [
+      // This error is fixed in new Remix versions:
+      // https://github.com/remix-run/remix/pull/9194
+      ([first]) => {
+        const message = first?.message ?? first;
+        return /virtual-routes/.test(message) && /(Failed to load url|Could not resolve module for file)/i.test(
+          message
+        );
+      },
+      () => {
+      }
+    ],
+    [
+      // Log new lines between Request logs and other logs
+      ([first], existingMatches) => {
+        if (existingMatches === 0 && typeof first === "string") {
+          const isRequestLog = /^\s+[A-Z]+\s+\d{3}\s+[a-z]+\s+\//.test(
+            // Clear ANSI colors before matching
+            first.replace(/\u001b\[.*?m/g, "")
+          );
+          if (!isLastLineBlank && (isRequestLog && !isLastLineRequestLog || !isRequestLog && isLastLineRequestLog)) {
+            process.stdout.write("\n");
+          }
+          isLastLineRequestLog = isRequestLog;
+          isLastLineBlank = /\n$/.test(first);
+        }
+        return false;
+      },
+      (params) => params
+    ]
+  );
 }
 const originalWrite = process.stdout.write;
 function muteAuthLogs({
@@ -126,7 +184,7 @@ function muteAuthLogs({
       if (typeof item !== "string")
         return write(item, cb);
       const replacers = messageReplacers.reduce((acc, [matcher, replacer]) => {
-        if (matcher([item]))
+        if (matcher([item], acc.length))
           acc.push(replacer);
         return acc;
       }, []);
@@ -175,6 +233,7 @@ function enhanceH2Logs(options) {
   injectLogReplacer("error");
   injectLogReplacer("warn", warningDebouncer);
   injectLogReplacer("log", warningDebouncer);
+  injectLogReplacer("info", warningDebouncer);
   addMessageReplacers("h2-warn", [
     ([first]) => {
       const message = first?.message ?? first;
@@ -183,7 +242,10 @@ function enhanceH2Logs(options) {
     (args) => {
       const firstArg = args[0];
       const errorObject = typeof firstArg === "object" && !!firstArg.stack ? firstArg : void 0;
-      const stringArg = errorObject?.message ?? firstArg;
+      let stringArg = errorObject?.message ?? firstArg;
+      if (stringArg.startsWith("[h2:info:createStorefrontClient]") && stringArg.includes("defaulting to mock.shop")) {
+        stringArg += "\nRun `h2 link` to link your store.";
+      }
       const [, type, scope, message] = stringArg.match(/\[h2:([^:]+):([^\]]+)\]\s+(.*)$/ims) || [];
       if (!type || !scope || !message)
         return args;
@@ -191,9 +253,15 @@ function enhanceH2Logs(options) {
 
 `;
       const lines = message.split("\n");
-      const lastLine = lines.at(-1) ?? "";
+      let lastLine = lines.at(-1) ?? "";
       const hasLinks = /https?:\/\//.test(lastLine);
       const hasCommands = /`h2 [^`]+`/.test(lastLine);
+      if (hasCommands && lastLine) {
+        lastLine = lastLine.replace(
+          /`(h2) ([^`]+)`/g,
+          colors.magentaBright(`\`${options.cliCommand ?? "$1"} $2\``)
+        );
+      }
       if (hasLinks || hasCommands)
         lines.pop();
       if (type === "error" || errorObject) {
@@ -248,12 +316,7 @@ function enhanceH2Logs(options) {
       render({
         body: headline + colors.bold(lines.join("\n")),
         reference,
-        nextSteps: hasCommands ? [
-          lastLine.replace(
-            /`h2 [^`]+`/g,
-            (cmd) => colors.bold(colors.yellow(cmd))
-          )
-        ] : void 0
+        nextSteps: hasCommands ? [lastLine] : void 0
       });
       return;
     }
@@ -298,5 +361,15 @@ async function muteRemixLogs() {
   } catch {
   }
 }
+function setH2OVerbose() {
+  if (!process.env.DEBUG || process.env.DEBUG === "*") {
+    process.env.DEBUG = "h2:*,o2:*";
+  } else {
+    process.env.DEBUG += ",h2:*,o2:*";
+  }
+}
+function isH2Verbose() {
+  return !!(process.env.DEBUG === "*" || process.env.DEBUG?.includes("h2:*"));
+}
 
-export { addMessageReplacers, createRemixLogger, enhanceH2Logs, muteAuthLogs, muteDevLogs, muteRemixLogs, resetAllLogs, warnOnce };
+export { addMessageReplacers, createRemixLogger, enhanceH2Logs, isH2Verbose, muteAuthLogs, muteDevLogs, muteRemixLogs, resetAllLogs, setH2OVerbose, warnOnce };

package/dist/lib/mini-oxygen/common.js

@@ -1,16 +1,24 @@
 import { outputToken, outputInfo, outputContent } from '@shopify/cli-kit/node/output';
 import colors from '@shopify/cli-kit/node/colors';
 import { DEV_ROUTES } from '../request-events.js';
+import { AbortError } from '@shopify/cli-kit/node/error';
 
 const DEFAULT_INSPECTOR_PORT = 9229;
 const SUBREQUEST_PROFILER_ENDPOINT = "/debug-network-server";
-function logRequestLine(request, {
-  responseStatus = 200,
-  durationMs = 0
-} = {}) {
+function handleMiniOxygenImportFail() {
+  throw new AbortError(
+    "Could not load MiniOxygen.",
+    "Please make sure you have `@shopify/mini-oxygen` installed."
+  );
+}
+function logRequestLine({
+  request,
+  response,
+  meta
+}) {
   try {
     const url = new URL(request.url);
-    if (DEV_ROUTES.has(url.pathname))
+    if (DEV_ROUTES.has(url.pathname) || url.pathname === "/favicon.ico")
       return;
     const isDataRequest = url.searchParams.has("_data");
     let route = request.url.replace(url.origin, "");
@@ -22,39 +30,17 @@ function logRequestLine(request, {
       route = url.pathname;
       info = `[${dataParam}]`;
     }
-    const colorizeStatus = responseStatus < 300 ? outputToken.green : responseStatus < 400 ? outputToken.cyan : outputToken.errorText;
+    const colorizeStatus = response.status < 300 ? outputToken.green : response.status < 400 ? outputToken.cyan : outputToken.errorText;
     outputInfo(
       outputContent`${request.method.padStart(6)}  ${colorizeStatus(
-        String(responseStatus)
-      )}  ${outputToken.italic(type.padEnd(7, " "))} ${route} ${durationMs > 0 ? colors.dim(` ${durationMs}ms`) : ""}${info ? "  " + colors.dim(info) : ""}${request.headers.get("purpose") === "prefetch" ? outputToken.italic(colors.dim("  prefetch")) : ""}`
+        String(response.status)
+      )}  ${outputToken.italic(type.padEnd(7, " "))} ${route} ${meta.durationMs > 0 ? colors.dim(` ${meta.durationMs}ms`) : ""}${info ? "  " + colors.dim(info) : ""}${request.headers["purpose"] === "prefetch" ? outputToken.italic(colors.dim("  prefetch")) : ""}`
     );
   } catch {
-    if (request && responseStatus) {
-      outputInfo(`${request.method} ${responseStatus} ${request.url}`);
+    if (request && response?.status) {
+      outputInfo(`${request.method} ${response.status} ${request.url}`);
     }
   }
 }
-const OXYGEN_HEADERS_MAP = {
-  ip: { name: "oxygen-buyer-ip", defaultValue: "127.0.0.1" },
-  longitude: { name: "oxygen-buyer-longitude", defaultValue: "-122.40140" },
-  latitude: { name: "oxygen-buyer-latitude", defaultValue: "37.78855" },
-  continent: { name: "oxygen-buyer-continent", defaultValue: "NA" },
-  country: { name: "oxygen-buyer-country", defaultValue: "US" },
-  region: { name: "oxygen-buyer-region", defaultValue: "California" },
-  regionCode: { name: "oxygen-buyer-region-code", defaultValue: "CA" },
-  city: { name: "oxygen-buyer-city", defaultValue: "San Francisco" },
-  isEuCountry: { name: "oxygen-buyer-is-eu-country", defaultValue: "" },
-  timezone: {
-    name: "oxygen-buyer-timezone",
-    defaultValue: "America/Los_Angeles"
-  },
-  // Not documented but available in Oxygen:
-  deploymentId: { name: "oxygen-buyer-deployment-id", defaultValue: "local" },
-  shopId: { name: "oxygen-buyer-shop-id", defaultValue: "development" },
-  storefrontId: {
-    name: "oxygen-buyer-storefront-id",
-    defaultValue: "development"
-  }
-};
 
-export { DEFAULT_INSPECTOR_PORT, OXYGEN_HEADERS_MAP, SUBREQUEST_PROFILER_ENDPOINT, logRequestLine };
+export { DEFAULT_INSPECTOR_PORT, SUBREQUEST_PROFILER_ENDPOINT, handleMiniOxygenImportFail, logRequestLine };

package/dist/lib/mini-oxygen/index.js

@@ -1,6 +1,10 @@
+import { handleMiniOxygenImportFail } from './common.js';
 export { DEFAULT_INSPECTOR_PORT } from './common.js';
-export { buildAssetsUrl } from './assets.js';
 
+async function buildAssetsUrl(port) {
+  const { buildAssetsUrl: _buildAssetsUrl } = await import('@shopify/mini-oxygen').catch(handleMiniOxygenImportFail);
+  return _buildAssetsUrl(port);
+}
 async function startMiniOxygen(options, useNodeRuntime = false) {
   if (useNodeRuntime) {
     process.env.MINIFLARE_SUBREQUEST_LIMIT = 100;
@@ -11,4 +15,4 @@ async function startMiniOxygen(options, useNodeRuntime = false) {
   return startWorkerdServer(options);
 }
 
-export { startMiniOxygen };
+export { buildAssetsUrl, startMiniOxygen };

package/dist/lib/mini-oxygen/node.js

@@ -1,14 +1,16 @@
-import { randomUUID } from 'node:crypto';
 import { AsyncLocalStorage } from 'node:async_hooks';
 import { readFile } from '@shopify/cli-kit/node/fs';
 import { renderSuccess } from '@shopify/cli-kit/node/ui';
-import { Response, startServer, Request } from '@shopify/mini-oxygen';
-import { DEFAULT_PORT } from '../flags.js';
-import { OXYGEN_HEADERS_MAP, SUBREQUEST_PROFILER_ENDPOINT, logRequestLine } from './common.js';
+import colors from '@shopify/cli-kit/node/colors';
+import { DEFAULT_INSPECTOR_PORT } from '../flags.js';
+import { handleMiniOxygenImportFail, SUBREQUEST_PROFILER_ENDPOINT, logRequestLine } from './common.js';
 import { setConstructors, createLogRequestEvent, handleDebugNetworkRequest, H2O_BINDING_NAME } from '../request-events.js';
+import { findPort } from '../find-port.js';
+import { getUtilityBannerlines } from '../dev-shared.js';
+import { outputNewline } from '@shopify/cli-kit/node/output';
 
 async function startNodeServer({
-  port = DEFAULT_PORT,
+  appPort,
   watch = false,
   buildPathWorkerFile,
   buildPathClient,
@@ -16,11 +18,7 @@ async function startNodeServer({
   debug = false,
   inspectorPort
 }) {
-  const oxygenHeaders = Object.fromEntries(
-    Object.entries(OXYGEN_HEADERS_MAP).map(([key, value]) => {
-      return [key, value.defaultValue];
-    })
-  );
+  const { startServer, Request, Response } = await import('@shopify/mini-oxygen/node').catch(handleMiniOxygenImportFail);
   setConstructors({ Response });
   const logRequestEvent = createLogRequestEvent();
   const asyncLocalStorage = new AsyncLocalStorage();
@@ -38,6 +36,8 @@ async function startNodeServer({
     }
   };
   if (debug) {
+    if (!inspectorPort)
+      inspectorPort = await findPort(DEFAULT_INSPECTOR_PORT);
     (await import('node:inspector')).open(inspectorPort);
   }
   const miniOxygen = await startServer({
@@ -45,7 +45,7 @@ async function startNodeServer({
     workerFile: buildPathWorkerFile,
     assetsDir: buildPathClient,
     publicPath: "",
-    port,
+    port: appPort,
     watch,
     autoReload: watch,
     modules: true,
@@ -56,25 +56,34 @@ async function startNodeServer({
     },
     log: () => {
     },
-    oxygenHeaders,
     async onRequest(request, defaultDispatcher) {
       const url = new URL(request.url);
       if (url.pathname === SUBREQUEST_PROFILER_ENDPOINT) {
         return handleDebugNetworkRequest(request);
       }
-      let requestId = request.headers.get("request-id");
-      if (!requestId) {
-        requestId = randomUUID();
-        request.headers.set("request-id", requestId);
-      }
+      const requestId = request.headers.get("request-id");
       const startTimeMs = Date.now();
       const response = await asyncLocalStorage.run(
         { requestId, purpose: request.headers.get("purpose") },
         () => defaultDispatcher(request)
       );
-      logRequestLine(request, {
-        responseStatus: response.status,
-        durationMs: startTimeMs > 0 ? Date.now() - startTimeMs : 0
+      const endTimeMs = Date.now();
+      logRequestLine({
+        request: {
+          url: request.url,
+          method: request.method,
+          headers: Object.fromEntries(request.headers.entries())
+        },
+        response: {
+          status: response.status,
+          statusText: response.statusText,
+          headers: Object.fromEntries(response.headers.entries())
+        },
+        meta: {
+          startTimeMs,
+          endTimeMs,
+          durationMs: startTimeMs > 0 ? endTimeMs - startTimeMs : 0
+        }
       });
       return response;
     }
@@ -95,20 +104,23 @@ async function startNodeServer({
       await miniOxygen.reload(nextOptions);
     },
     showBanner(options) {
-      console.log("");
+      outputNewline();
+      const customSections = [];
+      if (options?.host) {
+        customSections.push({ body: getUtilityBannerlines(options.host) });
+      }
+      if (debug && inspectorPort) {
+        customSections.push({
+          body: { warn: `Debugger listening on ws://localhost:${inspectorPort}` }
+        });
+      }
       renderSuccess({
         headline: `${options?.headlinePrefix ?? ""}MiniOxygen (Node Sandbox) ${options?.mode ?? "development"} server running.`,
         body: [
-          `View ${options?.appName ?? "Hydrogen"} app: ${listeningAt}`,
-          ...options?.extraLines ?? [],
-          ...debug ? [
-            {
-              warn: `
-
-Debugger listening on ws://localhost:${inspectorPort}`
-            }
-          ] : []
-        ]
+          `View ${options?.appName ? colors.cyan(options?.appName) : "Hydrogen"} app:`,
+          { link: { url: options?.host || listeningAt } }
+        ],
+        customSections
       });
       console.log("");
     },