@awsless/cli 0.1.11 → 0.1.13

package/dist/bin.js

@@ -6,60 +6,39 @@ var __defProp = Object.defineProperty;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-function __accessProp(key) {
-  return this[key];
-}
-var __toESMCache_node;
-var __toESMCache_esm;
 var __toESM = (mod, isNodeMode, target) => {
-  var canCache = mod != null && typeof mod === "object";
-  if (canCache) {
-    var cache = isNodeMode ? __toESMCache_node ??= new WeakMap : __toESMCache_esm ??= new WeakMap;
-    var cached = cache.get(mod);
-    if (cached)
-      return cached;
-  }
   target = mod != null ? __create(__getProtoOf(mod)) : {};
   const to = isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target;
   for (let key of __getOwnPropNames(mod))
     if (!__hasOwnProp.call(to, key))
       __defProp(to, key, {
-        get: __accessProp.bind(mod, key),
+        get: () => mod[key],
         enumerable: true
       });
-  if (canCache)
-    cache.set(mod, to);
   return to;
 };
+var __moduleCache = /* @__PURE__ */ new WeakMap;
 var __toCommonJS = (from) => {
-  var entry = (__moduleCache ??= new WeakMap).get(from), desc;
+  var entry = __moduleCache.get(from), desc;
   if (entry)
     return entry;
   entry = __defProp({}, "__esModule", { value: true });
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (var key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(entry, key))
-        __defProp(entry, key, {
-          get: __accessProp.bind(from, key),
-          enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
-        });
-  }
+  if (from && typeof from === "object" || typeof from === "function")
+    __getOwnPropNames(from).map((key) => !__hasOwnProp.call(entry, key) && __defProp(entry, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    }));
   __moduleCache.set(from, entry);
   return entry;
 };
-var __moduleCache;
 var __commonJS = (cb, mod) => () => (mod || cb((mod = { exports: {} }).exports, mod), mod.exports);
-var __returnValue = (v) => v;
-function __exportSetter(name, newValue) {
-  this[name] = __returnValue.bind(null, newValue);
-}
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, {
       get: all[name],
       enumerable: true,
       configurable: true,
-      set: __exportSetter.bind(all, name)
+      set: (newValue) => all[name] = () => newValue
     });
 };
 var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
@@ -853,7 +832,7 @@ Expecting one of '${allowedValues.join("', '")}'`);
         this._exitCallback = (err) => {
           if (err.code !== "commander.executeSubCommandAsync") {
             throw err;
-          }
+          } else {}
         };
       }
       return this;
@@ -3090,7 +3069,7 @@ var require_cell = __commonJS((exports, module) => {
       let content = utils.truncate(this.content, 10, this.truncate);
       if (!lineNum) {
         info(`${this.y}-${this.x}: ${this.rowSpan - lineNum}x${this.colSpan} Cell ${content}`);
-      }
+      } else {}
       let padLen = Math.max(this.height - this.lines.length, 0);
       let padTop;
       switch (this.vAlign) {
@@ -26859,7 +26838,7 @@ var require_node_gyp_build_optional_packages = __commonJS((exports, module) => {
 
 // ../../node_modules/.pnpm/msgpackr-extract@3.0.4/node_modules/msgpackr-extract/index.js
 var require_msgpackr_extract = __commonJS((exports, module) => {
-  var __dirname = "/Users/work/Code/awsless/node_modules/.pnpm/msgpackr-extract@3.0.4/node_modules/msgpackr-extract";
+  var __dirname = "/Users/ivandasilveira/Sites/@awsless/node_modules/.pnpm/msgpackr-extract@3.0.4/node_modules/msgpackr-extract";
   module.exports = require_node_gyp_build_optional_packages()(__dirname);
 });
 
@@ -39727,7 +39706,7 @@ var require_src3 = __commonJS((exports) => {
 
 // ../../node_modules/.pnpm/@grpc+grpc-js@1.12.6/node_modules/@grpc/grpc-js/build/src/channelz.js
 var require_channelz = __commonJS((exports) => {
-  var __dirname = "/Users/work/Code/awsless/node_modules/.pnpm/@grpc+grpc-js@1.12.6/node_modules/@grpc/grpc-js/build/src";
+  var __dirname = "/Users/ivandasilveira/Sites/@awsless/node_modules/.pnpm/@grpc+grpc-js@1.12.6/node_modules/@grpc/grpc-js/build/src";
   Object.defineProperty(exports, "__esModule", { value: true });
   exports.registerChannelzSocket = exports.registerChannelzServer = exports.registerChannelzSubchannel = exports.registerChannelzChannel = exports.ChannelzCallTrackerStub = exports.ChannelzCallTracker = exports.ChannelzChildrenTrackerStub = exports.ChannelzChildrenTracker = exports.ChannelzTrace = exports.ChannelzTraceStub = undefined;
   exports.unregisterChannelzRef = unregisterChannelzRef;
@@ -57231,7 +57210,7 @@ var require_zipEntries = __commonJS((exports, module) => {
       if (this.centralDirRecords !== this.files.length) {
         if (this.centralDirRecords !== 0 && this.files.length === 0) {
           throw new Error("Corrupted zip or bug: expected " + this.centralDirRecords + " records in central dir, got " + this.files.length);
-        }
+        } else {}
       }
     },
     readEndOfCentral: function() {
@@ -74452,7 +74431,7 @@ WD9f
 
 // ../../node_modules/.pnpm/ioredis@5.10.1_supports-color@8.1.1/node_modules/ioredis/built/utils/index.js
 var require_utils5 = __commonJS((exports) => {
-  var __dirname = "/Users/work/Code/awsless/node_modules/.pnpm/ioredis@5.10.1_supports-color@8.1.1/node_modules/ioredis/built/utils";
+  var __dirname = "/Users/ivandasilveira/Sites/@awsless/node_modules/.pnpm/ioredis@5.10.1_supports-color@8.1.1/node_modules/ioredis/built/utils";
   Object.defineProperty(exports, "__esModule", { value: true });
   exports.noop = exports.defaults = exports.Debug = exports.getPackageMeta = exports.zipMap = exports.CONNECTION_CLOSED_ERROR_MSG = exports.shuffle = exports.sample = exports.resolveTLSProfile = exports.parseURL = exports.optimizeErrorStack = exports.toArg = exports.convertMapToArray = exports.convertObjectToArray = exports.timeout = exports.packObject = exports.isInt = exports.wrapMultiResult = exports.convertBufferToString = undefined;
   var fs_1 = __require("fs");
@@ -74738,7 +74717,7 @@ var require_argumentParsers = __commonJS((exports) => {
 
 // ../../node_modules/.pnpm/ioredis@5.10.1_supports-color@8.1.1/node_modules/ioredis/built/Command.js
 var require_Command = __commonJS((exports) => {
-  var __dirname = "/Users/work/Code/awsless/node_modules/.pnpm/ioredis@5.10.1_supports-color@8.1.1/node_modules/ioredis/built";
+  var __dirname = "/Users/ivandasilveira/Sites/@awsless/node_modules/.pnpm/ioredis@5.10.1_supports-color@8.1.1/node_modules/ioredis/built";
   Object.defineProperty(exports, "__esModule", { value: true });
   var commands_1 = require_built();
   var calculateSlot = require_lib4();
@@ -95385,7 +95364,7 @@ var require_db_util = __commonJS((exports) => {
 
 // ../../node_modules/.pnpm/redis-memory-server@0.16.1_supports-color@8.1.1/node_modules/redis-memory-server/lib/util/RedisInstance.js
 var require_RedisInstance = __commonJS((exports) => {
-  var __dirname = "/Users/work/Code/awsless/node_modules/.pnpm/redis-memory-server@0.16.1_supports-color@8.1.1/node_modules/redis-memory-server/lib/util";
+  var __dirname = "/Users/ivandasilveira/Sites/@awsless/node_modules/.pnpm/redis-memory-server@0.16.1_supports-color@8.1.1/node_modules/redis-memory-server/lib/util";
   var __awaiter = exports && exports.__awaiter || function(thisArg, _arguments, P3, generator) {
     function adopt(value) {
       return value instanceof P3 ? value : new P3(function(resolve3) {
@@ -101299,7 +101278,7 @@ var require_unbzip2_stream = __commonJS((exports, module) => {
           stream2.queue(d5);
           if (d5 !== null) {
             outlength += d5.length;
-          }
+          } else {}
         });
       } catch (e4) {
         stream2.emit("error", e4);
@@ -114515,7 +114494,7 @@ var getSanitizedDevTypeScriptVersion = (version2 = "") => {
 };
 
 // ../../node_modules/.pnpm/@aws-sdk+util-user-agent-node@3.973.14_aws-crt@1.30.0_supports-color@8.1.1_/node_modules/@aws-sdk/util-user-agent-node/dist-es/getTypeScriptUserAgentPair.js
-var __dirname = "/Users/work/Code/awsless/node_modules/.pnpm/@aws-sdk+util-user-agent-node@3.973.14_aws-crt@1.30.0_supports-color@8.1.1_/node_modules/@aws-sdk/util-user-agent-node/dist-es";
+var __dirname = "/Users/ivandasilveira/Sites/@awsless/node_modules/.pnpm/@aws-sdk+util-user-agent-node@3.973.14_aws-crt@1.30.0_supports-color@8.1.1_/node_modules/@aws-sdk/util-user-agent-node/dist-es";
 var tscVersion;
 var TS_PACKAGE_JSON = join7("node_modules", "typescript", "package.json");
 var getTypeScriptUserAgentPair = async () => {
@@ -131592,17 +131571,6 @@ var $forEachNodeInTopologicalOrder = sort.forEachNodeInTopologicalOrder;
 var $topologicalSort = sort.topologicalSort;
 var $topologicalGenerations = sort.topologicalGenerations;
 var $forEachTopologicalGeneration = sort.forEachTopologicalGeneration;
-// ../../node_modules/.pnpm/uuid@11.1.0/node_modules/uuid/dist/esm/sha1.js
-import { createHash as createHash3 } from "crypto";
-function sha1(bytes) {
-  if (Array.isArray(bytes)) {
-    bytes = Buffer.from(bytes);
-  } else if (typeof bytes === "string") {
-    bytes = Buffer.from(bytes, "utf8");
-  }
-  return createHash3("sha1").update(bytes).digest();
-}
-var sha1_default = sha1;
 
 // ../../node_modules/.pnpm/uuid@11.1.0/node_modules/uuid/dist/esm/regex.js
 var regex_default = /^(?:[0-9a-f]{8}-[0-9a-f]{4}-[1-8][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}|00000000-0000-0000-0000-000000000000|ffffffff-ffff-ffff-ffff-ffffffffffff)$/i;
@@ -131668,6 +131636,18 @@ function v35(version2, hash, value, namespace, buf, offset) {
   return unsafeStringify(bytes);
 }
 
+// ../../node_modules/.pnpm/uuid@11.1.0/node_modules/uuid/dist/esm/sha1.js
+import { createHash as createHash3 } from "crypto";
+function sha1(bytes) {
+  if (Array.isArray(bytes)) {
+    bytes = Buffer.from(bytes);
+  } else if (typeof bytes === "string") {
+    bytes = Buffer.from(bytes, "utf8");
+  }
+  return createHash3("sha1").update(bytes).digest();
+}
+var sha1_default = sha1;
+
 // ../../node_modules/.pnpm/uuid@11.1.0/node_modules/uuid/dist/esm/v5.js
 function v5(value, namespace, buf, offset) {
   return v35(80, sha1_default, value, namespace, buf, offset);
@@ -141133,6 +141113,8 @@ if (!nativeAccelerationDisabled) {
   try {
     if (true)
       extractor = require_msgpackr_extract();
+    else
+      ;
     if (extractor)
       setExtractor(extractor.extractStrings);
   } catch (error3) {}
@@ -155087,8 +155069,19 @@ import { readFile as readFile12 } from "fs/promises";
 import { createServer as createServer2 } from "http";
 
 // src/dev/util.ts
+import { randomBytes } from "crypto";
 import { createServer } from "net";
 var LOCAL_ACCOUNT_ID = "000000000000";
+var TRACE_HEADER = "x-awsless-trace";
+var traceId = () => randomBytes(4).toString("hex");
+var formatTraceHeader = (trace) => `${trace.traceId}:${trace.spanId}`;
+var parseTraceHeader = (value) => {
+  if (typeof value !== "string") {
+    return;
+  }
+  const [traceId2, spanId] = value.split(":");
+  return traceId2 && spanId ? { traceId: traceId2, spanId } : undefined;
+};
 var readBody = (req) => {
   return new Promise((resolve3, reject) => {
     const chunks = [];
@@ -157381,7 +157374,7 @@ var createSnsServer = (props) => {
   let closeServer;
   let dispatch;
   let reportFailure;
-  const publish2 = (input) => {
+  const publish2 = (input, trace) => {
     const messageId = randomUUID4();
     for (const capture of props?.captures ?? []) {
       if (capture(input)) {
@@ -157414,7 +157407,7 @@ var createSnsServer = (props) => {
       ]
     };
     setImmediate(() => {
-      dispatch?.(event).catch((error3) => {
+      dispatch?.(event, trace).catch((error3) => {
         reportFailure?.({ kind: "async", event, error: error3 });
       });
     });
@@ -157445,7 +157438,7 @@ var createSnsServer = (props) => {
             res.end(`The local dev sns emulator only supports Publish, got: ${action}`);
             return;
           }
-          const messageId = publish2(input);
+          const messageId = publish2(input, parseTraceHeader(req.headers[TRACE_HEADER]));
           if (isJson) {
             res.writeHead(200, { "content-type": "application/x-amz-json-1.0" });
             res.end(JSON.stringify({ MessageId: messageId }));
@@ -158283,7 +158276,7 @@ var startDevRouter = async (props) => {
       const sourceIp = server2.requestIP(request)?.address ?? "127.0.0.1";
       let result;
       try {
-        result = await props.dispatch(formatWebEvent(request, route, body, url, sourceIp));
+        result = await props.dispatch(formatWebEvent(request, route, body, url, sourceIp), parseTraceHeader(request.headers.get(TRACE_HEADER)));
       } catch (error3) {
         props.onError?.(error3, route.routeKey);
         const detail = error3 instanceof Error ? error3.stack ?? error3.message : String(error3);
@@ -158445,7 +158438,7 @@ var createRestServer = (props) => {
       },
       body: body.length > 0 ? body.toString("base64") : undefined,
       isBase64Encoded: body.length > 0
-    });
+    }, parseTraceHeader(req.headers[TRACE_HEADER]));
     writeWebResponse(res, result);
   };
   return {
@@ -159802,12 +159795,12 @@ var tableOnDev = async (ctx) => {
         if (props.stream) {
           const routeKey = formatRouteKey(stackName, "table", id);
           const eventSourceARN = `arn:aws:dynamodb:${ctx.appConfig.region}:000000000000:table/${name}/stream/local`;
-          const unsubscribe = server.onStreamRecord(name, (record) => {
+          const unsubscribe = server.onStreamRecord(name, (record, context) => {
             if (isWiping()) {
               return;
             }
             const event = { Records: [{ ...record, eventSourceARN }] };
-            dispatch(event).catch((error3) => {
+            dispatch(event, parseTraceHeader(context)).catch((error3) => {
               reportFailure({
                 kind: "stream",
                 routeKey,
@@ -160026,8 +160019,9 @@ var createSchedulerServer = () => {
           const name = decodeURIComponent(match3[1]);
           const input = JSON.parse(body.toString() || "{}");
           const payload = input.Target?.Input ? JSON.parse(input.Target.Input) : {};
+          const trace = parseTraceHeader(req.headers[TRACE_HEADER]);
           setImmediate(() => {
-            dispatch?.(payload).catch((error3) => {
+            dispatch?.(payload, trace).catch((error3) => {
               const routeKey = payload?.["$awsless-route"];
               reportFailure?.({
                 kind: "async",
@@ -166599,7 +166593,7 @@ var createS3Server = (props) => {
   let closeServer;
   let dispatch;
   let reportFailure;
-  const notify = (eventName, bucket, key, size2, eTag) => {
+  const notify = (eventName, bucket, key, size2, eTag, trace) => {
     for (const rule of props.rules) {
       const matches = rule.events.some((event2) => {
         const type2 = event2.replace(/^s3:/, "");
@@ -166634,7 +166628,7 @@ var createS3Server = (props) => {
           }
         ]
       };
-      dispatch?.(event).catch((error3) => {
+      dispatch?.(event, trace).catch((error3) => {
         reportFailure?.({ kind: "async", routeKey: rule.id, event, error: error3 });
       });
     }
@@ -166701,7 +166695,7 @@ var createS3Server = (props) => {
       const eTag = createHash22("md5").update(body).digest("hex");
       res.writeHead(200, { etag: `"${eTag}"` });
       res.end();
-      notify("ObjectCreated:Put", bucket, key, body.length, eTag);
+      notify("ObjectCreated:Put", bucket, key, body.length, eTag, parseTraceHeader(req.headers[TRACE_HEADER]));
       return;
     }
     if (req.method === "GET" || req.method === "HEAD") {
@@ -166724,7 +166718,7 @@ var createS3Server = (props) => {
       await rm10(file2, { force: true });
       res.writeHead(204);
       res.end();
-      notify("ObjectRemoved:Delete", bucket, key, 0, "");
+      notify("ObjectRemoved:Delete", bucket, key, 0, "", parseTraceHeader(req.headers[TRACE_HEADER]));
       return;
     }
     res.writeHead(501, { "content-type": "application/xml" });
@@ -166814,7 +166808,7 @@ var createSqsServer = (props) => {
     }
     return stores.get(queue);
   };
-  const deliver = (queue, input, messageId) => {
+  const deliver = (queue, input, messageId, trace) => {
     const now = Date.now();
     if (props.queues.get(queue) === undefined) {
       storeOf(queue).push({
@@ -166848,7 +166842,7 @@ var createSqsServer = (props) => {
       ]
     };
     const send = () => {
-      dispatch?.(event).catch((error3) => {
+      dispatch?.(event, trace).catch((error3) => {
         let body = input.MessageBody;
         try {
           body = JSON.parse(input.MessageBody ?? "");
@@ -166894,16 +166888,16 @@ var createSqsServer = (props) => {
         QueueUrl: queueUrl(input.QueueName)
       };
     },
-    SendMessage(input) {
+    SendMessage(input, _signal, trace) {
       const queue = queueFromUrl(input.QueueUrl);
       if (!queue) {
         throw new Error(`Unknown local queue: ${input.QueueUrl}`);
       }
       const messageId = randomUUID8();
-      deliver(queue, input, messageId);
+      deliver(queue, input, messageId, trace);
       return sendResult(input, messageId);
     },
-    SendMessageBatch(input) {
+    SendMessageBatch(input, _signal, trace) {
       const queue = queueFromUrl(input.QueueUrl);
       if (!queue) {
         throw new Error(`Unknown local queue: ${input.QueueUrl}`);
@@ -166911,7 +166905,7 @@ var createSqsServer = (props) => {
       return {
         Successful: (input.Entries ?? []).map((entry) => {
           const messageId = randomUUID8();
-          deliver(queue, entry, messageId);
+          deliver(queue, entry, messageId, trace);
           return {
             Id: entry.Id,
             ...sendResult(entry, messageId)
@@ -167043,7 +167037,7 @@ var createSqsServer = (props) => {
             if (!action) {
               throw new Error(`The local dev sqs emulator does not support: ${target2}`);
             }
-            const result = await action(JSON.parse(body.toString() || "{}"), abort.signal);
+            const result = await action(JSON.parse(body.toString() || "{}"), abort.signal, parseTraceHeader(req.headers[TRACE_HEADER]));
             if (res.writableEnded || res.destroyed) {
               return;
             }
@@ -167341,12 +167335,90 @@ class WorkerError extends Error {
     }
   }
 }
-var WORKER_ENTRY = `import { createServer } from 'node:http'
+var WORKER_ENTRY = `import { AsyncLocalStorage } from 'node:async_hooks'
+import http from 'node:http'
+import https from 'node:https'
+import { createServer } from 'node:http'
+import { syncBuiltinESMExports } from 'node:module'
 import { format } from 'node:util'
 
 let handler
 let getCurrentRoute = () => undefined
 
+// The trace of the running invocation, set per dispatch by the dev
+// server. The async context keeps it accurate under concurrent
+// requests, exactly like the route context.
+const traceContext = new AsyncLocalStorage()
+
+const isLoopback = host => host === '127.0.0.1' || host === 'localhost' || host === '::1'
+
+// Outgoing requests to the local emulators carry the active trace as a
+// header, so a queue send or task invoke made by a handler links the
+// dispatch it causes back to this invocation. Only loopback targets:
+// a request to a real external api must never see the header.
+const injectTrace = module => {
+	const original = module.request
+
+	module.request = function (...args) {
+		const trace = traceContext.getStore()
+
+		if (trace) {
+			// request(url[, options][, callback]) or request(options[, callback])
+			const index = typeof args[0] === 'string' || args[0] instanceof URL ? 1 : 0
+			let url
+
+			try {
+				url = index === 1 ? new URL(String(args[0])) : undefined
+			} catch (_) {}
+
+			let options = args[index]
+
+			if (typeof options === 'function' || options === undefined) {
+				args.splice(index, 0, {})
+				options = args[index]
+			}
+
+			const host = String(url?.hostname ?? options.hostname ?? options.host ?? '').split(':')[0]
+
+			if (isLoopback(host)) {
+				args[index] = { ...options, headers: { ...options.headers, 'x-awsless-trace': trace } }
+			}
+		}
+
+		return original.apply(this, args)
+	}
+}
+
+injectTrace(http)
+injectTrace(https)
+
+// The aws sdk grabs request via ESM named imports (like
+// "const { request } = await import('node:http')"), and ESM named
+// exports of builtins are snapshots - the sync pushes the patched
+// functions into those bindings too.
+syncBuiltinESMExports()
+
+const originalFetch = globalThis.fetch
+
+globalThis.fetch = (input, init) => {
+	const trace = traceContext.getStore()
+
+	if (trace) {
+		try {
+			const url = new URL(input instanceof Request ? input.url : String(input))
+
+			if (isLoopback(url.hostname)) {
+				const headers = new Headers(init?.headers ?? (input instanceof Request ? input.headers : undefined))
+
+				headers.set('x-awsless-trace', trace)
+				init = { ...init, headers }
+			}
+		} catch (_) {}
+	}
+
+	return originalFetch(input, init)
+}
+
 // Every console call writes ONE framed record: an invisible \\x1f
 // marker with the active bundle route & the json-encoded text, so
 // multi-line output stays a single log entry downstream. The route
@@ -167392,12 +167464,12 @@ const server = createServer((req, res) => {
 		let response
 
 		try {
-			const { event, context } = JSON.parse(Buffer.concat(chunks).toString())
+			const { event, context, trace } = JSON.parse(Buffer.concat(chunks).toString())
 
 			// Fabricate the parts of the lambda context that only exist
 			// at runtime, like the remaining time counter.
 			const started = Date.now()
-			const result = await handler(event, {
+			const run = () => handler(event, {
 				functionName: process.env.AWS_LAMBDA_FUNCTION_NAME,
 				functionVersion: process.env.AWS_LAMBDA_FUNCTION_VERSION,
 				memoryLimitInMB: '512',
@@ -167406,6 +167478,8 @@ const server = createServer((req, res) => {
 				...context,
 			})
 
+			const result = await (trace ? traceContext.run(trace, run) : run())
+
 			response = { result: typeof result === 'undefined' ? null : result }
 		} catch (error) {
 			response = {
@@ -167537,7 +167611,7 @@ var createBundleWorker = (props) => {
       await doStop();
       await doStart();
     }),
-    async dispatch(event) {
+    async dispatch(event, trace) {
       if (workers.length === 0) {
         throw new Error("The bundle worker is not running.");
       }
@@ -167546,7 +167620,7 @@ var createBundleWorker = (props) => {
       try {
         const res = await fetch(`http://127.0.0.1:${worker.port}`, {
           method: "POST",
-          body: JSON.stringify({ event, context })
+          body: JSON.stringify({ event, context, trace })
         });
         const body = await res.json();
         if (body.error) {
@@ -167569,36 +167643,51 @@ var dashboardHtml = `<!doctype html>
 <title>awsless dev</title>
 <style>
 	:root {
-		--bg: #0f1115;
-		--panel: #171a21;
-		--border: #262b36;
-		--text: #d7dae0;
-		--muted: #7d8590;
+		--bg: hsl(220 20% 5% / 1);
+		--panel: hsl(220 20% 8%);
+		--hover: hsl(220 20% 12%);
+		--border: hsl(220 18% 15%);
+		--border-strong: hsl(220 16% 22%);
+		--text: #ecedf2;
+		--muted: #8b90a1;
 		--accent: #ff9000;
-		--good: #3fb950;
-		--bad: #f85149;
+		--good: #3dd68c;
+		--bad: #ff6166;
+		--font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', Helvetica, Arial, sans-serif;
+		--font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
 		font-size: 14px;
+		color-scheme: dark;
 	}
 	* { box-sizing: border-box; }
+	::selection { background: rgb(255 144 0 / 25%); }
+	::-webkit-scrollbar { width: 8px; height: 8px; }
+	::-webkit-scrollbar-track { background: transparent; }
+	::-webkit-scrollbar-thumb { background: rgb(255 255 255 / 10%); border-radius: 999px; }
+	::-webkit-scrollbar-thumb:hover { background: rgb(255 255 255 / 18%); }
+	:focus-visible { outline: 2px solid rgb(255 144 0 / 55%); outline-offset: 1px; }
 	body {
 		margin: 0;
-		font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+		font-family: var(--font-sans);
+		-webkit-font-smoothing: antialiased;
 		background: var(--bg);
 		color: var(--text);
 		display: grid;
-		grid-template-columns: 220px 1fr;
+		grid-template-columns: 232px 1fr;
 		height: 100vh;
 	}
-	body.with-events { grid-template-columns: 220px 1fr 320px; }
+	body.with-events { grid-template-columns: 232px 1fr 320px; }
+	button { transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; }
+	input, select, textarea { transition: border-color 0.15s ease, box-shadow 0.15s ease; }
 	aside {
 		border-left: 1px solid var(--border);
 		overflow-y: auto;
 		padding: 12px;
 	}
 	aside h3 {
-		font-size: 11px;
+		font-size: 10px;
+		font-weight: 500;
 		text-transform: uppercase;
-		letter-spacing: 1px;
+		letter-spacing: 0.08em;
 		color: var(--muted);
 		margin: 8px 8px 12px;
 	}
@@ -167606,34 +167695,45 @@ var dashboardHtml = `<!doctype html>
 		border-bottom: 1px solid var(--border);
 		padding: 8px;
 		font-size: 12px;
+		font-family: var(--font-mono);
 	}
+	aside .event:last-child { border-bottom: none; }
 	aside .event .head { display: flex; gap: 8px; align-items: baseline; }
 	aside .event .time { color: var(--muted); }
-	aside .event .topic { font-weight: bold; }
+	aside .event .topic { font-weight: 600; }
 	aside .event .type { color: var(--muted); }
 	aside .event .body {
 		color: var(--muted);
 		margin-top: 4px;
-		word-break: break-word;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+	/* Hovering an event unfolds its payload in place, fully wrapped -
+	   the same behavior as the activity feed. */
+	aside .event:hover .body {
 		white-space: pre-wrap;
+		overflow: visible;
+		word-break: break-word;
 	}
 	aside .empty { padding: 8px; }
 	.logs {
 		background: var(--panel);
 		border: 1px solid var(--border);
-		border-radius: 6px;
-		padding: 8px;
+		border-radius: 10px;
+		padding: 10px 12px;
 		margin-top: 8px;
 		max-height: 420px;
 		overflow-y: auto;
 		font-size: 12px;
+		font-family: var(--font-mono);
 	}
 	.logs .line { display: flex; gap: 8px; padding: 1px 0; }
 	.logs .time { color: var(--muted); flex-shrink: 0; }
 	.logs .route { color: var(--accent); word-break: break-all; }
 	.logs .text { white-space: pre-wrap; word-break: break-word; }
 	.logs .line.error .text, .logs .entry.error .text { color: var(--bad); }
-	.logs .entry { padding: 4px 0; }
+	.logs .entry { padding: 6px 0; }
 	.logs .entry + .entry, .logs .line + .entry, .logs .entry + .line { border-top: 1px solid var(--border); }
 	.logs .entry .meta { display: flex; gap: 8px; margin-bottom: 2px; }
 	/* Every group is its own card, with a shared grid inside: the name
@@ -167643,8 +167743,8 @@ var dashboardHtml = `<!doctype html>
 	.config-group {
 		background: var(--panel);
 		border: 1px solid var(--border);
-		border-radius: 8px;
-		padding: 14px 16px;
+		border-radius: 10px;
+		padding: 16px 18px;
 	}
 	.config-group h3 { margin: 0 0 12px; }
 	.config-fields {
@@ -167654,7 +167754,7 @@ var dashboardHtml = `<!doctype html>
 		align-items: center;
 	}
 	.config-fields .field { display: contents; }
-	.config-fields .name { color: var(--muted); overflow-wrap: anywhere; }
+	.config-fields .name { color: var(--muted); overflow-wrap: anywhere; font-family: var(--font-mono); font-size: 12.5px; }
 	.config-fields input {
 		background: var(--bg);
 		color: var(--text);
@@ -167663,17 +167763,23 @@ var dashboardHtml = `<!doctype html>
 		padding: 6px 10px;
 		font: inherit;
 	}
+	.config-fields input:hover { border-color: var(--border-strong); }
+	.config-fields input:focus { border-color: #5b6272; box-shadow: 0 0 0 3px rgb(255 255 255 / 14%); outline: none; }
 	.config-fields input::placeholder { color: var(--muted); }
 	.groups { display: flex; flex-wrap: wrap; gap: 4px 16px; }
 	.groups .group { display: flex; align-items: center; gap: 4px; cursor: pointer; }
 	nav {
 		border-right: 1px solid var(--border);
 		overflow-y: auto;
-		padding: 12px;
+		padding: 14px 12px;
+		/* The menu scrolls, but never shows a permanent scrollbar. */
+		scrollbar-width: none;
 	}
+	nav::-webkit-scrollbar { display: none; }
 	nav h1 {
 		font-size: 15px;
-		margin: 4px 8px 16px;
+		font-family: var(--font-mono);
+		margin: 4px 8px 18px;
 		cursor: pointer;
 	}
 	/* The same two-tone logo as the cli: bold AWS in the brand orange,
@@ -167683,25 +167789,27 @@ var dashboardHtml = `<!doctype html>
 	nav h1 .cmd { color: var(--muted); font-weight: normal; }
 	nav h3 {
 		font-size: 10px;
+		font-weight: 500;
 		text-transform: uppercase;
-		letter-spacing: 1px;
+		letter-spacing: 0.08em;
 		color: var(--muted);
-		margin: 14px 8px 4px;
+		margin: 18px 8px 6px;
 	}
 	nav button {
 		display: flex;
 		align-items: center;
-		gap: 8px;
+		gap: 9px;
 		width: 100%;
 		background: none;
 		border: none;
-		color: var(--text);
+		color: var(--muted);
 		font: inherit;
+		font-size: 13.5px;
 		padding: 6px 8px;
 		border-radius: 6px;
 		cursor: pointer;
 	}
-	nav button .count { margin-left: auto; }
+	nav button .count { margin-left: auto; font-size: 12px; }
 	nav button.reseed { margin-top: auto; color: var(--muted); }
 	nav button.reseed:disabled { cursor: default; }
 	.icon {
@@ -167710,34 +167818,37 @@ var dashboardHtml = `<!doctype html>
 		flex-shrink: 0;
 		display: inline-flex;
 		color: var(--muted);
+		transition: color 0.15s ease;
 	}
 	.icon svg { width: 100%; height: 100%; }
 	nav button.active .icon, .row:hover .icon { color: var(--accent); }
-	main h2 { display: flex; align-items: center; gap: 8px; }
-	main h2 .icon { width: 17px; height: 17px; }
-	nav button:hover { background: var(--panel); }
-	nav button.active { background: var(--panel); color: var(--accent); }
+	main h2 { display: flex; align-items: center; gap: 9px; }
+	main h2 .icon { width: 18px; height: 18px; }
+	nav button:hover { background: var(--hover); color: var(--text); }
+	nav button.active { background: var(--hover); color: var(--text); }
 	nav button .count { color: var(--muted); }
-	main { padding: 20px 24px; overflow-y: auto; }
-	main h2 { margin: 0 0 4px; font-size: 16px; }
-	main .detail { color: var(--muted); margin-bottom: 16px; word-break: break-all; }
+	main { padding: 24px 28px; overflow-y: auto; }
+	main h2 { margin: 0 0 4px; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
+	main .detail { color: var(--muted); margin-bottom: 16px; word-break: break-all; font-size: 13px; }
 	main .back {
 		display: inline-block;
 		background: none;
 		border: none;
 		color: var(--muted);
 		font: inherit;
+		font-size: 13px;
 		padding: 0;
 		margin-bottom: 12px;
 		cursor: pointer;
 	}
-	main .back:hover { color: var(--accent); }
+	main .back:hover { color: var(--text); }
 	main h3 {
 		font-size: 11px;
+		font-weight: 500;
 		text-transform: uppercase;
-		letter-spacing: 1px;
+		letter-spacing: 0.08em;
 		color: var(--muted);
-		margin: 24px 0 8px;
+		margin: 26px 0 8px;
 	}
 	.feed .row { cursor: default; }
 	.feed .empty { padding: 8px; }
@@ -167750,9 +167861,15 @@ var dashboardHtml = `<!doctype html>
 		padding: 6px 10px;
 		font: inherit;
 	}
+	.filters input:hover, .filters select:hover { border-color: var(--border-strong); }
+	.filters input:focus, .filters select:focus {
+		border-color: #5b6272;
+		box-shadow: 0 0 0 3px rgb(255 255 255 / 14%);
+		outline: none;
+	}
 	.filters input { flex: 1; }
 	.filters input::placeholder { color: var(--muted); }
-	.filters .count { color: var(--muted); align-self: center; white-space: nowrap; }
+	.filters .count { color: var(--muted); align-self: center; white-space: nowrap; font-size: 13px; }
 	/* The stack & name columns share one grid across every row, so the
 	   names line up no matter how long each stack name is. */
 	.rows { display: grid; grid-template-columns: fit-content(280px) 1fr auto; }
@@ -167766,15 +167883,29 @@ var dashboardHtml = `<!doctype html>
 		text-align: left;
 		background: none;
 		border: none;
-		border-bottom: 1px solid var(--border);
 		color: var(--text);
 		font: inherit;
-		padding: 8px;
+		padding: 9px 10px;
 		cursor: pointer;
+		border-radius: 8px;
+		position: relative;
+		transition: background 0.15s ease;
+	}
+	/* The separator is its own straight hairline instead of a border,
+	   so the rounded hover highlight never bends the line at the ends. */
+	.row::after {
+		content: '';
+		position: absolute;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		height: 1px;
+		background: var(--border);
 	}
-	.row:hover { background: var(--panel); }
+	.row:last-child::after { display: none; }
+	.row:hover { background: var(--hover); }
 	a.row { text-decoration: none; }
-	.health { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
+	.health { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 4px; }
 	.health .chip {
 		display: inline-flex;
 		align-items: center;
@@ -167784,9 +167915,16 @@ var dashboardHtml = `<!doctype html>
 		border-radius: 999px;
 		padding: 4px 12px;
 		font-size: 12px;
+		font-family: var(--font-mono);
 	}
-	.health .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--good); flex-shrink: 0; }
-	.health .chip.down { border-color: var(--bad); }
+	.health .dot {
+		width: 7px;
+		height: 7px;
+		border-radius: 50%;
+		background: var(--good);
+		flex-shrink: 0;
+	}
+	.health .chip.down { border-color: rgb(255 97 102 / 45%); background: rgb(255 97 102 / 8%); }
 	.health .chip.down .dot { background: var(--bad); }
 	.health .chip .detail-text { color: var(--muted); }
 	.home-cols {
@@ -167795,20 +167933,68 @@ var dashboardHtml = `<!doctype html>
 		gap: 0 20px;
 		align-items: start;
 	}
-	/* The activity feed reads like the log cards. */
-	.activity-card {
+	.logs .route.link { cursor: pointer; }
+	.logs .route.link:hover { text-decoration: underline; }
+	.logs .took { color: var(--muted); margin-left: auto; flex-shrink: 0; }
+	.logs .payload {
+		color: var(--muted);
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+	/* Hovering an entry unfolds its payload in place, fully wrapped. */
+	.logs .entry:hover .payload {
+		white-space: pre-wrap;
+		overflow: visible;
+		word-break: break-word;
+	}
+	/* The trace chip appears once a dispatch has trace siblings & opens
+	   the trace tree of the whole request chain. */
+	.logs .trace-link {
+		color: var(--accent);
+		cursor: pointer;
+		flex-shrink: 0;
+	}
+	.logs .trace-link:hover { text-decoration: underline; }
+	.overlay {
+		position: fixed;
+		inset: 0;
+		background: rgb(0 0 0 / 60%);
+		backdrop-filter: blur(6px);
+		-webkit-backdrop-filter: blur(6px);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		z-index: 50;
+	}
+	.overlay .modal {
 		background: var(--panel);
-		border: 1px solid var(--border);
-		border-radius: 6px;
-		padding: 8px;
-		margin-top: 8px;
-		max-height: 420px;
+		border: 1px solid var(--border-strong);
+		border-radius: 12px;
+		box-shadow: 0 12px 48px rgb(0 0 0 / 60%);
+		width: min(760px, 92vw);
+		max-height: 82vh;
 		overflow-y: auto;
-		font-size: 12px;
+		padding: 18px 22px;
+	}
+	.overlay .modal-head { display: flex; align-items: baseline; gap: 10px; }
+	.overlay .modal-head h3 { margin: 0; font-family: var(--font-mono); }
+	.overlay .modal-head .detail { color: var(--muted); font-size: 12px; }
+	.overlay .modal-head button {
+		margin-left: auto;
+		background: none;
+		border: none;
+		color: var(--muted);
+		font-size: 16px;
+		cursor: pointer;
+		border-radius: 6px;
+		padding: 2px 8px;
 	}
-	.activity-card .rows { grid-template-columns: fit-content(110px) 1fr auto; }
-	.activity-card .row { padding: 3px 4px; gap: 8px; }
-	.activity-card .empty { padding: 4px; }
+	.overlay .modal-head button:hover { color: var(--text); background: var(--hover); }
+	/* The tree rows reuse the log entry format, the guide marks the
+	   parent-child steps of the chain. */
+	.trace-tree { max-height: none; }
+	.trace-tree .entry .guide { color: var(--muted); flex-shrink: 0; }
 	.row.problem .id { color: var(--bad); }
 	.empty.good { color: var(--good); }
 	.row .stack {
@@ -167817,13 +168003,17 @@ var dashboardHtml = `<!doctype html>
 		overflow: hidden;
 		text-overflow: ellipsis;
 		white-space: nowrap;
+		font-family: var(--font-mono);
+		font-size: 12.5px;
 	}
 	.row .id {
-		font-weight: bold;
+		font-weight: 500;
 		min-width: 0;
 		overflow: hidden;
 		text-overflow: ellipsis;
 		white-space: nowrap;
+		font-family: var(--font-mono);
+		font-size: 12.5px;
 	}
 	.row .info {
 		color: var(--muted);
@@ -167832,13 +168022,14 @@ var dashboardHtml = `<!doctype html>
 		text-overflow: ellipsis;
 		white-space: nowrap;
 		max-width: 100%;
+		font-size: 12.5px;
 	}
 	.email-body {
 		width: 100%;
 		min-height: 480px;
 		background: #fff;
 		border: 1px solid var(--border);
-		border-radius: 8px;
+		border-radius: 10px;
 		margin-top: 12px;
 	}
 	textarea {
@@ -167847,47 +168038,58 @@ var dashboardHtml = `<!doctype html>
 		background: var(--panel);
 		color: var(--text);
 		border: 1px solid var(--border);
-		border-radius: 8px;
-		padding: 10px;
-		font: inherit;
+		border-radius: 10px;
+		padding: 12px;
+		font-family: var(--font-mono);
+		font-size: 12.5px;
 		resize: vertical;
 	}
+	textarea:hover { border-color: var(--border-strong); }
+	textarea:focus { border-color: #5b6272; box-shadow: 0 0 0 3px rgb(255 255 255 / 14%); outline: none; }
 	.actions { margin: 12px 0; display: flex; gap: 8px; align-items: center; }
-	.actions .status { color: var(--muted); }
+	.actions .status { color: var(--muted); font-size: 13px; }
+	/* Action buttons in the x.ai style: white pill primary, outlined
+	   ghost secondary. */
 	button.primary {
-		background: var(--accent);
-		color: #14100a;
+		background: #fff;
+		color: #0a0a0a;
 		border: none;
-		border-radius: 6px;
-		padding: 7px 16px;
+		border-radius: 999px;
+		padding: 7px 18px;
 		font: inherit;
-		font-weight: bold;
+		font-weight: 500;
 		cursor: pointer;
 	}
+	button.primary:hover { background: #d9d9de; }
 	button.primary:disabled { opacity: 0.5; cursor: wait; }
 	button.secondary {
-		background: var(--panel);
+		background: transparent;
 		color: var(--text);
-		border: 1px solid var(--border);
-		border-radius: 6px;
-		padding: 6px 16px;
+		border: 1px solid var(--border-strong);
+		border-radius: 999px;
+		padding: 6px 18px;
 		font: inherit;
 		cursor: pointer;
 	}
+	button.secondary:hover { background: var(--hover); border-color: #3d3d44; }
 	pre.result {
 		background: var(--panel);
 		border: 1px solid var(--border);
-		border-radius: 8px;
-		padding: 12px;
+		border-radius: 10px;
+		padding: 12px 14px;
 		overflow-x: auto;
 		white-space: pre-wrap;
 		word-break: break-word;
+		font-family: var(--font-mono);
+		font-size: 12.5px;
 	}
-	pre.result.error { border-color: var(--bad); color: var(--bad); }
-	table { border-collapse: collapse; width: 100%; }
+	pre.result.error { border-color: rgb(255 97 102 / 45%); color: var(--bad); }
+	/* Tables in the vercel style: horizontal hairlines only, quiet
+	   uppercase headers. */
+	table { border-collapse: collapse; width: 100%; font-family: var(--font-mono); font-size: 12.5px; }
 	th, td {
-		border: 1px solid var(--border);
-		padding: 6px 10px;
+		border-bottom: 1px solid var(--border);
+		padding: 8px 12px;
 		text-align: left;
 		vertical-align: top;
 		max-width: 360px;
@@ -167895,7 +168097,16 @@ var dashboardHtml = `<!doctype html>
 		text-overflow: ellipsis;
 		white-space: nowrap;
 	}
-	th { color: var(--muted); font-weight: normal; }
+	th {
+		color: var(--muted);
+		font-weight: 500;
+		font-family: var(--font-sans);
+		font-size: 11px;
+		text-transform: uppercase;
+		letter-spacing: 0.08em;
+	}
+	tbody tr { transition: background 0.15s ease; }
+	tbody tr:hover { background: var(--hover); }
 	td:hover { white-space: normal; word-break: break-all; }
 	.empty { color: var(--muted); }
 </style>
@@ -168320,6 +168531,50 @@ const rpcPanel = (main, r) => {
 // A terminal-style view streaming a resource's live event channel,
 // like the dev server output of a site. The bus replays the recent
 // lines, so the boot output shows even when the panel opens later.
+// Resolve a feed label back to its resource: route keys match
+// directly, while queue/stream/topic labels carry the physical name
+// their resource lists as its detail.
+const findRouteResource = route => {
+	const direct = state.resources.find(r => r.routeKey === route)
+
+	if (direct) {
+		return direct
+	}
+
+	const [kind, name] = route.split(' ')
+
+	if (!name) {
+		return undefined
+	}
+
+	if (kind === 'queue') {
+		return state.resources.find(r => r.kind === 'queue' && r.detail === name)
+	}
+
+	if (kind === 'stream') {
+		return state.resources.find(r => r.kind === 'table' && r.detail === name)
+	}
+
+	if (kind === 'topic') {
+		return state.resources.find(r => r.kind === 'topic' && r.detail === name)
+	}
+
+	return undefined
+}
+
+// A route tag that links through to its resource, shared by the log
+// feeds & the activity feed.
+const routeTag = route => {
+	const resource = findRouteResource(route)
+	const tag = $('span', { className: 'route' + (resource ? ' link' : ''), title: route }, route)
+
+	if (resource) {
+		tag.onclick = () => selectResource(resource)
+	}
+
+	return tag
+}
+
 const attachLogFeed = (main, channel, route, title = 'Logs') => {
 	if (title) {
 		main.append($('h3', {}, title))
@@ -168351,7 +168606,7 @@ const attachLogFeed = (main, channel, route, title = 'Logs') => {
 			feed.append($('div', { className: 'entry' + error }, [
 				$('div', { className: 'meta' }, [
 					$('span', { className: 'time' }, new Date(data.date).toLocaleTimeString()),
-					showRoute ? $('span', { className: 'route' }, data.route) : '',
+					showRoute ? routeTag(data.route) : '',
 				]),
 				$('div', { className: 'text' }, data.line),
 			]))
@@ -169202,15 +169457,21 @@ const render = () => {
 		nav.append(reseed)
 	}
 
+	// Every view renders into its own container: navigating detaches
+	// the old one, so a slow async panel (like a table scan) finishing
+	// after the switch appends into a dead node instead of the screen.
 	const main = document.getElementById('main')
 	main.innerHTML = ''
 
+	const page = $('div')
+	main.append(page)
+
 	if (view.resource) {
-		renderResource(main)
+		renderResource(page)
 	} else if (view.kind) {
-		renderList(main)
+		renderList(page)
 	} else {
-		renderHome(main)
+		renderHome(page)
 	}
 }
 
@@ -169357,35 +169618,139 @@ const renderHome = main => {
 
 	activityCol.append($('h3', {}, 'Activity'))
 
-	const card = $('div', { className: 'activity-card' })
-	const activity = $('div', { className: 'rows' })
-	const idle = $('p', { className: 'empty' }, 'Nothing ran yet.')
+	const activityFeed = $('div', { className: 'logs' }, $('p', { className: 'empty' }, 'Nothing ran yet.'))
+	activityCol.append(activityFeed)
+
+	// The recent dispatches kept as data, not just DOM - the trace tree
+	// renders straight from this buffer. It outlives the visible feed,
+	// so a chain's early spans stay renderable after the feed pruned them.
+	const activityData = []
+	const traceCounts = new Map()
+
+	const closeTrace = () => {
+		document.querySelector('.overlay')?.remove()
+	}
+
+	// The trace tree: the whole request chain of one trace as nested
+	// spans - what ran, what caused it, how long each step took & where
+	// it failed. Children hang under their caller in dispatch order.
+	const openTrace = traceId => {
+		closeTrace()
+
+		const entries = activityData.filter(entry => entry.trace === traceId)
+
+		if (entries.length === 0) {
+			return
+		}
+
+		const started = Math.min(...entries.map(entry => entry.date))
+		const ended = Math.max(...entries.map(entry => entry.date + entry.ms))
+		const failed = entries.some(entry => !entry.ok)
+
+		const tree = $('div', { className: 'logs trace-tree' })
+		const spans = new Set(entries.map(entry => entry.span))
+
+		// A span whose parent already fell out of the buffer renders as
+		// its own root instead of vanishing.
+		const roots = entries.filter(entry => !entry.parent || !spans.has(entry.parent))
+
+		const renderSpan = (entry, depth) => {
+			const guide = $('span', { className: 'guide' }, '\\u2514')
+			guide.style.paddingLeft = ((depth - 1) * 18) + 'px'
+
+			tree.append($('div', { className: 'entry' + (entry.ok ? '' : ' error') }, [
+				$('div', { className: 'meta' }, [
+					depth > 0 ? guide : '',
+					$('span', { className: 'time' }, new Date(entry.date).toLocaleTimeString()),
+					routeTag(entry.route),
+					$('span', { className: 'took' }, (entry.ok ? '' : '\\u2717 ') + entry.ms + 'ms'),
+				]),
+				entry.ok ? '' : $('div', { className: 'text', title: entry.error ?? '' }, entry.error ?? 'failed'),
+				entry.payload ? $('div', { className: 'payload' }, entry.payload) : '',
+			]))
+
+			for (const child of entries.filter(other => other.parent === entry.span)) {
+				renderSpan(child, depth + 1)
+			}
+		}
+
+		for (const root of roots) {
+			renderSpan(root, 0)
+		}
+
+		const close = $('button', { title: 'Close' }, '\\u2715')
+		const overlay = $('div', { className: 'overlay' }, $('div', { className: 'modal' }, [
+			$('div', { className: 'modal-head' }, [
+				$('h3', {}, 'Trace ' + traceId),
+				$('span', { className: 'detail' },
+					entries.length + ' spans \\u00b7 ' + (ended - started) + 'ms' + (failed ? ' \\u00b7 failed' : '')),
+				close,
+			]),
+			tree,
+		]))
+
+		close.onclick = closeTrace
+		overlay.onclick = event => {
+			if (event.target === overlay) closeTrace()
+		}
 
-	card.append(idle, activity)
-	activityCol.append(card)
+		document.body.append(overlay)
+	}
 
-	const activityRows = []
+	const traceChip = traceId => {
+		const chip = $('span', { className: 'trace-link', title: 'View the whole request chain' }, 'trace')
+		chip.onclick = () => openTrace(traceId)
+		return chip
+	}
+
+	// A lone dispatch shows no chip - once a second span of its trace
+	// arrives, every entry of the chain gets one, retroactively.
+	const markTraced = traceId => {
+		for (const entry of activityFeed.querySelectorAll('[data-trace="' + traceId + '"]')) {
+			if (!entry.querySelector('.trace-link')) {
+				entry.querySelector('.meta')?.append(traceChip(traceId))
+			}
+		}
+	}
 
 	const activityRow = data => {
-		idle.hidden = true
+		activityFeed.querySelector('.empty')?.remove()
+
+		activityData.push(data)
+
+		while (activityData.length > 200) {
+			activityData.shift()
+		}
 
-		const resource = state.resources.find(r => r.routeKey === data.route)
-		const row = $('button', { className: 'row' + (data.ok ? '' : ' problem') }, [
-			$('span', { className: 'stack' }, new Date(data.date).toLocaleTimeString()),
-			$('span', { className: 'id', title: data.route }, (data.ok ? '' : '\\u2717 ') + data.route),
-			$('span', { className: 'info', title: data.ok ? '' : (data.error ?? '') }, data.ok ? data.ms + 'ms' : (data.error ?? 'failed').slice(0, 80)),
+		// The same entry format as the log feeds: meta header with the
+		// linked route tag & the duration, the payload truncated on its
+		// own line with the full value on hover.
+		const row = $('div', { className: 'entry' + (data.ok ? '' : ' error') }, [
+			$('div', { className: 'meta' }, [
+				$('span', { className: 'time' }, new Date(data.date).toLocaleTimeString()),
+				routeTag(data.route),
+				$('span', { className: 'took' }, (data.ok ? '' : '\\u2717 ') + data.ms + 'ms'),
+			]),
+			data.ok ? '' : $('div', { className: 'text', title: data.error ?? '' }, data.error ?? 'failed'),
+			data.payload ? $('div', { className: 'payload' }, data.payload) : '',
 		])
 
-		if (resource) {
-			row.onclick = () => selectResource(resource)
+		if (data.trace) {
+			row.setAttribute('data-trace', data.trace)
+			traceCounts.set(data.trace, (traceCounts.get(data.trace) ?? 0) + 1)
 		}
 
-		activity.prepend(row)
-		activityRows.push(row)
+		activityFeed.append(row)
 
-		while (activityRows.length > 50) {
-			activityRows.shift().remove()
+		if (data.trace && traceCounts.get(data.trace) > 1) {
+			markTraced(data.trace)
 		}
+
+		while (activityFeed.children.length > 50) {
+			activityFeed.firstChild.remove()
+		}
+
+		activityFeed.scrollTop = activityFeed.scrollHeight
 	}
 
 	const activitySource = new EventSource('/api/events?channel=activity')
@@ -169403,6 +169768,7 @@ const renderHome = main => {
 
 	cleanupPanel = () => {
 		clearInterval(uptimeTimer)
+		closeTrace()
 		healthSource.close()
 		problemSource.close()
 		activitySource.close()
@@ -169435,6 +169801,7 @@ try {
 			id: route.pattern,
 			stack: route.routeKey ? route.routeKey.split(':')[0] : undefined,
 			router: route.routerId,
+			routeKey: route.routeKey,
 			detail: route.routeKey ?? ('proxy \u2192 ' + route.proxy),
 			url: 'http://localhost:' + state.routerPorts[route.routerId] + route.pattern.split('{')[0].replace(/\\*$/, ''),
 		})),
@@ -169833,7 +170200,8 @@ var createFailureReporter = (props) => {
       return;
     }
     const event = JSON.parse(stringify5(format4(report)));
-    props.dispatch(formatRoutePayload2(CONSUMER_ROUTE, event)).catch((error3) => {
+    const parent = report.error?.trace;
+    props.dispatch(formatRoutePayload2(CONSUMER_ROUTE, event), parent).catch((error3) => {
       props.log(`The on-failure consumer itself failed: ${error3 instanceof Error ? error3.message : String(error3)}`);
     });
   };
@@ -169906,10 +170274,11 @@ var createLambdaServer = (props) => {
           }
           const type2 = String(req.headers["x-amz-invocation-type"] ?? "RequestResponse");
           const event = JSON.parse(body.toString() || "{}");
+          const trace = parseTraceHeader(req.headers[TRACE_HEADER]);
           if (type2 === "Event") {
             res.writeHead(202, { "content-type": "application/json" });
             res.end();
-            dispatch?.(event).catch((error3) => {
+            dispatch?.(event, trace).catch((error3) => {
               const routeKey = event?.["$awsless-route"];
               reportFailure?.({
                 kind: "async",
@@ -169921,7 +170290,7 @@ var createLambdaServer = (props) => {
             return;
           }
           try {
-            const result = await dispatch?.(event);
+            const result = await dispatch?.(event, trace);
             res.writeHead(200, { "content-type": "application/json" });
             res.end(typeof result === "undefined" || result === null ? "" : JSON.stringify(result));
           } catch (error3) {
@@ -170193,21 +170562,48 @@ var startDev = async (props) => {
     }
     return "invoke";
   };
-  const dispatch = async (event) => {
+  const describePayload = (event) => {
+    let payload = "";
+    try {
+      const envelope = event;
+      const inner = typeof envelope?.["$awsless-route"] === "string" ? envelope.event : event;
+      payload = JSON.stringify(inner) ?? "";
+    } catch (_4) {}
+    return payload.length > 1000 ? payload.slice(0, 1000) + "\u2026" : payload;
+  };
+  const dispatch = async (event, parent) => {
     await ensureFresh();
     const started = Date.now();
     const route = describeDispatch(event);
+    const payload = describePayload(event);
+    const trace = { traceId: parent?.traceId ?? traceId(), spanId: traceId() };
     try {
-      const result = await worker.dispatch(event);
-      dev.events.emit("activity", { date: started, route, ms: Date.now() - started, ok: true });
+      const result = await worker.dispatch(event, formatTraceHeader(trace));
+      dev.events.emit("activity", {
+        date: started,
+        route,
+        payload,
+        ms: Date.now() - started,
+        ok: true,
+        trace: trace.traceId,
+        span: trace.spanId,
+        parent: parent?.spanId
+      });
       return result;
     } catch (error3) {
+      if (error3 instanceof Error) {
+        error3.trace = trace;
+      }
       dev.events.emit("activity", {
         date: started,
         route,
+        payload,
         ms: Date.now() - started,
         ok: false,
-        error: error3 instanceof Error ? error3.message : String(error3)
+        error: error3 instanceof Error ? error3.message : String(error3),
+        trace: trace.traceId,
+        span: trace.spanId,
+        parent: parent?.spanId
       });
       throw error3;
     }
@@ -177712,7 +178108,7 @@ ${job.error.stack.split(`
             stream2.shift();
           } else if (stream2.length > 0) {
             this._BOMseen = true;
-          }
+          } else {}
         }
         return codePointsToString(stream2);
       }