CLI/MCP calls join the run's distributed-trace ledger

The web app's HttpClient sends a traceparent on its own, but mcporter's
plain fetch does not — so the terminal half of a session was invisible
in traces.json. The MCP surface now wraps the global fetch: every POST
to the target's MCP endpoint gets a minted traceparent (the worker and
DO already join whatever arrives) and lands in the ledger with the
JSON-RPC method or tool name as its label, duration, status, and
source: terminal. traces.json becomes a shared append-merge ledger
(src/trace-harvest.ts) so the browser surface's harvested entries and
the MCP surface's minted ones interleave by wall clock, and the trace
rail tags each row with its window (⌨ terminal / ⊕ browser).

Author: RhysSullivan

e2e/src/scenario.ts

@@ -10,7 +10,14 @@
 // scenario × target matrix) plus whatever artifacts the surfaces produced
 // (browser video/trace/screenshots, terminal casts).
 import { execFileSync } from "node:child_process";
-import { existsSync, mkdirSync, readFileSync, readdirSync, rmSync, writeFileSync } from "node:fs";
+import {
+  existsSync,
+  mkdirSync,
+  readFileSync,
+  readdirSync,
+  rmSync,
+  writeFileSync,
+} from "node:fs";
 import { join } from "node:path";
 import { fileURLToPath } from "node:url";
 
@@ -24,8 +31,23 @@ import { makeApiSurface } from "./surfaces/api";
 import { makeBrowserSurface } from "./surfaces/browser";
 import { makeCliSurface } from "./surfaces/cli";
 import { makeMcpSurface } from "./surfaces/mcp";
-import { completeOAuthConsent, hasOpenCode, makeOpenCodeHome, warmUp } from "./clients/opencode";
-import { Api, Billing, Browser, Cli, Mcp, OpenCode, RunDir, Target, TtlControl } from "./services";
+import {
+  completeOAuthConsent,
+  hasOpenCode,
+  makeOpenCodeHome,
+  warmUp,
+} from "./clients/opencode";
+import {
+  Api,
+  Billing,
+  Browser,
+  Cli,
+  Mcp,
+  OpenCode,
+  RunDir,
+  Target,
+  TtlControl,
+} from "./services";
 import { buildManifest } from "./viewer/manifest";
 
 export const RUNS_DIR = fileURLToPath(new URL("../runs/", import.meta.url));
@@ -41,24 +63,38 @@ export interface ScenarioOptions {
   readonly timeout?: number;
 }
 
-type AllServices = Target | RunDir | Cli | Api | Browser | Mcp | Billing | OpenCode | TtlControl;
+type AllServices =
+  | Target
+  | RunDir
+  | Cli
+  | Api
+  | Browser
+  | Mcp
+  | Billing
+  | OpenCode
+  | TtlControl;
 
 /**
  * What this target on this host can provide. Services beyond the base are
  * conditional, so the claimed type is the full union — yielding an absent
  * one fails with Effect's missing-service defect, which the runner turns
  * into the skip.
  */
-const contextFor = (target: TargetShape, dir: string): Context.Context<AllServices> => {
+const contextFor = (
+  target: TargetShape,
+  dir: string,
+): Context.Context<AllServices> => {
   let context = Context.empty().pipe(
     Context.add(Target, target),
     Context.add(RunDir, dir),
     Context.add(Cli, makeCliSurface()),
   ) as Context.Context<AllServices>;
   const has = target.capabilities.has.bind(target.capabilities);
   if (has("api")) context = Context.add(context, Api, makeApiSurface(target));
-  if (has("browser")) context = Context.add(context, Browser, makeBrowserSurface(dir, target));
-  if (has("mcp-oauth")) context = Context.add(context, Mcp, makeMcpSurface(target));
+  if (has("browser"))
+    context = Context.add(context, Browser, makeBrowserSurface(dir, target));
+  if (has("mcp-oauth"))
+    context = Context.add(context, Mcp, makeMcpSurface(target, dir));
   if (has("billing")) context = Context.add(context, Billing, true);
   if (hasOpenCode()) {
     context = Context.add(context, OpenCode, {
@@ -101,24 +137,32 @@ export const scenario = (
         const endedAt = Date.now();
 
         // Yielding a service this target can't provide is the skip signal.
-        const missing = exit._tag === "Failure" ? missingServices(exit.cause) : [];
+        const missing =
+          exit._tag === "Failure" ? missingServices(exit.cause) : [];
         if (missing.length > 0) {
           rmSync(dir, { recursive: true, force: true });
           mkdirSync(dir, { recursive: true });
           writeFileSync(
             join(dir, "skipped.json"),
-            JSON.stringify({ scenario: name, target: target.name, missing }, null, 1),
+            JSON.stringify(
+              { scenario: name, target: target.name, missing },
+              null,
+              1,
+            ),
           );
           buildManifest(RUNS_DIR);
           return yield* Effect.sync(() =>
             testCtx.skip(`needs ${missing.join(", ")} — not on ${target.name}`),
           );
         }
 
-        const error = exit._tag === "Failure" ? failureMessage(exit.cause) : undefined;
+        const error =
+          exit._tag === "Failure" ? failureMessage(exit.cause) : undefined;
         // The test source is the review artifact — ship this scenario's code
         // (imports + sibling scenarios stripped) alongside the run.
-        const source = testFile ? extractScenarioSource(testFile, name) : undefined;
+        const source = testFile
+          ? extractScenarioSource(testFile, name)
+          : undefined;
         if (source) writeFileSync(join(dir, "test.ts"), source);
         writeFileSync(
           join(dir, "result.json"),
@@ -152,7 +196,10 @@ export const scenario = (
             try {
               execFileSync(
                 "bun",
-                [fileURLToPath(new URL("../scripts/film.ts", import.meta.url)), dir],
+                [
+                  fileURLToPath(new URL("../scripts/film.ts", import.meta.url)),
+                  dir,
+                ],
                 { stdio: "pipe", timeout: 120_000 },
               );
             } catch {
@@ -170,7 +217,9 @@ export const scenario = (
 };
 
 /** Service keys (sans the e2e/ prefix) whose absence caused this failure. */
-const missingServices = (cause: Cause.Cause<unknown>): ReadonlyArray<string> => {
+const missingServices = (
+  cause: Cause.Cause<unknown>,
+): ReadonlyArray<string> => {
   const rendered = String(Cause.squash(cause));
   return [...rendered.matchAll(/Service not found: e2e\/([^\s(]+)/g)]
     .map((match) => match[1] ?? "")
@@ -198,9 +247,15 @@ const captureTestFile = (): string | undefined => {
  * part of understanding the test). Falls back to undefined on any surprise so
  * a parsing edge case can never fail a run.
  */
-const extractScenarioSource = (filePath: string, name: string): string | undefined => {
+const extractScenarioSource = (
+  filePath: string,
+  name: string,
+): string | undefined => {
   try {
-    const source = readFileSync(filePath, "utf8").replace(/^import[\s\S]*?;[^\S\n]*$/gm, "");
+    const source = readFileSync(filePath, "utf8").replace(
+      /^import[\s\S]*?;[^\S\n]*$/gm,
+      "",
+    );
     const needle = "scenario(";
     const blocks: Array<{ start: number; end: number; mine: boolean }> = [];
     let index = 0;
@@ -218,7 +273,11 @@ const extractScenarioSource = (filePath: string, name: string): string | undefin
         }
       }
       if (end === -1) return undefined; // unbalanced — bail to be safe
-      blocks.push({ start: index, end, mine: source.slice(index, end).includes(`"${name}"`) });
+      blocks.push({
+        start: index,
+        end,
+        mine: source.slice(index, end).includes(`"${name}"`),
+      });
       index = end;
     }
     if (!blocks.some((b) => b.mine)) return undefined;

e2e/src/surfaces/browser.ts

@@ -4,14 +4,15 @@
 // everywhere), per-step screenshots, and a failure screenshot. The scenario
 // drives `page` directly; assertions are vitest's job.
 import { execFile } from "node:child_process";
-import { copyFileSync, mkdirSync, rmSync, writeFileSync } from "node:fs";
+import { copyFileSync, mkdirSync, rmSync } from "node:fs";
 import { join } from "node:path";
 import { promisify } from "node:util";
 
 import { Effect } from "effect";
 import { chromium, type Page } from "playwright";
 
 import { markFocus, markNavigation, markRecordingStart } from "../timeline";
+import { appendTraces, type TraceEntry } from "../trace-harvest";
 import type { Identity, Target } from "../target";
 
 export interface BrowserSession {
@@ -92,29 +93,25 @@ export const makeBrowserSurface = (
         // Harvest distributed-trace ids: every app API request carries a W3C
         // traceparent (Effect's HttpClient), and each id names one
         // click→server→DB trace in whatever OTLP store the run exported to
-        // (motel locally). Written to traces.json so the runs viewer can
-        // link a recording to its traces. Duration comes from the
-        // finished/failed event so the viewer can answer "why did that
-        // take so long" without leaving the run page.
-        interface TraceRef {
-          id: string;
-          at: number;
-          url: string;
-          ms?: number;
-          status?: number;
-        }
-        const traceIds: TraceRef[] = [];
-        const inflight = new Map<unknown, TraceRef>();
+        // (motel locally). Appended to traces.json (shared with the MCP
+        // surface's terminal-side entries) so the runs viewer can link a
+        // recording to its traces. Duration comes from the finished/failed
+        // event so the viewer can answer "why did that take so long"
+        // without leaving the run page.
+        const traceIds: Array<TraceEntry & { ms?: number; status?: number }> =
+          [];
+        const inflight = new Map<unknown, (typeof traceIds)[number]>();
         page.on("request", (request) => {
           const traceparent = request.headers()["traceparent"];
           const match = traceparent
             ? /^[0-9a-f]{2}-([0-9a-f]{32})-/.exec(traceparent)
             : null;
           if (match?.[1]) {
-            const entry: TraceRef = {
+            const entry: (typeof traceIds)[number] = {
               id: match[1],
               at: Date.now(),
               url: request.url(),
+              source: "browser",
             };
             traceIds.push(entry);
             inflight.set(request, entry);
@@ -175,12 +172,7 @@ export const makeBrowserSurface = (
         }),
       ({ browser, context, page, videoTmp, traceIds }) =>
         Effect.promise(async () => {
-          if (traceIds.length > 0) {
-            writeFileSync(
-              join(dir, "traces.json"),
-              JSON.stringify(traceIds, null, 1),
-            );
-          }
+          appendTraces(dir, traceIds);
           await context.tracing
             .stop({ path: join(dir, "trace.zip") })
             .catch(() => {});