@awsless/cli 0.1.10 → 0.1.12

package/dist/bin.js

@@ -155069,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 = [];
@@ -156210,9 +156221,24 @@ var createLambdaFunction = (ctx, id, local) => {
   for (const [key, value] of Object.entries(props.environment ?? {})) {
     variables[key] = value;
   }
-  if (!sandboxed) {
-    ctx.onEnv(build2.addEnv);
-    ctx.onBind(build2.addEnv);
+  ctx.onEnv(build2.addEnv);
+  ctx.onBind(build2.addEnv);
+  if (sandboxed) {
+    const configs = typeof local.sandbox === "object" && local.sandbox.configs || [];
+    variables.CONFIGS = configs.join(",");
+    if (configs.length > 0) {
+      addPermission({
+        actions: [
+          "ssm:GetParameter",
+          "ssm:GetParameters",
+          "ssm:GetParametersByPath",
+          "ssm:GetParameterHistory"
+        ],
+        resources: configs.map((configName) => {
+          return `arn:aws:ssm:${ctx.appConfig.region}:${ctx.accountId}:parameter${configParameterPrefix(ctx.app.name)}/${configName}`;
+        })
+      });
+    }
   }
   if (typeof local.sandbox === "object") {
     const routes = [
@@ -156258,21 +156284,6 @@ var createLambdaFunction = (ctx, id, local) => {
         resources: [proxy.lambda.arn.pipe((arn) => `${arn}:*`)]
       });
     }
-    const configs = local.sandbox.configs ?? [];
-    if (configs.length > 0) {
-      variables.CONFIGS = configs.join(",");
-      addPermission({
-        actions: [
-          "ssm:GetParameter",
-          "ssm:GetParameters",
-          "ssm:GetParametersByPath",
-          "ssm:GetParameterHistory"
-        ],
-        resources: configs.map((configName) => {
-          return `arn:aws:ssm:${ctx.appConfig.region}:${ctx.accountId}:parameter${configParameterPrefix(ctx.app.name)}/${configName}`;
-        })
-      });
-    }
   }
   if (props.log.retention.value > 0n) {
     const logGroup = new aws2.cloudwatch.LogGroup(group4, "log", {
@@ -157363,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)) {
@@ -157396,7 +157407,7 @@ var createSnsServer = (props) => {
       ]
     };
     setImmediate(() => {
-      dispatch?.(event).catch((error3) => {
+      dispatch?.(event, trace).catch((error3) => {
         reportFailure?.({ kind: "async", event, error: error3 });
       });
     });
@@ -157427,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 }));
@@ -158265,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);
@@ -158427,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 {
@@ -159314,9 +159325,6 @@ ${(errors3.trim() || output.trim()).slice(-2000)}`);
       }
       if (props.ssr && ctx.dev && props.dev) {} else if (props.ssr && isStandaloneFunction(props.ssr) && !ctx.dev) {
         const fn = createLambdaFunction(ctx, `${id}-ssr`, props.ssr);
-        if (ctx.shared.has("router", "endpoint", props.router)) {
-          fn.setEnvironment(`ROUTER_${constantCase(props.router)}_ENDPOINT`, ctx.shared.entry("router", "endpoint", props.router));
-        }
         const deployment = new FunctionDeployment(group4, "ssr-deployment", {
           functionName: fn.lambda.functionName,
           id: ctx.deploymentId ?? "local-0",
@@ -159787,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,
@@ -160011,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",
@@ -164730,6 +164739,7 @@ var startTest = async (props) => {
     for (const error3 of module.errors()) {
       const stack = error3.stacks?.[0];
       const { code, syscall, address, port } = error3;
+      const { name: _n, message: _m2, stack: _s3, stacks: _ss, diff: _d2, cause, ...rest } = error3;
       errors3.push({
         type: error3.name,
         message: error3.message,
@@ -164738,7 +164748,9 @@ var startTest = async (props) => {
         code,
         syscall,
         address,
-        port
+        port,
+        cause,
+        props: Object.keys(rest).length > 0 ? rest : undefined
       });
     }
   }
@@ -164836,7 +164848,20 @@ var logTestErrors = (event) => {
 };
 var formatModuleError = (error3) => {
   const syscall = [error3.syscall, error3.address, error3.port && `port ${error3.port}`].filter(Boolean).join(" ");
-  return [error3.message, syscall && `(${syscall})`, `
+  const extra = [];
+  if (error3.props) {
+    try {
+      extra.push(`props: ${JSON.stringify(error3.props)}`);
+    } catch (_4) {}
+  }
+  if (error3.cause) {
+    try {
+      extra.push(`cause: ${JSON.stringify(error3.cause, Object.getOwnPropertyNames(error3.cause))}`);
+    } catch (_4) {
+      extra.push(`cause: ${String(error3.cause)}`);
+    }
+  }
+  return [error3.message, syscall && `(${syscall})`, ...extra, `
 `, error3.stack ?? "(no stack captured)"].filter(Boolean).join(" ");
 };
 var runTest = async (stack, dir, filters, workspace, opts) => {
@@ -166568,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:/, "");
@@ -166603,7 +166628,7 @@ var createS3Server = (props) => {
           }
         ]
       };
-      dispatch?.(event).catch((error3) => {
+      dispatch?.(event, trace).catch((error3) => {
         reportFailure?.({ kind: "async", routeKey: rule.id, event, error: error3 });
       });
     }
@@ -166670,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") {
@@ -166693,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" });
@@ -166783,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({
@@ -166817,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 ?? "");
@@ -166863,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}`);
@@ -166880,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)
@@ -167012,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;
             }
@@ -167310,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
@@ -167361,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',
@@ -167375,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 = {
@@ -167506,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.");
       }
@@ -167515,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) {
@@ -167583,8 +167688,16 @@ var dashboardHtml = `<!doctype html>
 	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 {
@@ -167764,20 +167877,63 @@ var dashboardHtml = `<!doctype html>
 		gap: 0 20px;
 		align-items: start;
 	}
-	/* The activity feed reads like the log cards. */
-	.activity-card {
-		background: var(--panel);
+	.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 / 55%);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		z-index: 50;
+	}
+	.overlay .modal {
+		background: var(--bg);
 		border: 1px solid var(--border);
-		border-radius: 6px;
-		padding: 8px;
-		margin-top: 8px;
-		max-height: 420px;
+		border-radius: 8px;
+		width: min(760px, 92vw);
+		max-height: 82vh;
 		overflow-y: auto;
-		font-size: 12px;
+		padding: 16px 20px;
 	}
-	.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 { display: flex; align-items: baseline; gap: 10px; }
+	.overlay .modal-head h3 { margin: 0; }
+	.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;
+	}
+	.overlay .modal-head button:hover { color: var(--text); }
+	/* 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 {
@@ -168289,6 +168445,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))
@@ -168320,7 +168520,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),
 			]))
@@ -169326,35 +169526,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)
 
-	card.append(idle, activity)
-	activityCol.append(card)
+	// 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 activityRows = []
+	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()
+		}
+
+		document.body.append(overlay)
+	}
+
+	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)
 
-		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)),
+		while (activityData.length > 200) {
+			activityData.shift()
+		}
+
+		// 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)
+
+		if (data.trace && traceCounts.get(data.trace) > 1) {
+			markTraced(data.trace)
+		}
 
-		while (activityRows.length > 50) {
-			activityRows.shift().remove()
+		while (activityFeed.children.length > 50) {
+			activityFeed.firstChild.remove()
 		}
+
+		activityFeed.scrollTop = activityFeed.scrollHeight
 	}
 
 	const activitySource = new EventSource('/api/events?channel=activity')
@@ -169372,6 +169676,7 @@ const renderHome = main => {
 
 	cleanupPanel = () => {
 		clearInterval(uptimeTimer)
+		closeTrace()
 		healthSource.close()
 		problemSource.close()
 		activitySource.close()
@@ -169404,6 +169709,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(/\\*$/, ''),
 		})),
@@ -169802,7 +170108,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)}`);
     });
   };
@@ -169875,10 +170182,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",
@@ -169890,7 +170198,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) {
@@ -170162,21 +170470,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;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@awsless/cli",
-  "version": "0.1.10",
+  "version": "0.1.12",
   "license": "MIT",
   "type": "module",
   "sideEffects": false,
@@ -38,17 +38,17 @@
     "@opensearch-project/opensearch": "^2.13.0",
     "rolldown": "1.2.1",
     "vitest": "4.1.10",
-    "@awsless/dynamodb-server": "^0.1.8",
-    "@awsless/ts-file-cache": "^0.0.16"
+    "@awsless/ts-file-cache": "^0.0.16",
+    "@awsless/dynamodb-server": "^0.1.10"
   },
   "peerDependencies": {
+    "@awsless/big-float": "^0.1.7",
     "@awsless/duration": "^0.0.4",
+    "@awsless/dynamodb": "^0.3.25",
     "@awsless/json": "^0.0.11",
     "@awsless/lambda": "^0.0.48",
-    "@awsless/big-float": "^0.1.7",
-    "@awsless/dynamodb": "^0.3.23",
-    "@awsless/validate": "^0.2.0",
     "@awsless/s3": "^0.0.22",
+    "@awsless/validate": "^0.2.0",
     "awsless": "^0.1.4",
     "@awsless/weak-cache": "^0.0.1"
   },
@@ -109,24 +109,24 @@
     "zod": "^3.24.2",
     "zod-to-json-schema": "^3.24.3",
     "@awsless/big-float": "^0.1.7",
-    "@awsless/clui": "^0.0.9",
     "@awsless/cloudwatch": "^0.0.1",
-    "@awsless/dynamodb": "^0.3.23",
     "@awsless/duration": "^0.0.4",
     "@awsless/json": "^0.0.11",
-    "@awsless/open-search": "^0.0.28",
+    "@awsless/dynamodb": "^0.3.25",
     "@awsless/iot": "^0.0.5",
-    "@awsless/redis": "^0.1.13",
-    "@awsless/s3": "^0.0.22",
+    "@awsless/clui": "^0.0.9",
+    "@awsless/open-search": "^0.0.28",
+    "@awsless/scheduler": "^0.0.5",
     "@awsless/size": "^0.0.2",
-    "@awsless/lambda": "^0.0.48",
     "@awsless/sns": "^0.0.11",
-    "@awsless/scheduler": "^0.0.5",
+    "@awsless/validate": "^0.2.0",
+    "@awsless/redis": "^0.1.13",
     "@awsless/sqs": "^0.0.24",
+    "@awsless/lambda": "^0.0.48",
     "@awsless/ssm": "^0.0.8",
-    "@awsless/validate": "^0.2.0",
     "@awsless/weak-cache": "^0.0.1",
-    "awsless": "^0.1.4"
+    "awsless": "^0.1.4",
+    "@awsless/s3": "^0.0.22"
   },
   "scripts": {
     "test": "bun cli/build-handlers.ts && pnpm vitest",