feat(mcp): emit navigation, coalesced inputs, console.error

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: Ripwords

apps/dashboard/server/mcp/__fixtures__/checkout-error.json

@@ -0,0 +1,76 @@
+{
+  "events": [
+    {
+      "type": 4,
+      "timestamp": 1700000000000,
+      "data": { "href": "https://example.com/checkout?cart=abc-123", "width": 1440, "height": 900 }
+    },
+    {
+      "type": 2,
+      "timestamp": 1700000000010,
+      "data": {
+        "node": {
+          "id": 1,
+          "type": 2,
+          "tagName": "html",
+          "attributes": {},
+          "childNodes": [
+            {
+              "id": 2,
+              "type": 2,
+              "tagName": "body",
+              "attributes": {},
+              "childNodes": [
+                {
+                  "id": 10,
+                  "type": 2,
+                  "tagName": "input",
+                  "attributes": { "name": "email" },
+                  "childNodes": []
+                },
+                {
+                  "id": 11,
+                  "type": 2,
+                  "tagName": "input",
+                  "attributes": { "name": "cardNumber" },
+                  "childNodes": []
+                },
+                {
+                  "id": 12,
+                  "type": 2,
+                  "tagName": "button",
+                  "attributes": { "type": "submit" },
+                  "childNodes": [{ "id": 13, "type": 3, "textContent": "Pay $49.99" }]
+                }
+              ]
+            }
+          ]
+        }
+      }
+    },
+    {
+      "type": 3,
+      "timestamp": 1700000002100,
+      "data": { "source": 5, "id": 10, "text": "alice@example.com" }
+    },
+    { "type": 3, "timestamp": 1700000003400, "data": { "source": 5, "id": 11, "text": "•••" } },
+    { "type": 3, "timestamp": 1700000004900, "data": { "source": 2, "type": 2, "id": 12 } },
+    {
+      "type": 6,
+      "timestamp": 1700000005800,
+      "data": {
+        "plugin": "rrweb/console@1",
+        "payload": {
+          "level": "error",
+          "trace": [],
+          "payload": ["TypeError: Cannot read properties of undefined (reading 'token')"]
+        }
+      }
+    },
+    {
+      "type": 4,
+      "timestamp": 1700000006000,
+      "data": { "href": "https://example.com/checkout/error", "width": 1440, "height": 900 }
+    }
+  ]
+}

apps/dashboard/server/mcp/replay-transcript.test.ts

@@ -16,4 +16,15 @@ describe("buildReplayTranscript", () => {
     expect(out.transcript).toContain("<unknown element")
     expect(out.eventCount).toBe(fixture.events.length)
   })
+
+  it("emits navigation, masked-stays-masked typing, click, and console.error", async () => {
+    const fixture = await Bun.file(`${import.meta.dir}/__fixtures__/checkout-error.json`).json()
+    const out = buildReplayTranscript(fixture.events, { verbosity: "summary" })
+    expect(out.transcript).toContain("loaded /checkout?cart=abc-123")
+    expect(out.transcript).toContain('typed "alice@example.com" into input[name="email"]')
+    expect(out.transcript).toContain('typed "•••" into input[name="cardNumber"]')
+    expect(out.transcript).toContain('click button[type="submit"]')
+    expect(out.transcript).toContain("console.error")
+    expect(out.transcript).toContain("loaded /checkout/error")
+  })
 })

apps/dashboard/server/mcp/replay-transcript.ts

@@ -113,6 +113,15 @@ function collectInnerText(id: number, dom: Map<number, NodeMeta>): string {
   return out
 }
 
+function pathFromHref(href: string): string {
+  try {
+    const u = new URL(href)
+    return `${u.pathname}${u.search}`
+  } catch {
+    return href
+  }
+}
+
 export function buildReplayTranscript(
   events: RrwebEvent[],
   opts: BuildReplayTranscriptOptions,
@@ -137,14 +146,62 @@ export function buildReplayTranscript(
   const endTs = events[events.length - 1]!.timestamp
   const lines: string[] = []
 
+  type InputBuffer = { id: number; value: string; firstTs: number }
+  let pendingInput: InputBuffer | null = null
+
+  function flushInput(): void {
+    if (!pendingInput) return
+    const t = ((pendingInput.firstTs - startTs) / 1000).toFixed(1)
+    lines.push(
+      `[+${t}s] typed "${pendingInput.value}" into ${resolveSelector(pendingInput.id, dom)}`,
+    )
+    pendingInput = null
+  }
+
   for (const e of events) {
-    if (e.type === 3 && (e.data as { source?: number }).source === 2) {
+    const t = ((e.timestamp - startTs) / 1000).toFixed(1)
+    // 4 = Meta (navigation / page load)
+    if (e.type === 4) {
+      flushInput()
+      const href = (e.data as { href?: string }).href ?? ""
+      lines.push(`[+${t}s] loaded ${pathFromHref(href)}`)
+      continue
+    }
+    // 6 = Plugin (console capture lives here in rrweb)
+    if (e.type === 6) {
+      const payload = e.data as {
+        plugin?: string
+        payload?: { level?: string; payload?: unknown[] }
+      }
+      if (payload.plugin?.startsWith("rrweb/console") && payload.payload?.level === "error") {
+        flushInput()
+        const msg = (payload.payload.payload ?? []).map((p) => String(p)).join(" ")
+        lines.push(`[+${t}s] console.error ${msg}`)
+      }
+      continue
+    }
+    if (e.type !== 3) continue
+    const source = (e.data as { source?: number }).source
+    // 2 = MouseInteraction
+    if (source === 2) {
       const id = (e.data as { id?: number }).id
       if (typeof id !== "number") continue
-      const t = ((e.timestamp - startTs) / 1000).toFixed(1)
+      flushInput()
       lines.push(`[+${t}s] click ${resolveSelector(id, dom)}`)
+      continue
+    }
+    // 5 = Input
+    if (source === 5) {
+      const id = (e.data as { id?: number }).id
+      const text = (e.data as { text?: string }).text ?? ""
+      if (typeof id !== "number") continue
+      if (pendingInput && pendingInput.id !== id) flushInput()
+      if (!pendingInput) pendingInput = { id, value: text, firstTs: e.timestamp }
+      else pendingInput.value = text
+      continue
     }
   }
+  flushInput()
 
   const transcript =
     `Replay (${((endTs - startTs) / 1000).toFixed(1)}s, ${events.length} events)\n\n` +