fix(runtime): honor render fps when seeking (#1739)

packages/engine/src/services/frameCapture.test.ts

@@ -1,6 +1,7 @@
 import { describe, it, expect } from "vitest";
 import {
   formatHttpErrorDiagnostic,
+  formatConsoleDiagnostic,
   formatNavigationFailureDiagnostic,
   formatNavigationStartDiagnostic,
   formatRequestFailureDiagnostic,
@@ -118,6 +119,37 @@ describe("isFontResourceError", () => {
   });
 });
 
+describe("formatConsoleDiagnostic", () => {
+  it("surfaces HyperFrames page logs with a dedicated host prefix", () => {
+    expect(
+      formatConsoleDiagnostic("info", "[hyperframes] render runtime fps JSHandle@object", ""),
+    ).toEqual({
+      text: "[HyperFrames] render runtime fps JSHandle@object",
+      suppressHostLog: false,
+    });
+  });
+
+  it("keeps font load errors in diagnostics but suppresses host log noise", () => {
+    expect(
+      formatConsoleDiagnostic(
+        "error",
+        "Failed to load resource: net::ERR_FAILED",
+        "https://fonts.googleapis.com/css2?family=Inter",
+      ),
+    ).toEqual({
+      text: "[Browser] Failed to load resource: net::ERR_FAILED",
+      suppressHostLog: true,
+    });
+  });
+
+  it("preserves existing browser prefixes for generic logs", () => {
+    expect(formatConsoleDiagnostic("warn", "careful", "")).toEqual({
+      text: "[Browser:WARN] careful",
+      suppressHostLog: false,
+    });
+  });
+});
+
 describe("navigation diagnostics", () => {
   it("redacts credentials, query strings, and fragments from diagnostic URLs", () => {
     expect(

packages/engine/src/services/frameCapture.ts

@@ -506,6 +506,36 @@ export function isFontResourceError(type: string, text: string, locationUrl: str
   );
 }
 
+export function formatConsoleDiagnostic(
+  type: string,
+  text: string,
+  locationUrl: string,
+): { text: string; suppressHostLog: boolean } {
+  const isFontLoadError = isFontResourceError(type, text, locationUrl);
+  if (isFontLoadError) return { text: `[Browser] ${text}`, suppressHostLog: true };
+
+  if (text.startsWith("[hyperframes]")) {
+    return {
+      text: `[HyperFrames] ${text.slice("[hyperframes]".length).trim()}`,
+      suppressHostLog: false,
+    };
+  }
+
+  // Other "Failed to load resource" 404s are typically non-blocking (e.g.
+  // favicon, sourcemaps, optional assets). Prefix them so users know they
+  // are harmless and don't confuse them with real render errors.
+  const isResourceLoadError = type === "error" && text.startsWith("Failed to load resource");
+  const prefix = isResourceLoadError
+    ? "[non-blocking]"
+    : type === "error"
+      ? "[Browser:ERROR]"
+      : type === "warn"
+        ? "[Browser:WARN]"
+        : "[Browser]";
+
+  return { text: `${prefix} ${text}`, suppressHostLog: false };
+}
+
 async function pollPageExpression(
   page: Page,
   expression: string,
@@ -866,32 +896,15 @@ async function waitForOptionalTailwindReady(page: Page, timeoutMs: number): Prom
 export async function initializeSession(session: CaptureSession): Promise<void> {
   const { page, serverUrl } = session;
 
-  // Forward browser console to host with [Browser] prefix
-  // fallow-ignore-next-line complexity
+  // Forward browser console to host. HyperFrames runtime logs get a dedicated
+  // prefix so page-context observability is visible in producer stdout.
   page.on("console", (msg: ConsoleMessage) => {
     const type = msg.type();
     const text = msg.text();
     const locationUrl = msg.location()?.url ?? "";
-    const isFontLoadError = isFontResourceError(type, text, locationUrl);
-
-    // Other "Failed to load resource" 404s are typically non-blocking (e.g.
-    // favicon, sourcemaps, optional assets). Prefix them so users know they
-    // are harmless and don't confuse them with real render errors.
-    const isResourceLoadError =
-      type === "error" && text.startsWith("Failed to load resource") && !isFontLoadError;
-
-    const prefix = isResourceLoadError
-      ? "[non-blocking]"
-      : type === "error"
-        ? "[Browser:ERROR]"
-        : type === "warn"
-          ? "[Browser:WARN]"
-          : "[Browser]";
-    if (!isFontLoadError) {
-      console.log(`${prefix} ${text}`);
-    }
-
-    appendBrowserDiagnostic(session, `${prefix} ${text}`);
+    const diagnostic = formatConsoleDiagnostic(type, text, locationUrl);
+    if (!diagnostic.suppressHostLog) console.log(diagnostic.text);
+    appendBrowserDiagnostic(session, diagnostic.text);
   });
 
   page.on("pageerror", (err) => {