autotel-terminal 17.0.2 → 17.0.4

package/dist/cli.cjs

@@ -130,6 +130,10 @@ function createTerminalSpanStream(processor) {
 }
 
 // src/lib/trace-model.ts
+function spanServiceName(span) {
+  const svc = span.attributes?.["service.name"];
+  return typeof svc === "string" ? svc : "unknown";
+}
 function buildTraceMap(spans, maxTraces = 50) {
   const byTrace = /* @__PURE__ */ new Map();
   for (const s of spans) {
@@ -153,6 +157,7 @@ function buildTraceSummaries(traceMap) {
     const durationMs = root ? root.durationMs : 0;
     const hasError = traceSpans.some((s) => s.status === "ERROR");
     const lastEndTime = Math.max(...traceSpans.map((s) => s.endTime));
+    const services = [...new Set(traceSpans.map((s) => spanServiceName(s)))];
     summaries.push({
       traceId,
       rootName: root?.name ?? "unknown",
@@ -160,7 +165,8 @@ function buildTraceSummaries(traceMap) {
       hasError,
       spanCount: traceSpans.length,
       lastEndTime,
-      spans: traceSpans
+      spans: traceSpans,
+      services
     });
   }
   return summaries;
@@ -265,6 +271,56 @@ function truncate(s, width) {
   if (s.length <= width) return s;
   return s.slice(0, Math.max(0, width - 1)) + "\u2026";
 }
+function buildWaterfallBar(spanStart, spanDuration, traceStart, traceDuration, width) {
+  if (traceDuration <= 0) return " ".repeat(width);
+  const offsetRatio = (spanStart - traceStart) / traceDuration;
+  const widthRatio = spanDuration / traceDuration;
+  const barStart = Math.max(0, Math.floor(offsetRatio * width));
+  const barLen = Math.max(1, Math.round(widthRatio * width));
+  const clampedStart = Math.min(barStart, width - 1);
+  const clampedLen = Math.min(barLen, width - clampedStart);
+  const trailing = Math.max(0, width - clampedStart - clampedLen);
+  return " ".repeat(clampedStart) + "\u2588".repeat(clampedLen) + " ".repeat(trailing);
+}
+function buildTimeRuler(totalMs, width) {
+  const left = "0ms";
+  const right = formatDurationMs(totalMs);
+  const mid = formatDurationMs(totalMs / 2);
+  const midPos = Math.floor(width / 2) - Math.floor(mid.length / 2);
+  const rightPos = width - right.length;
+  const chars = Array.from({ length: width }).fill(" ");
+  for (let i = 0; i < left.length && i < width; i++) chars[i] = left[i];
+  if (midPos > left.length + 1 && midPos + mid.length < rightPos - 1) {
+    for (let i = 0; i < mid.length; i++) chars[midPos + i] = mid[i];
+  }
+  for (let i = 0; i < right.length; i++) chars[rightPos + i] = right[i];
+  return chars.join("");
+}
+
+// src/lib/service-colors.ts
+var SERVICE_COLORS = [
+  "cyan",
+  "magenta",
+  "blue",
+  "yellow",
+  "green",
+  "redBright",
+  "cyanBright",
+  "magentaBright",
+  "blueBright",
+  "yellowBright",
+  "greenBright"
+];
+function hashString(s) {
+  let hash = 0;
+  for (let i = 0; i < s.length; i++) {
+    hash = Math.trunc((hash << 5) - hash + s.codePointAt(i));
+  }
+  return Math.abs(hash);
+}
+function getServiceColor(serviceName) {
+  return SERVICE_COLORS[hashString(serviceName) % SERVICE_COLORS.length];
+}
 
 // src/lib/log-model.ts
 function filterLogsBySearch(logs, searchQuery, minLevel) {
@@ -846,6 +902,7 @@ var THROTTLE_MS = 50;
 var MAX_TRACES = 50;
 var NEW_ERROR_DISPLAY_MS = 2e3;
 var RECORD_LIMIT_DEFAULT = 200;
+var LIST_HEIGHT = 20;
 function Dashboard({
   title,
   showStats,
@@ -868,6 +925,7 @@ function Dashboard({
   });
   const [drilldownTraceId, setDrilldownTraceId] = react.useState(null);
   const [drilldownSelectedIndex, setDrilldownSelectedIndex] = react.useState(0);
+  const [drilldownScrollOffset, setDrilldownScrollOffset] = react.useState(0);
   const [drilldownTab, setDrilldownTab] = react.useState("timeline");
   const [newErrorCount, setNewErrorCount] = react.useState(0);
   const [searchMode, setSearchMode] = react.useState(false);
@@ -1275,6 +1333,7 @@ Currently viewing trace ${drilldownTraceId}. This trace has ${drilldownSpans.len
         } else {
           setDrilldownTraceId(null);
           setDrilldownSelectedIndex(0);
+          setDrilldownScrollOffset(0);
           setDrilldownTab("timeline");
         }
         return;
@@ -1289,6 +1348,7 @@ Currently viewing trace ${drilldownTraceId}. This trace has ${drilldownSpans.len
         const nextIdx = key.shift ? (currentIdx - 1 + tabs.length) % tabs.length : (currentIdx + 1) % tabs.length;
         setDrilldownTab(tabs[nextIdx]);
         setDrilldownSelectedIndex(0);
+        setDrilldownScrollOffset(0);
         return;
       }
       if (key.return && drilldownTraceId == null) {
@@ -1320,6 +1380,7 @@ Currently viewing trace ${drilldownTraceId}. This trace has ${drilldownSpans.len
         if (targetTraceId) {
           setDrilldownTraceId(targetTraceId);
           setDrilldownSelectedIndex(preSelectIndex);
+          setDrilldownScrollOffset(Math.max(0, preSelectIndex - LIST_HEIGHT + 1));
           setDrilldownTab("timeline");
           return;
         }
@@ -1328,9 +1389,19 @@ Currently viewing trace ${drilldownTraceId}. This trace has ${drilldownSpans.len
         if (drilldownTraceId != null) {
           const listLength = drilldownTab === "timeline" ? drilldownTimeline.length : drilldownTab === "spans" ? drilldownTree.length : drilldownLogs.length;
           if (key.upArrow) {
-            setDrilldownSelectedIndex((i) => Math.max(0, i - 1));
+            setDrilldownSelectedIndex((prev) => {
+              const next = Math.max(0, prev - 1);
+              setDrilldownScrollOffset((off) => Math.min(next, off));
+              return next;
+            });
           } else {
-            setDrilldownSelectedIndex((i) => Math.min(listLength - 1, i + 1));
+            setDrilldownSelectedIndex((prev) => {
+              const next = Math.min(listLength - 1, prev + 1);
+              setDrilldownScrollOffset(
+                (off) => next >= off + LIST_HEIGHT ? next - LIST_HEIGHT + 1 : off
+              );
+              return next;
+            });
           }
           return;
         }
@@ -1388,12 +1459,14 @@ Currently viewing trace ${drilldownTraceId}. This trace has ${drilldownSpans.len
         setSelected(0);
         setDrilldownTraceId(null);
         setDrilldownSelectedIndex(0);
+        setDrilldownScrollOffset(0);
       }
       if (input === "l") {
         setViewMode((m) => m === "log" ? "trace" : "log");
         setSelected(0);
         setDrilldownTraceId(null);
         setDrilldownSelectedIndex(0);
+        setDrilldownScrollOffset(0);
       }
       if (input === "v") {
         setViewMode(
@@ -1402,12 +1475,14 @@ Currently viewing trace ${drilldownTraceId}. This trace has ${drilldownSpans.len
         setSelected(0);
         setDrilldownTraceId(null);
         setDrilldownSelectedIndex(0);
+        setDrilldownScrollOffset(0);
       }
       if (input === "E") {
         setViewMode((m) => m === "errors" ? "trace" : "errors");
         setSelected(0);
         setDrilldownTraceId(null);
         setDrilldownSelectedIndex(0);
+        setDrilldownScrollOffset(0);
       }
       if (input === "c") {
         setSpans([]);
@@ -1415,6 +1490,7 @@ Currently viewing trace ${drilldownTraceId}. This trace has ${drilldownSpans.len
         setSelected(0);
         setDrilldownTraceId(null);
         setDrilldownSelectedIndex(0);
+        setDrilldownScrollOffset(0);
         setNewErrorCount(0);
         setSpanFilters({ statusGroup: "all" });
         setRecording(false);
@@ -1426,6 +1502,7 @@ Currently viewing trace ${drilldownTraceId}. This trace has ${drilldownSpans.len
         setSelected(0);
         setDrilldownTraceId(null);
         setDrilldownSelectedIndex(0);
+        setDrilldownScrollOffset(0);
         setNewErrorCount(0);
         setSpanFilters({ statusGroup: "all" });
         setPaused(false);
@@ -1436,6 +1513,7 @@ Currently viewing trace ${drilldownTraceId}. This trace has ${drilldownSpans.len
         setSelected(0);
         setDrilldownTraceId(null);
         setDrilldownSelectedIndex(0);
+        setDrilldownScrollOffset(0);
       }
       if (input === "f") {
         setTraceIdMode(true);
@@ -1450,6 +1528,7 @@ Currently viewing trace ${drilldownTraceId}. This trace has ${drilldownSpans.len
         setSelected(0);
         setDrilldownTraceId(null);
         setDrilldownSelectedIndex(0);
+        setDrilldownScrollOffset(0);
       }
       if (input === "S") {
         const svc = currentSpan?.attributes?.["service.name"];
@@ -1458,6 +1537,7 @@ Currently viewing trace ${drilldownTraceId}. This trace has ${drilldownSpans.len
           setSelected(0);
           setDrilldownTraceId(null);
           setDrilldownSelectedIndex(0);
+          setDrilldownScrollOffset(0);
         }
       }
       if (input === "R") {
@@ -1467,6 +1547,7 @@ Currently viewing trace ${drilldownTraceId}. This trace has ${drilldownSpans.len
           setSelected(0);
           setDrilldownTraceId(null);
           setDrilldownSelectedIndex(0);
+          setDrilldownScrollOffset(0);
         }
       }
       if (input === "T") {
@@ -1495,6 +1576,7 @@ Currently viewing trace ${drilldownTraceId}. This trace has ${drilldownSpans.len
           setSelected(0);
           setDrilldownTraceId(null);
           setDrilldownSelectedIndex(0);
+          setDrilldownScrollOffset(0);
           setDrilldownTab("timeline");
         }
         return;
@@ -1525,6 +1607,7 @@ Currently viewing trace ${drilldownTraceId}. This trace has ${drilldownSpans.len
           setSelected(0);
           setDrilldownTraceId(null);
           setDrilldownSelectedIndex(0);
+          setDrilldownScrollOffset(0);
           setDrilldownTab("timeline");
         }
         return;
@@ -1547,15 +1630,25 @@ ${json}
   function renderTreeRow(node, index) {
     const isSel = drilldownTraceId != null && index === drilldownSelectedIndex;
     const prefix = node.depth === 0 ? "" : "  ".repeat(node.depth) + (node.children.length > 0 ? "\u251C\u2500\u2500 " : "\u2514\u2500\u2500 ");
+    const svcName = spanServiceName(node.span);
+    const svcColor = getServiceColor(svcName);
     const statusColor = node.span.status === "ERROR" ? "red" : node.span.durationMs > 500 ? "yellow" : "green";
     return /* @__PURE__ */ jsxRuntime.jsxs(
       ink.Box,
       {
         flexDirection: "row",
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { color: isSel ? "cyan" : void 0, children: isSel ? "\u203A " : "  " }),
+          /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { backgroundColor: isSel ? "blue" : void 0, color: isSel ? "white" : void 0, children: isSel ? "\u25B8 " : "  " }),
           /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { dimColor: true, children: prefix }),
           /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { color: colors ? statusColor : void 0, children: truncate(node.span.name, 24) }),
+          /* @__PURE__ */ jsxRuntime.jsxs(ink.Text, { color: svcColor, children: [
+            " ",
+            truncate(svcName, 10)
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(ink.Text, { dimColor: true, children: [
+            " ",
+            node.span.kind ?? ""
+          ] }),
           /* @__PURE__ */ jsxRuntime.jsxs(ink.Text, { dimColor: true, children: [
             " ",
             formatDurationMs(node.span.durationMs)
@@ -1582,9 +1675,7 @@ ${json}
     ink.Box,
     {
       flexDirection: "column",
-      borderStyle: "round",
-      padding: 1,
-      borderColor: colors ? "cyan" : void 0,
+      paddingX: 1,
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs(ink.Box, { justifyContent: "space-between", marginBottom: 1, children: [
           /* @__PURE__ */ jsxRuntime.jsxs(ink.Text, { bold: true, children: [
@@ -1598,69 +1689,283 @@ ${json}
             /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { color: paused ? "yellow" : "green", children: headerRight }, "status")
           ] })
         ] }),
-        showHelp ? /* @__PURE__ */ jsxRuntime.jsxs(
-          ink.Box,
-          {
-            flexDirection: "column",
-            borderStyle: "single",
-            borderColor: "gray",
-            paddingX: 1,
-            marginBottom: 1,
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { bold: true, children: "Shortcuts" }),
-              /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { dimColor: true, children: "Navigation: \u2191/\u2193, Enter, Esc" }),
-              /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { dimColor: true, children: "Views: t (trace/spans), l (logs), v (services), E (errors)" }),
-              /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { dimColor: true, children: "Search: / (Tab autocompletes traceId)" }),
-              /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { dimColor: true, children: "Filters: e (errors-only), S (service), R (route), H (status), f (traceId), x (clear)" }),
-              /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { dimColor: true, children: "Capture: p (pause), r (record snapshot), J (export trace JSON)" }),
-              /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { dimColor: true, children: "AI: a (toggle AI panel)" }),
-              /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { dimColor: true, children: "Jump: T (trace for item), L (logs for item)" }),
-              /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { dimColor: true, children: "Drill-down: Enter (open trace), Tab (cycle tabs), Esc (back)" }),
-              /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { dimColor: true, children: "Other: c (clear), ? (help), Ctrl+C (exit)" })
-            ]
-          }
-        ) : /* @__PURE__ */ jsxRuntime.jsxs(
-          ink.Box,
-          {
-            marginBottom: 1,
-            flexDirection: "row",
-            justifyContent: "space-between",
-            children: [
-              searchMode ? /* @__PURE__ */ jsxRuntime.jsxs(ink.Text, { color: "cyan", children: [
-                "Search: ",
-                searchQuery || "(type to filter)",
-                /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { dimColor: true, children: " (Tab: match traceId, Esc: cancel)" })
-              ] }, "search") : traceIdMode ? /* @__PURE__ */ jsxRuntime.jsxs(ink.Text, { color: "yellow", children: [
-                "TraceId: ",
-                traceIdInput || "(type prefix, Tab to complete)",
-                traceIdInput.length >= 2 && /* @__PURE__ */ jsxRuntime.jsxs(ink.Text, { dimColor: true, children: [
-                  " ",
-                  "\u2192",
+        /* @__PURE__ */ jsxRuntime.jsxs(ink.Box, { marginBottom: 0, flexDirection: "column", children: [
+          searchMode ? /* @__PURE__ */ jsxRuntime.jsxs(ink.Text, { color: "cyan", children: [
+            "Search: ",
+            searchQuery || "(type to filter)",
+            /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { dimColor: true, children: " (Tab: match traceId, Esc: cancel)" })
+          ] }) : traceIdMode ? /* @__PURE__ */ jsxRuntime.jsxs(ink.Text, { color: "yellow", children: [
+            "TraceId: ",
+            traceIdInput || "(type prefix, Tab to complete)",
+            traceIdInput.length >= 2 && /* @__PURE__ */ jsxRuntime.jsxs(ink.Text, { dimColor: true, children: [
+              " \u2192 ",
+              traceSummaries.find(
+                (t2) => t2.traceId.toLowerCase().startsWith(traceIdInput.toLowerCase())
+              )?.traceId.slice(0, 16) ?? "no match",
+              "\u2026"
+            ] })
+          ] }) : /* @__PURE__ */ jsxRuntime.jsxs(ink.Box, { flexDirection: "row", justifyContent: "space-between", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { dimColor: true, children: drilldownTraceId == null ? "\u2191/\u2193 select \u2022 Enter open \u2022 Tab cycle tabs \u2022 Esc back \u2022 T trace \u2022 L logs \u2022 a AI \u2022 ? help" : "\u2191/\u2193 select \u2022 Tab cycle tabs \u2022 Esc back \u2022 T trace \u2022 L logs \u2022 a AI \u2022 ? help" }),
+            /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { dimColor: true, children: viewMode === "trace" ? `traces ${filteredSummaries.length}/${traceSummaries.length}` : viewMode === "span" ? `spans ${filteredSpans.length}/${spans.length}` : viewMode === "service-summary" ? `services ${serviceStats.length}` : viewMode === "errors" ? `errors ${filteredErrorSummaries.length}/${errorSummaries.length}` : `logs ${filteredLogs.length}/${logs.length}` })
+          ] }),
+          showHelp && /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { dimColor: true, children: "Views: t/l/v/E \u2022 Search: / \u2022 Filters: e/S/R/H/f/x \u2022 Capture: p/r/J \u2022 AI: a \u2022 Clear: c" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(ink.Box, { marginBottom: 0, children: /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { dimColor: true, children: spanFilters.serviceName || spanFilters.route || spanFilters.statusGroup !== "all" || spanFilters.traceId ? `filters:${spanFilters.serviceName ? ` service=${spanFilters.serviceName}` : ""}${spanFilters.route ? ` route=${spanFilters.route}` : ""}${spanFilters.statusGroup && spanFilters.statusGroup !== "all" ? ` status=${spanFilters.statusGroup}` : ""}${spanFilters.traceId ? ` trace=${spanFilters.traceId.slice(0, 8)}\u2026` : ""}` : "filters: none" }) }),
+        drilldownTraceId != null ? /* @__PURE__ */ jsxRuntime.jsxs(ink.Box, { flexDirection: "column", borderStyle: "round", borderColor: "gray", paddingX: 1, paddingY: 0, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(ink.Box, { marginBottom: 0, flexDirection: "column", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(ink.Text, { bold: true, children: [
+              "Trace ",
+              drilldownTraceId.slice(0, 16),
+              "\u2026"
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs(ink.Box, { flexDirection: "row", gap: 1, children: [
+              drilldownSummary?.services?.map((svc) => /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { color: getServiceColor(svc), children: svc }, svc)),
+              /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { dimColor: true, children: "\xB7" }),
+              /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { children: drilldownSummary?.rootName ?? "unknown" }),
+              /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { dimColor: true, children: "\xB7" }),
+              /* @__PURE__ */ jsxRuntime.jsxs(ink.Text, { dimColor: true, children: [
+                drilldownSpans.length,
+                " spans"
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { dimColor: true, children: "\xB7" }),
+              /* @__PURE__ */ jsxRuntime.jsxs(ink.Text, { dimColor: true, children: [
+                drilldownSummary?.services?.length ?? 0,
+                " services"
+              ] }),
+              drilldownSummary?.hasError && /* @__PURE__ */ jsxRuntime.jsxs(ink.Text, { color: "red", children: [
+                " ",
+                "ERROR"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs(ink.Box, { flexDirection: "row", gap: 2, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { dimColor: true, children: "Duration: " }),
+              /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { color: "green", children: formatDurationMs(drilldownSummary?.durationMs ?? 0) })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(ink.Box, { marginBottom: 0, flexDirection: "row", gap: 2, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              ink.Text,
+              {
+                color: drilldownTab === "timeline" ? "blue" : void 0,
+                dimColor: drilldownTab !== "timeline",
+                bold: drilldownTab === "timeline",
+                children: "Timeline"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              ink.Text,
+              {
+                color: drilldownTab === "spans" ? "blue" : void 0,
+                dimColor: drilldownTab !== "spans",
+                bold: drilldownTab === "spans",
+                children: [
+                  "Spans (",
+                  drilldownSpans.length,
+                  ")"
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              ink.Text,
+              {
+                color: drilldownTab === "logs" ? "blue" : void 0,
+                dimColor: drilldownTab !== "logs",
+                bold: drilldownTab === "logs",
+                children: [
+                  "Logs (",
+                  drilldownLogs.length,
+                  ")"
+                ]
+              }
+            )
+          ] }),
+          drilldownTab === "timeline" && (() => {
+            const NAME_COL = 28;
+            const SERVICE_COL = 12;
+            const KIND_COL = 10;
+            let traceStartMs = Infinity;
+            for (const s of drilldownSummary?.spans ?? []) {
+              if (s.startTime < traceStartMs) traceStartMs = s.startTime;
+            }
+            if (traceStartMs === Infinity) traceStartMs = 0;
+            const traceDurMs = drilldownSummary?.durationMs ?? 1;
+            const WATERFALL_WIDTH = 44;
+            const items = drilldownTimeline.slice(drilldownScrollOffset, drilldownScrollOffset + LIST_HEIGHT);
+            return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(ink.Box, { flexDirection: "row", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { dimColor: true, children: "".padEnd(NAME_COL + SERVICE_COL + KIND_COL + 2) }),
+                /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { dimColor: true, children: buildTimeRuler(traceDurMs, WATERFALL_WIDTH) })
+              ] }),
+              items.map((item, i) => {
+                const isSel = i + drilldownScrollOffset === drilldownSelectedIndex;
+                if (item.type === "span" && item.span) {
+                  const s = item.span;
+                  const node = drilldownTree.find(
+                    (n) => n.span.spanId === s.spanId
+                  );
+                  const depth = node?.depth ?? 0;
+                  const indent = "  ".repeat(Math.min(depth, 4));
+                  const nameWidth = NAME_COL - Math.min(depth, 4) * 2 - 1;
+                  const svcName = spanServiceName(s);
+                  const svcColor = getServiceColor(svcName);
+                  const kindStr = (s.kind ?? "").padEnd(KIND_COL);
+                  const svcStr = truncate(svcName, SERVICE_COL - 2).padEnd(SERVICE_COL);
+                  const namePart = `${indent}${truncate(s.name, nameWidth)}`.padEnd(NAME_COL);
+                  const bar = buildWaterfallBar(
+                    s.startTime,
+                    s.durationMs,
+                    traceStartMs,
+                    traceDurMs,
+                    WATERFALL_WIDTH
+                  );
+                  return /* @__PURE__ */ jsxRuntime.jsxs(ink.Box, { flexDirection: "row", children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs(ink.Text, { backgroundColor: isSel ? "blue" : void 0, color: isSel ? "white" : void 0, children: [
+                      isSel ? "\u25B8" : " ",
+                      namePart
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsxs(ink.Text, { color: svcColor, children: [
+                      " ",
+                      svcStr
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { dimColor: true, children: kindStr }),
+                    /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { color: s.status === "ERROR" ? "red" : svcColor, children: bar }),
+                    /* @__PURE__ */ jsxRuntime.jsxs(ink.Text, { color: s.status === "ERROR" ? "red" : svcColor, children: [
+                      " ",
+                      formatDurationMs(s.durationMs)
+                    ] })
+                  ] }, `${s.spanId}-${i}`);
+                } else if (item.type === "log" && item.log) {
+                  const l = item.log;
+                  const levelColor = l.level === "error" ? "red" : l.level === "warn" ? "yellow" : "blue";
+                  const relTime = drilldownSummary ? `+${formatDurationMs(l.time - traceStartMs)}` : "";
+                  const logName = `  ${l.level.toUpperCase()} ${truncate(l.message, NAME_COL - 8)}`.padEnd(NAME_COL);
+                  const logOffset = drilldownSummary ? Math.floor((l.time - traceStartMs) / traceDurMs * WATERFALL_WIDTH) : 0;
+                  const clampedOffset = Math.max(0, Math.min(logOffset, WATERFALL_WIDTH - 1));
+                  const logBar = " ".repeat(clampedOffset) + "\xB7" + " ".repeat(WATERFALL_WIDTH - clampedOffset - 1);
+                  return /* @__PURE__ */ jsxRuntime.jsxs(ink.Box, { flexDirection: "row", children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs(ink.Text, { backgroundColor: isSel ? "blue" : void 0, color: isSel ? "white" : void 0, children: [
+                      isSel ? "\u25B8" : " ",
+                      /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { color: levelColor, children: logName })
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { dimColor: true, children: " ".padEnd(SERVICE_COL + KIND_COL + 1) }),
+                    /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { dimColor: true, children: logBar }),
+                    /* @__PURE__ */ jsxRuntime.jsxs(ink.Text, { dimColor: true, children: [
+                      " ",
+                      relTime
+                    ] })
+                  ] }, `log-${i}`);
+                }
+                return null;
+              }),
+              Array.from({ length: Math.max(0, LIST_HEIGHT - items.length) }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(ink.Box, { children: /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { children: " " }) }, `pad-${i}`))
+            ] });
+          })(),
+          drilldownTab === "spans" && drilldownTree.slice(drilldownScrollOffset, drilldownScrollOffset + LIST_HEIGHT).map((node, i) => renderTreeRow(node, i + drilldownScrollOffset)),
+          drilldownTab === "spans" && Array.from({ length: Math.max(0, LIST_HEIGHT - Math.min(drilldownTree.length, LIST_HEIGHT)) }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(ink.Box, { children: /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { children: " " }) }, `pad-${i}`)),
+          drilldownTab === "logs" && drilldownLogs.slice(drilldownScrollOffset, drilldownScrollOffset + LIST_HEIGHT).map((log, i) => {
+            const isSel = i + drilldownScrollOffset === drilldownSelectedIndex;
+            const levelColor = log.level === "error" ? "red" : log.level === "warn" ? "yellow" : log.level === "info" ? "green" : void 0;
+            return /* @__PURE__ */ jsxRuntime.jsx(ink.Box, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+              ink.Text,
+              {
+                backgroundColor: isSel ? "blue" : void 0,
+                color: isSel ? "white" : void 0,
+                children: [
+                  isSel ? "\u25B8" : " ",
+                  /* @__PURE__ */ jsxRuntime.jsxs(ink.Text, { color: levelColor, children: [
+                    " ",
+                    log.level.toUpperCase()
+                  ] }),
                   " ",
-                  traceSummaries.find(
-                    (t2) => t2.traceId.toLowerCase().startsWith(traceIdInput.toLowerCase())
-                  )?.traceId.slice(0, 16) ?? "no match",
-                  "\u2026"
+                  /* @__PURE__ */ jsxRuntime.jsxs(ink.Text, { dimColor: true, children: [
+                    "[",
+                    truncate(log.message, 50),
+                    "]"
+                  ] })
+                ]
+              }
+            ) }, `log-${i}`);
+          }),
+          drilldownTab === "logs" && Array.from({ length: Math.max(0, LIST_HEIGHT - Math.min(drilldownLogs.length, LIST_HEIGHT)) }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(ink.Box, { children: /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { children: " " }) }, `pad-${i}`)),
+          drilldownSelectedItem?.type === "span" && drilldownSelectedItem.span && (() => {
+            const span = drilldownSelectedItem.span;
+            const { key: keyAttrs, rest: restAttrs } = keyAttrsAndRest(span.attributes);
+            return /* @__PURE__ */ jsxRuntime.jsxs(ink.Box, { marginTop: 1, flexDirection: "column", borderStyle: "single", borderColor: "gray", paddingX: 1, children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(ink.Box, { flexDirection: "row", gap: 2, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { bold: true, children: span.name }),
+                /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { color: getServiceColor(spanServiceName(span)), children: spanServiceName(span) }),
+                /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { dimColor: true, children: span.kind ?? "" }),
+                /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { color: span.status === "ERROR" ? "red" : "green", children: span.status }),
+                /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { children: formatDurationMs(span.durationMs) })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs(ink.Box, { flexDirection: "row", gap: 2, children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(ink.Text, { dimColor: true, children: [
+                  "Trace: ",
+                  span.traceId
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs(ink.Text, { dimColor: true, children: [
+                  "Span: ",
+                  span.spanId
+                ] }),
+                span.parentSpanId && /* @__PURE__ */ jsxRuntime.jsxs(ink.Text, { dimColor: true, children: [
+                  "Parent: ",
+                  span.parentSpanId
                 ] })
-              ] }, "traceid-input") : drilldownTraceId == null ? /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { dimColor: true, children: "\u2191/\u2193 select \u2022 Enter open \u2022 Esc back \u2022 t spans \u2022 l logs \u2022 v svc \u2022 E errors \u2022 T trace \u2022 L logs \u2022 / search \u2022 f traceId \u2022 p pause \u2022 r record \u2022 e errors \u2022 c clear \u2022 ? help" }, "controls") : /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { dimColor: true, children: "\u2191/\u2193 select \u2022 Tab cycle tabs \u2022 Esc back \u2022 T trace \u2022 L logs \u2022 a AI \u2022 ? help" }, "controls"),
-              /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { dimColor: true, children: viewMode === "trace" ? `traces ${filteredSummaries.length}/${traceSummaries.length}` : viewMode === "span" ? `spans ${filteredSpans.length}/${spans.length}` : viewMode === "service-summary" ? `services ${serviceStats.length}/${serviceStats.length}` : viewMode === "errors" ? `errors ${filteredErrorSummaries.length}/${errorSummaries.length}` : `logs ${filteredLogs.length}/${logs.length}` }, "count")
-            ]
-          }
-        ),
-        (spanFilters.serviceName || spanFilters.route || spanFilters.statusGroup !== "all" || spanFilters.traceId) && /* @__PURE__ */ jsxRuntime.jsx(ink.Box, { marginBottom: 1, children: /* @__PURE__ */ jsxRuntime.jsxs(ink.Text, { dimColor: true, children: [
-          "filters:",
-          spanFilters.serviceName ? ` service=${spanFilters.serviceName}` : "",
-          spanFilters.route ? ` route=${spanFilters.route}` : "",
-          spanFilters.statusGroup && spanFilters.statusGroup !== "all" ? ` status=${spanFilters.statusGroup}` : "",
-          spanFilters.traceId ? ` trace=${spanFilters.traceId.slice(0, 8)}\u2026` : ""
-        ] }) }),
-        /* @__PURE__ */ jsxRuntime.jsxs(ink.Box, { flexDirection: "row", gap: 2, children: [
+              ] }),
+              keyAttrs.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(ink.Box, { marginTop: 1, flexDirection: "column", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { bold: true, children: "Key attributes" }),
+                keyAttrs.slice(0, 6).map(([k, v]) => /* @__PURE__ */ jsxRuntime.jsxs(ink.Text, { dimColor: true, children: [
+                  truncate(k, 18),
+                  ": ",
+                  truncate(String(v), 28)
+                ] }, k))
+              ] }),
+              restAttrs.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(ink.Box, { marginTop: 1, flexDirection: "column", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { bold: true, children: "Attributes" }),
+                restAttrs.slice(0, 8).map(([k, v]) => /* @__PURE__ */ jsxRuntime.jsxs(ink.Text, { dimColor: true, children: [
+                  truncate(k, 18),
+                  ": ",
+                  truncate(String(v), 28)
+                ] }, k))
+              ] })
+            ] });
+          })(),
+          drilldownSelectedItem?.type === "log" && drilldownSelectedItem.log && (() => {
+            const log = drilldownSelectedItem.log;
+            return /* @__PURE__ */ jsxRuntime.jsxs(ink.Box, { marginTop: 1, flexDirection: "column", borderStyle: "single", borderColor: "gray", paddingX: 1, children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(ink.Box, { flexDirection: "row", gap: 2, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { bold: true, children: log.level.toUpperCase() }),
+                /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { children: log.message })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs(ink.Text, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { dimColor: true, children: "Time: " }),
+                /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { children: new Date(log.time).toISOString() })
+              ] }),
+              log.traceId && /* @__PURE__ */ jsxRuntime.jsxs(ink.Text, { dimColor: true, children: [
+                "Trace: ",
+                log.traceId
+              ] }),
+              log.spanId && /* @__PURE__ */ jsxRuntime.jsxs(ink.Text, { dimColor: true, children: [
+                "Span: ",
+                log.spanId
+              ] }),
+              log.attributes && Object.keys(log.attributes).length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(ink.Box, { marginTop: 1, flexDirection: "column", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { bold: true, children: "Attributes" }),
+                Object.entries(log.attributes).slice(0, 10).map(([k, v]) => /* @__PURE__ */ jsxRuntime.jsxs(ink.Text, { dimColor: true, children: [
+                  truncate(k, 18),
+                  ": ",
+                  truncate(String(v), 40)
+                ] }, k))
+              ] })
+            ] });
+          })()
+        ] }) : /* @__PURE__ */ jsxRuntime.jsxs(ink.Box, { flexDirection: "row", gap: 2, children: [
           /* @__PURE__ */ jsxRuntime.jsxs(
             ink.Box,
             {
               flexDirection: "column",
               width: "55%",
-              borderStyle: "single",
+              borderStyle: "round",
               borderColor: "gray",
               paddingX: 1,
               paddingY: 0,
@@ -1677,250 +1982,153 @@ ${json}
                     searchQuery
                   ] }, "search-label")
                 ] }),
-                drilldownTraceId != null && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs(ink.Box, { marginBottom: 0, flexDirection: "row", gap: 2, children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { color: "yellow", children: drilldownSummary?.rootName ?? "unknown" }),
-                    /* @__PURE__ */ jsxRuntime.jsxs(ink.Text, { dimColor: true, children: [
-                      drilldownTraceId.slice(0, 16),
-                      "\u2026"
-                    ] }),
-                    /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { color: "green", children: drilldownSummary ? formatDurationMs(drilldownSummary.durationMs) : "?" }),
-                    /* @__PURE__ */ jsxRuntime.jsxs(ink.Text, { dimColor: true, children: [
-                      drilldownSpans.length,
-                      " spans \u2022 ",
-                      drilldownLogs.length,
-                      " logs"
-                    ] })
+                /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: viewMode === "trace" ? filteredSummaries.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs(ink.Box, { flexDirection: "column", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { dimColor: true, children: "No traces yet. Call a traced function or hit an endpoint to see them here." }),
+                    /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { dimColor: true, children: "Tip: trace() your handlers with autotel to get spans." })
                   ] }),
-                  /* @__PURE__ */ jsxRuntime.jsxs(ink.Box, { marginBottom: 0, flexDirection: "row", gap: 2, children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      ink.Text,
-                      {
-                        color: drilldownTab === "timeline" ? "yellow" : void 0,
-                        dimColor: drilldownTab !== "timeline",
-                        underline: drilldownTab === "timeline",
-                        children: "Timeline"
-                      }
-                    ),
-                    /* @__PURE__ */ jsxRuntime.jsxs(
-                      ink.Text,
-                      {
-                        color: drilldownTab === "spans" ? "yellow" : void 0,
-                        dimColor: drilldownTab !== "spans",
-                        underline: drilldownTab === "spans",
-                        children: [
-                          "Spans (",
-                          drilldownSpans.length,
-                          ")"
-                        ]
-                      }
-                    ),
-                    /* @__PURE__ */ jsxRuntime.jsxs(
-                      ink.Text,
-                      {
-                        color: drilldownTab === "logs" ? "yellow" : void 0,
-                        dimColor: drilldownTab !== "logs",
-                        underline: drilldownTab === "logs",
-                        children: [
-                          "Logs (",
-                          drilldownLogs.length,
-                          ")"
-                        ]
-                      }
-                    )
-                  ] })
-                ] }),
-                drilldownTraceId != null && drilldownTab === "timeline" && drilldownTimeline.map((item, i) => {
-                  const isSel = i === drilldownSelectedIndex;
-                  if (item.type === "span" && item.span) {
-                    const s = item.span;
-                    const node = drilldownTree.find(
-                      (n) => n.span.spanId === s.spanId
-                    );
-                    const depth = node?.depth ?? 0;
-                    const indent = "  ".repeat(depth);
-                    const barLen = Math.max(
-                      1,
-                      Math.round(
-                        s.durationMs / Math.max(1, drilldownSummary?.durationMs ?? 1) * 10
-                      )
-                    );
-                    const bar = "\u2588".repeat(barLen);
-                    return /* @__PURE__ */ jsxRuntime.jsx(ink.Box, { children: /* @__PURE__ */ jsxRuntime.jsxs(
-                      ink.Text,
+                  Array.from({ length: Math.max(0, LIST_HEIGHT - 2) }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(ink.Box, { children: /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { children: " " }) }, `pad-${i}`))
+                ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  filteredSummaries.slice(0, 20).map((t2, i) => {
+                    const isSel = i === selected;
+                    return /* @__PURE__ */ jsxRuntime.jsxs(ink.Box, { flexDirection: "row", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { color: isSel ? "cyan" : void 0, children: isSel ? "\u25B8 " : "  " }),
+                      /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { color: t2.hasError ? "red" : "yellow", bold: isSel, children: truncate(t2.rootName, 28) }),
+                      /* @__PURE__ */ jsxRuntime.jsxs(ink.Text, { dimColor: true, children: [
+                        "  ",
+                        t2.spans.length,
+                        " spans"
+                      ] }),
+                      /* @__PURE__ */ jsxRuntime.jsxs(ink.Text, { color: "green", children: [
+                        "  ",
+                        formatDurationMs(t2.durationMs)
+                      ] }),
+                      /* @__PURE__ */ jsxRuntime.jsxs(ink.Text, { dimColor: true, children: [
+                        "  ",
+                        formatRelative(t2.lastEndTime)
+                      ] }),
+                      /* @__PURE__ */ jsxRuntime.jsxs(ink.Text, { dimColor: true, children: [
+                        "  ",
+                        t2.traceId.slice(0, 12),
+                        "\u2026"
+                      ] }),
+                      t2.hasError && /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { color: "red", children: " \u25CF" })
+                    ] }, t2.traceId);
+                  }),
+                  Array.from({ length: Math.max(0, LIST_HEIGHT - Math.min(filteredSummaries.length, 20)) }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(ink.Box, { children: /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { children: " " }) }, `pad-${i}`))
+                ] }) : viewMode === "span" ? filteredSpans.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs(ink.Box, { flexDirection: "column", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { dimColor: true, children: "No spans yet. Call a traced function or hit an endpoint to see them here." }),
+                    /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { dimColor: true, children: "Tip: trace() your handlers with autotel to get spans." })
+                  ] }),
+                  Array.from({ length: Math.max(0, LIST_HEIGHT - 2) }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(ink.Box, { children: /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { children: " " }) }, `pad-${i}`))
+                ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  filteredSpans.slice(0, 20).map((s, i) => {
+                    const isSel = i === selected;
+                    const svcName = spanServiceName(s);
+                    const svcColor = getServiceColor(svcName);
+                    const statusColor = s.status === "ERROR" ? "red" : s.durationMs > 500 ? "yellow" : "green";
+                    return /* @__PURE__ */ jsxRuntime.jsxs(
+                      ink.Box,
                       {
-                        backgroundColor: isSel ? "gray" : void 0,
-                        color: isSel ? "white" : void 0,
+                        flexDirection: "row",
                         children: [
-                          isSel ? "\u25B8" : " ",
-                          " ",
-                          indent,
-                          /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { color: "green", children: bar }),
-                          " ",
-                          s.name,
-                          " ",
+                          /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { color: isSel ? "cyan" : void 0, children: isSel ? "\u203A " : "  " }),
+                          /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { color: colors ? statusColor : void 0, children: truncate(s.name, 26) }),
+                          /* @__PURE__ */ jsxRuntime.jsxs(ink.Text, { color: svcColor, children: [
+                            " ",
+                            truncate(svcName, 10)
+                          ] }),
                           /* @__PURE__ */ jsxRuntime.jsxs(ink.Text, { dimColor: true, children: [
-                            formatDurationMs(s.durationMs),
-                            s.kind ? ` ${s.kind}` : ""
-                          ] })
-                        ]
-                      }
-                    ) }, `${s.spanId}-${i}`);
-                  } else if (item.type === "log" && item.log) {
-                    const l = item.log;
-                    const levelColor = l.level === "error" ? "red" : l.level === "warn" ? "yellow" : "blue";
-                    const relTime = drilldownSummary ? `+${formatDurationMs(l.time - (drilldownSummary.spans[0]?.startTime ?? l.time))}` : "";
-                    return /* @__PURE__ */ jsxRuntime.jsx(ink.Box, { children: /* @__PURE__ */ jsxRuntime.jsxs(
-                      ink.Text,
-                      {
-                        backgroundColor: isSel ? "gray" : void 0,
-                        color: isSel ? "white" : void 0,
-                        children: [
-                          isSel ? "\u25B8" : " ",
-                          "  ",
-                          /* @__PURE__ */ jsxRuntime.jsxs(ink.Text, { color: levelColor, children: [
-                            "\u2139 ",
-                            l.level.toUpperCase()
+                            " ",
+                            formatDurationMs(s.durationMs)
                           ] }),
-                          " ",
-                          /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { dimColor: true, children: truncate(l.message, 40) }),
-                          " ",
-                          /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { dimColor: true, children: relTime })
+                          /* @__PURE__ */ jsxRuntime.jsxs(ink.Text, { dimColor: true, children: [
+                            " ",
+                            formatRelative(s.endTime)
+                          ] })
                         ]
-                      }
-                    ) }, `log-${i}`);
-                  }
-                  return null;
-                }),
-                drilldownTraceId != null && drilldownTab === "spans" && drilldownTree.map((node, i) => renderTreeRow(node, i)),
-                drilldownTraceId != null && drilldownTab === "logs" && drilldownLogs.map((log, i) => {
-                  const isSel = i === drilldownSelectedIndex;
-                  const levelColor = log.level === "error" ? "red" : log.level === "warn" ? "yellow" : log.level === "info" ? "green" : void 0;
-                  return /* @__PURE__ */ jsxRuntime.jsx(ink.Box, { children: /* @__PURE__ */ jsxRuntime.jsxs(
-                    ink.Text,
-                    {
-                      backgroundColor: isSel ? "gray" : void 0,
-                      color: isSel ? "white" : void 0,
-                      children: [
-                        isSel ? "\u25B8" : " ",
-                        /* @__PURE__ */ jsxRuntime.jsxs(ink.Text, { color: levelColor, children: [
-                          " ",
-                          log.level.toUpperCase()
-                        ] }),
+                      },
+                      `${s.spanId}-${s.startTime}`
+                    );
+                  }),
+                  Array.from({ length: Math.max(0, LIST_HEIGHT - Math.min(filteredSpans.length, 20)) }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(ink.Box, { children: /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { children: " " }) }, `pad-${i}`))
+                ] }) : viewMode === "service-summary" ? serviceStats.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(ink.Box, { flexDirection: "column", children: /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { dimColor: true, children: "No service stats yet. Add `service.name` attributes to spans." }) }),
+                  Array.from({ length: Math.max(0, LIST_HEIGHT - 1) }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(ink.Box, { children: /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { children: " " }) }, `pad-${i}`))
+                ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  serviceStats.slice(0, 20).map((svc, i) => {
+                    const isSel = i === selected;
+                    const errorRate = svc.total ? svc.errors / svc.total * 100 : 0;
+                    return /* @__PURE__ */ jsxRuntime.jsxs(ink.Box, { flexDirection: "row", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { color: isSel ? "cyan" : void 0, children: isSel ? "\u203A " : "  " }),
+                      /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { children: truncate(svc.serviceName, 16) }),
+                      /* @__PURE__ */ jsxRuntime.jsxs(ink.Text, { dimColor: true, children: [
                         " ",
-                        /* @__PURE__ */ jsxRuntime.jsxs(ink.Text, { dimColor: true, children: [
-                          "[",
-                          truncate(log.message, 50),
-                          "]"
-                        ] })
-                      ]
-                    }
-                  ) }, `log-${i}`);
-                }),
-                drilldownTraceId == null && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: viewMode === "trace" ? filteredSummaries.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs(ink.Box, { flexDirection: "column", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { dimColor: true, children: "No traces yet. Call a traced function or hit an endpoint to see them here." }),
-                  /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { dimColor: true, children: "Tip: trace() your handlers with autotel to get spans." })
-                ] }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: drilldownTraceId == null ? filteredSummaries.slice(0, 20).map((t2, i) => {
-                  const isSel = i === selected;
-                  return /* @__PURE__ */ jsxRuntime.jsxs(ink.Box, { flexDirection: "row", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { color: isSel ? "cyan" : void 0, children: isSel ? "\u203A " : "  " }),
-                    /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { color: t2.hasError ? "red" : void 0, children: truncate(t2.rootName, 20) }),
-                    /* @__PURE__ */ jsxRuntime.jsxs(ink.Text, { dimColor: true, children: [
-                      " ",
-                      formatDurationMs(t2.durationMs)
-                    ] }),
-                    /* @__PURE__ */ jsxRuntime.jsxs(ink.Text, { dimColor: true, children: [
-                      " ",
-                      truncate(t2.traceId, 8)
-                    ] }),
-                    /* @__PURE__ */ jsxRuntime.jsxs(ink.Text, { dimColor: true, children: [
-                      " ",
-                      formatRelative(t2.lastEndTime)
-                    ] })
-                  ] }, t2.traceId);
-                }) : traceTree.slice(0, 20).map((node, i) => renderTreeRow(node, i)) }) : viewMode === "span" ? filteredSpans.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs(ink.Box, { flexDirection: "column", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { dimColor: true, children: "No spans yet. Call a traced function or hit an endpoint to see them here." }),
-                  /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { dimColor: true, children: "Tip: trace() your handlers with autotel to get spans." })
-                ] }) : filteredSpans.slice(0, 20).map((s, i) => {
-                  const isSel = i === selected;
-                  const statusColor = s.status === "ERROR" ? "red" : s.durationMs > 500 ? "yellow" : "green";
-                  return /* @__PURE__ */ jsxRuntime.jsxs(
-                    ink.Box,
-                    {
-                      flexDirection: "row",
-                      children: [
-                        /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { color: isSel ? "cyan" : void 0, children: isSel ? "\u203A " : "  " }),
-                        /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { color: colors ? statusColor : void 0, children: truncate(s.name, 26) }),
-                        /* @__PURE__ */ jsxRuntime.jsxs(ink.Text, { dimColor: true, children: [
-                          " ",
-                          formatDurationMs(s.durationMs)
-                        ] }),
-                        /* @__PURE__ */ jsxRuntime.jsxs(ink.Text, { dimColor: true, children: [
-                          " ",
-                          formatRelative(s.endTime)
-                        ] })
-                      ]
-                    },
-                    `${s.spanId}-${s.startTime}`
-                  );
-                }) : viewMode === "service-summary" ? serviceStats.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(ink.Box, { flexDirection: "column", children: /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { dimColor: true, children: "No service stats yet. Add `service.name` attributes to spans." }) }) : serviceStats.slice(0, 20).map((svc, i) => {
-                  const isSel = i === selected;
-                  const errorRate = svc.total ? svc.errors / svc.total * 100 : 0;
-                  return /* @__PURE__ */ jsxRuntime.jsxs(ink.Box, { flexDirection: "row", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { color: isSel ? "cyan" : void 0, children: isSel ? "\u203A " : "  " }),
-                    /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { children: truncate(svc.serviceName, 16) }),
-                    /* @__PURE__ */ jsxRuntime.jsxs(ink.Text, { dimColor: true, children: [
-                      " ",
-                      svc.errors,
-                      "/",
-                      svc.total
-                    ] }),
-                    /* @__PURE__ */ jsxRuntime.jsxs(ink.Text, { dimColor: true, children: [
-                      " ",
-                      errorRate.toFixed(0),
-                      "%"
-                    ] }),
-                    /* @__PURE__ */ jsxRuntime.jsxs(ink.Text, { dimColor: true, children: [
-                      " p95 ",
-                      formatDurationMs(svc.p95Ms)
-                    ] })
-                  ] }, svc.serviceName);
-                }) : viewMode === "errors" ? filteredErrorSummaries.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(ink.Box, { flexDirection: "column", children: /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { dimColor: true, children: "No errors yet." }) }) : filteredErrorSummaries.slice(0, 20).map((e, i) => {
-                  const isSel = i === selected;
-                  return /* @__PURE__ */ jsxRuntime.jsxs(ink.Box, { flexDirection: "row", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { color: isSel ? "cyan" : void 0, children: isSel ? "\u203A " : "  " }),
-                    /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { color: "red", children: truncate(e.rootName, 16) }),
-                    /* @__PURE__ */ jsxRuntime.jsxs(ink.Text, { dimColor: true, children: [
-                      " ",
-                      truncate(e.serviceName, 10)
-                    ] }),
-                    e.route && /* @__PURE__ */ jsxRuntime.jsxs(ink.Text, { dimColor: true, children: [
-                      " ",
-                      truncate(e.route, 14)
-                    ] }),
-                    typeof e.statusCode === "number" && /* @__PURE__ */ jsxRuntime.jsxs(ink.Text, { dimColor: true, children: [
-                      " ",
-                      e.statusCode
-                    ] }),
-                    /* @__PURE__ */ jsxRuntime.jsxs(ink.Text, { dimColor: true, children: [
-                      " (",
-                      e.errorCount,
-                      ")"
-                    ] })
-                  ] }, e.traceId);
-                }) : filteredLogs.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs(ink.Box, { flexDirection: "column", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { dimColor: true, children: "No logs yet. Emit request logs or canonical log lines to see them here." }),
-                  /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { dimColor: true, children: "Tip: hook getTerminalLogStream() into your canonical log line drain." })
-                ] }) : filteredLogs.slice(0, 20).map((log, i) => {
-                  const isSel = i === selected;
-                  const levelColor = log.level === "error" ? "red" : log.level === "warn" ? "yellow" : log.level === "debug" ? "gray" : "green";
-                  return /* @__PURE__ */ jsxRuntime.jsxs(ink.Box, { flexDirection: "row", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { color: isSel ? "cyan" : void 0, children: isSel ? "\u203A " : "  " }),
-                    /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { color: colors ? levelColor : void 0, children: truncate(log.level.toUpperCase(), 5) }),
-                    /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { children: " " }),
-                    /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { children: truncate(log.message, 32) })
-                  ] }, `${log.time}-${i}`);
-                }) })
+                        svc.errors,
+                        "/",
+                        svc.total
+                      ] }),
+                      /* @__PURE__ */ jsxRuntime.jsxs(ink.Text, { dimColor: true, children: [
+                        " ",
+                        errorRate.toFixed(0),
+                        "%"
+                      ] }),
+                      /* @__PURE__ */ jsxRuntime.jsxs(ink.Text, { dimColor: true, children: [
+                        " p95 ",
+                        formatDurationMs(svc.p95Ms)
+                      ] })
+                    ] }, svc.serviceName);
+                  }),
+                  Array.from({ length: Math.max(0, LIST_HEIGHT - Math.min(serviceStats.length, 20)) }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(ink.Box, { children: /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { children: " " }) }, `pad-${i}`))
+                ] }) : viewMode === "errors" ? filteredErrorSummaries.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(ink.Box, { flexDirection: "column", children: /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { dimColor: true, children: "No errors yet." }) }),
+                  Array.from({ length: Math.max(0, LIST_HEIGHT - 1) }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(ink.Box, { children: /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { children: " " }) }, `pad-${i}`))
+                ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  filteredErrorSummaries.slice(0, 20).map((e, i) => {
+                    const isSel = i === selected;
+                    return /* @__PURE__ */ jsxRuntime.jsxs(ink.Box, { flexDirection: "row", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { color: isSel ? "cyan" : void 0, children: isSel ? "\u203A " : "  " }),
+                      /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { color: "red", children: truncate(e.rootName, 16) }),
+                      /* @__PURE__ */ jsxRuntime.jsxs(ink.Text, { dimColor: true, children: [
+                        " ",
+                        truncate(e.serviceName, 10)
+                      ] }),
+                      e.route && /* @__PURE__ */ jsxRuntime.jsxs(ink.Text, { dimColor: true, children: [
+                        " ",
+                        truncate(e.route, 14)
+                      ] }),
+                      typeof e.statusCode === "number" && /* @__PURE__ */ jsxRuntime.jsxs(ink.Text, { dimColor: true, children: [
+                        " ",
+                        e.statusCode
+                      ] }),
+                      /* @__PURE__ */ jsxRuntime.jsxs(ink.Text, { dimColor: true, children: [
+                        " (",
+                        e.errorCount,
+                        ")"
+                      ] })
+                    ] }, e.traceId);
+                  }),
+                  Array.from({ length: Math.max(0, LIST_HEIGHT - Math.min(filteredErrorSummaries.length, 20)) }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(ink.Box, { children: /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { children: " " }) }, `pad-${i}`))
+                ] }) : filteredLogs.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs(ink.Box, { flexDirection: "column", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { dimColor: true, children: "No logs yet. Emit request logs or canonical log lines to see them here." }),
+                    /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { dimColor: true, children: "Tip: hook getTerminalLogStream() into your canonical log line drain." })
+                  ] }),
+                  Array.from({ length: Math.max(0, LIST_HEIGHT - 2) }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(ink.Box, { children: /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { children: " " }) }, `pad-${i}`))
+                ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  filteredLogs.slice(0, 20).map((log, i) => {
+                    const isSel = i === selected;
+                    const levelColor = log.level === "error" ? "red" : log.level === "warn" ? "yellow" : log.level === "debug" ? "gray" : "green";
+                    return /* @__PURE__ */ jsxRuntime.jsxs(ink.Box, { flexDirection: "row", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { color: isSel ? "cyan" : void 0, children: isSel ? "\u203A " : "  " }),
+                      /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { color: colors ? levelColor : void 0, children: truncate(log.level.toUpperCase(), 5) }),
+                      /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { children: " " }),
+                      /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { children: truncate(log.message, 32) })
+                    ] }, `${log.time}-${i}`);
+                  }),
+                  Array.from({ length: Math.max(0, LIST_HEIGHT - Math.min(filteredLogs.length, 20)) }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(ink.Box, { children: /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { children: " " }) }, `pad-${i}`))
+                ] }) })
               ]
             }
           ),
@@ -1929,7 +2137,7 @@ ${json}
             {
               flexDirection: "column",
               width: "45%",
-              borderStyle: "single",
+              borderStyle: "round",
               borderColor: "gray",
               paddingX: 1,
               paddingY: 0,
@@ -1977,92 +2185,7 @@ ${json}
                 ] })
               ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
                 /* @__PURE__ */ jsxRuntime.jsx(ink.Box, { marginBottom: 1, children: /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { bold: true, children: "Details" }) }),
-                drilldownTraceId != null && drilldownSelectedItem?.type === "span" && drilldownSelectedItem.span ? (() => {
-                  const span = drilldownSelectedItem.span;
-                  const { key: keyAttrs, rest: restAttrs } = keyAttrsAndRest(
-                    span.attributes
-                  );
-                  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                    /* @__PURE__ */ jsxRuntime.jsxs(ink.Text, { children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { dimColor: true, children: "Name: " }),
-                      /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { children: span.name })
-                    ] }),
-                    /* @__PURE__ */ jsxRuntime.jsxs(ink.Text, { children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { dimColor: true, children: "Status: " }),
-                      /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { color: span.status === "ERROR" ? "red" : "green", children: span.status })
-                    ] }),
-                    /* @__PURE__ */ jsxRuntime.jsxs(ink.Text, { children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { dimColor: true, children: "Duration: " }),
-                      /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { children: formatDurationMs(span.durationMs) })
-                    ] }),
-                    /* @__PURE__ */ jsxRuntime.jsxs(ink.Text, { dimColor: true, children: [
-                      "Trace: ",
-                      span.traceId
-                    ] }),
-                    /* @__PURE__ */ jsxRuntime.jsxs(ink.Text, { dimColor: true, children: [
-                      "Span: ",
-                      span.spanId
-                    ] }),
-                    span.parentSpanId && /* @__PURE__ */ jsxRuntime.jsxs(ink.Text, { dimColor: true, children: [
-                      "Parent: ",
-                      span.parentSpanId
-                    ] }),
-                    span.kind && /* @__PURE__ */ jsxRuntime.jsxs(ink.Text, { dimColor: true, children: [
-                      "Kind: ",
-                      span.kind
-                    ] }),
-                    keyAttrs.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(ink.Box, { marginTop: 1, flexDirection: "column", children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { bold: true, children: "Key attributes" }),
-                      keyAttrs.slice(0, 6).map(([k, v]) => /* @__PURE__ */ jsxRuntime.jsxs(ink.Text, { dimColor: true, children: [
-                        truncate(k, 18),
-                        ": ",
-                        truncate(String(v), 28)
-                      ] }, k))
-                    ] }),
-                    restAttrs.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(ink.Box, { marginTop: 1, flexDirection: "column", children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { bold: true, children: "Attributes" }),
-                      restAttrs.slice(0, 8).map(([k, v]) => /* @__PURE__ */ jsxRuntime.jsxs(ink.Text, { dimColor: true, children: [
-                        truncate(k, 18),
-                        ": ",
-                        truncate(String(v), 28)
-                      ] }, k))
-                    ] }),
-                    keyAttrs.length === 0 && restAttrs.length === 0 && /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { dimColor: true, children: "(no attributes)" })
-                  ] });
-                })() : drilldownTraceId != null && drilldownSelectedItem?.type === "log" && drilldownSelectedItem.log ? (() => {
-                  const log = drilldownSelectedItem.log;
-                  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                    /* @__PURE__ */ jsxRuntime.jsxs(ink.Text, { children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { dimColor: true, children: "Level: " }),
-                      /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { children: log.level.toUpperCase() })
-                    ] }),
-                    /* @__PURE__ */ jsxRuntime.jsxs(ink.Text, { children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { dimColor: true, children: "Time: " }),
-                      /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { children: new Date(log.time).toISOString() })
-                    ] }),
-                    /* @__PURE__ */ jsxRuntime.jsxs(ink.Text, { children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { dimColor: true, children: "Message: " }),
-                      /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { children: log.message })
-                    ] }),
-                    log.traceId && /* @__PURE__ */ jsxRuntime.jsxs(ink.Text, { dimColor: true, children: [
-                      "Trace: ",
-                      log.traceId
-                    ] }),
-                    log.spanId && /* @__PURE__ */ jsxRuntime.jsxs(ink.Text, { dimColor: true, children: [
-                      "Span: ",
-                      log.spanId
-                    ] }),
-                    log.attributes && Object.keys(log.attributes).length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(ink.Box, { marginTop: 1, flexDirection: "column", children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { bold: true, children: "Attributes" }),
-                      Object.entries(log.attributes).slice(0, 10).map(([k, v]) => /* @__PURE__ */ jsxRuntime.jsxs(ink.Text, { dimColor: true, children: [
-                        truncate(k, 18),
-                        ": ",
-                        truncate(String(v), 40)
-                      ] }, k))
-                    ] })
-                  ] });
-                })() : drilldownTraceId == null ? null : /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { dimColor: true, children: "Select an item to view details." }),
-                drilldownTraceId == null && (viewMode === "errors" ? (() => {
+                viewMode === "errors" ? (() => {
                   const e = filteredErrorSummaries[selected] ?? null;
                   if (!e)
                     return /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { dimColor: true, children: "Select an error to view details." });
@@ -2280,12 +2403,12 @@ ${json}
                       ] }, w.span.spanId);
                     })
                   ] })
-                ] }) : /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { dimColor: true, children: "Select a trace or span to view details." }))
+                ] }) : /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { dimColor: true, children: "Select a trace or span to view details." })
               ] })
             }
           )
         ] }),
-        showStats && /* @__PURE__ */ jsxRuntime.jsx(ink.Box, { marginTop: 1, borderStyle: "single", borderColor: "gray", paddingX: 1, children: /* @__PURE__ */ jsxRuntime.jsxs(ink.Text, { dimColor: true, children: [
+        showStats && /* @__PURE__ */ jsxRuntime.jsx(ink.Box, { marginTop: 1, borderStyle: "round", borderColor: "gray", paddingX: 1, children: /* @__PURE__ */ jsxRuntime.jsxs(ink.Text, { dimColor: true, children: [
           "Spans: ",
           stats.total,
           " | Span errors: ",