autotel-terminal 17.0.4 → 17.0.6

package/dist/cli.cjs

@@ -10,6 +10,9 @@ var autotel = require('autotel');
 var tracerProvider = require('autotel/tracer-provider');
 var ai = require('ai');
 var zod = require('zod');
+var core = require('@json-render/core');
+var catalog = require('@json-render/ink/catalog');
+var ink$1 = require('@json-render/ink');
 require('autotel/exporters');
 var jsxRuntime = require('react/jsx-runtime');
 
@@ -111,6 +114,25 @@ function createTerminalSpanStream(processor) {
         const startTime = timeToMs(span.startTime);
         const endTime = timeToMs(span.endTime);
         const durationMs = endTime - startTime;
+        const resourceAttrs = span.resource?.attributes ?? {};
+        const spanAttrs = span.attributes;
+        const mergedAttrs = {};
+        for (const [k, v] of Object.entries(resourceAttrs)) {
+          mergedAttrs[k] = v;
+        }
+        for (const [k, v] of Object.entries(spanAttrs)) {
+          mergedAttrs[k] = v;
+        }
+        const spanEvents = span.events?.length ? span.events.map((e) => ({
+          name: e.name,
+          timeMs: timeToMs(e.time),
+          attributes: e.attributes
+        })) : void 0;
+        const spanLinks = span.links?.length ? span.links.map((l) => ({
+          traceId: l.context.traceId,
+          spanId: l.context.spanId,
+          attributes: l.attributes
+        })) : void 0;
         const event = {
           name: span.name,
           spanId: spanContext.spanId,
@@ -121,7 +143,9 @@ function createTerminalSpanStream(processor) {
           durationMs,
           status: mapStatus(span.status.code),
           kind: mapKind(span.kind),
-          attributes: span.attributes
+          attributes: mergedAttrs,
+          ...spanEvents ? { events: spanEvents } : {},
+          ...spanLinks ? { links: spanLinks } : {}
         };
         callback(event);
       });
@@ -561,6 +585,123 @@ function buildErrorSummaries(traceSummaries) {
   return out;
 }
 
+// src/lib/topology-model.ts
+function getServiceName2(span) {
+  const attrs = span.attributes ?? {};
+  const serviceName = attrs["service.name"] ?? attrs["resource.service.name"];
+  return serviceName || "unknown";
+}
+function getPeerService(span) {
+  const attrs = span.attributes ?? {};
+  const peerService = attrs["peer.service"] ?? attrs["db.system"] ?? attrs["messaging.system"] ?? attrs["http.host"];
+  return peerService ?? null;
+}
+function buildServiceGraph(spans) {
+  const byService = /* @__PURE__ */ new Map();
+  for (const span of spans) {
+    const svc = getServiceName2(span);
+    const entry = byService.get(svc) ?? {
+      durations: [],
+      spanCount: 0,
+      errorCount: 0
+    };
+    entry.spanCount += 1;
+    entry.durations.push(span.durationMs);
+    if (span.status === "ERROR") entry.errorCount += 1;
+    byService.set(svc, entry);
+  }
+  const services = [];
+  for (const [serviceName, { durations, spanCount, errorCount }] of byService) {
+    if (spanCount === 0) continue;
+    const avgDurationMs = durations.reduce((acc, d) => acc + d, 0) / durations.length;
+    const sorted = durations.toSorted((a, b) => a - b);
+    const p95Index = Math.floor(sorted.length * 0.95);
+    const p95DurationMs = sorted[p95Index] ?? sorted.at(-1) ?? 0;
+    services.push({
+      serviceName,
+      spanCount,
+      errorCount,
+      avgDurationMs,
+      p95DurationMs
+    });
+  }
+  const byEdge = /* @__PURE__ */ new Map();
+  for (const span of spans) {
+    const to = getPeerService(span);
+    if (!to) continue;
+    const from = getServiceName2(span);
+    const key = `${from}\u2192${to}`;
+    const entry = byEdge.get(key) ?? { spanCount: 0, errorCount: 0 };
+    entry.spanCount += 1;
+    if (span.status === "ERROR") entry.errorCount += 1;
+    byEdge.set(key, entry);
+  }
+  const edges = [];
+  for (const [key, { spanCount, errorCount }] of byEdge) {
+    const [fromService, toService] = key.split("\u2192");
+    edges.push({ fromService, toService, spanCount, errorCount });
+  }
+  services.sort((a, b) => b.spanCount - a.spanCount);
+  edges.sort((a, b) => b.spanCount - a.spanCount);
+  return { services, edges };
+}
+
+// src/lib/topology-render.ts
+function renderTopologyAscii(graph) {
+  if (graph.services.length === 0) {
+    return ["  No services detected yet."];
+  }
+  const targetServices = new Set(graph.edges.map((e) => e.toService));
+  const roots = graph.services.filter(
+    (s) => !targetServices.has(s.serviceName)
+  );
+  const rootList = roots.length > 0 ? roots : [...graph.services];
+  const lines = [];
+  for (const root of rootList) {
+    renderNode(graph, root.serviceName, "", true, lines, /* @__PURE__ */ new Set());
+  }
+  return lines;
+}
+function renderNode(graph, serviceName, prefix, isRoot, lines, ancestors) {
+  const svc = graph.services.find((s) => s.serviceName === serviceName);
+  const label = svc ? formatServiceLine(svc) : `[${serviceName}]`;
+  if (isRoot) {
+    lines.push(label);
+  }
+  if (ancestors.has(serviceName)) return;
+  const pathAncestors = new Set(ancestors);
+  pathAncestors.add(serviceName);
+  const outgoing = graph.edges.filter((e) => e.fromService === serviceName);
+  for (let i = 0; i < outgoing.length; i++) {
+    const edge = outgoing[i];
+    const isLast = i === outgoing.length - 1;
+    const connector = isLast ? "\u2514" : "\u251C";
+    const childPrefix = isLast ? "    " : "\u2502   ";
+    const downstream = graph.services.find(
+      (s) => s.serviceName === edge.toService
+    );
+    const edgeLabel = formatEdgeLabel(edge);
+    const downstreamLabel = downstream ? formatServiceLine(downstream) : `[${edge.toService}]`;
+    lines.push(`${prefix}    ${connector}\u2500\u2500${edgeLabel}\u2500\u2500\u2192 ${downstreamLabel}`);
+    renderNode(
+      graph,
+      edge.toService,
+      prefix + "    " + childPrefix,
+      false,
+      lines,
+      pathAncestors
+    );
+  }
+}
+function formatServiceLine(svc) {
+  const errPart = svc.errorCount > 0 ? ` \xB7 ${svc.errorCount} err` : "";
+  return `[${svc.serviceName}] ${svc.spanCount} spans${errPart} \xB7 p95 ${formatDurationMs(svc.p95DurationMs)}`;
+}
+function formatEdgeLabel(edge) {
+  const errPart = edge.errorCount > 0 ? `, ${edge.errorCount} err` : "";
+  return `(${edge.spanCount}${errPart})`;
+}
+
 // src/lib/export-model.ts
 function exportTraceToJson(trace, logs) {
   const exported = {
@@ -690,17 +831,31 @@ You have tools to query the telemetry data precisely. Use them to answer questio
 - getTraceDetail: deep dive into a specific trace
 - searchSpans: search spans by name
 - searchLogs: search logs by message content
+- renderUI: display rich terminal UI (tables, charts, badges)
+
+## Workflow
+1. Use data tools first to gather data
+2. Use renderUI to display structured results as tables, charts, or cards
+3. Add a brief text explanation after the rendered UI
 
-Use tools first to gather data, then synthesize a concise answer.
-Keep responses under 300 words.
+## When to use renderUI
+Use renderUI for tables, comparisons, and metrics. Do NOT use it for short text answers.
+
+renderUI spec format: { root: "id", elements: { "id": { type: "ComponentName", props: {...}, children: [] } } }
+
+Components: Table (columns, rows), KeyValue (label, value), Badge (label, variant: success/error/warning/info), BarChart (data: [{label,value}]), Card (title, children), Heading (text), Divider, Text (text, color, bold), Box (flexDirection, children).
+
+Table example: { type: "Table", props: { columns: [{ header: "Name", key: "name" }], rows: [{ name: "api" }] }, children: [] }
+
+Keep text responses under 300 words.
 Use specific span names, durations, and attribute values from the data.
-Format for a narrow terminal column \u2014 use short paragraphs, not wide tables.
 
 Current dashboard summary:
 ${contextJson}`;
 }
+var COMPONENT_NAMES = Object.keys(catalog.standardComponentDefinitions);
 var t = ai.tool;
-function createTelemetryTools(ctx) {
+function createTelemetryTools(ctx, onRenderUI) {
   return {
     getOverviewStats: t({
       description: "Get high-level stats: total spans, error count, average duration, p95 duration, and service count.",
@@ -868,6 +1023,33 @@ function createTelemetryTools(ctx) {
           attrs: l.attributes
         }));
       }
+    }),
+    renderUI: t({
+      description: "Render rich terminal UI (tables, charts, badges) to display structured data. Use this when showing tabular data, comparisons, or metrics \u2014 not for short text answers. Available components: Table (columns + rows), KeyValue (key-value pairs), Badge (status labels: default/info/success/warning/error), BarChart (horizontal bars with labels), Card (grouped content with title), Heading (section title), Divider (separator), Text (styled text), Box (layout container).",
+      parameters: zod.z.object({
+        spec: zod.z.object({
+          root: zod.z.string().describe("ID of the root element"),
+          elements: zod.z.record(
+            zod.z.string(),
+            zod.z.object({
+              type: zod.z.enum(COMPONENT_NAMES).describe("Component name"),
+              props: zod.z.record(zod.z.string(), zod.z.unknown()).optional(),
+              children: zod.z.array(zod.z.string()).describe("Child element keys")
+            })
+          ).describe("Map of element ID to component definition")
+        }).describe("json-render spec defining the UI to display")
+      }),
+      execute: async ({ spec }) => {
+        const validation = core.validateSpec(spec);
+        if (!validation.valid) {
+          return {
+            rendered: false,
+            error: validation.issues.map((i) => i.message).join("; ")
+          };
+        }
+        onRenderUI?.(spec);
+        return { rendered: true };
+      }
     })
   };
 }
@@ -934,11 +1116,11 @@ function Dashboard({
   const throttleRef = react.useRef(null);
   const pendingSpansRef = react.useRef([]);
   const [logs, setLogs] = react.useState([]);
-  const [aiActive, setAiActive] = react.useState(false);
   const [aiMessages, setAiMessages] = react.useState([]);
   const [aiInput, setAiInput] = react.useState("");
   const [aiState, setAiState] = react.useState({ status: "unconfigured" });
   const [aiInputMode, setAiInputMode] = react.useState(false);
+  const [aiSpec, setAiSpec] = react.useState(null);
   const aiModelRef = react.useRef(null);
   const aiAbortRef = react.useRef(null);
   react.useEffect(() => {
@@ -1078,6 +1260,8 @@ function Dashboard({
     [spansForSelectedService]
   );
   const selectedTraceSummary = drilldownTraceId == null ? filteredSummaries[selected] ?? null : filteredSummaries.find((t2) => t2.traceId === drilldownTraceId) ?? null;
+  const serviceGraph = react.useMemo(() => buildServiceGraph(spans), [spans]);
+  const topologyLines = react.useMemo(() => renderTopologyAscii(serviceGraph), [serviceGraph]);
   const errorSummaries = react.useMemo(
     () => buildErrorSummaries(traceSummaries),
     [traceSummaries]
@@ -1149,6 +1333,7 @@ function Dashboard({
     setAiInput("");
     const abort = new AbortController();
     aiAbortRef.current = abort;
+    setAiSpec(null);
     setAiState({ status: "streaming", abortController: abort });
     const toolCtx = {
       spans,
@@ -1158,7 +1343,7 @@ function Dashboard({
       serviceStats,
       errorSummaries
     };
-    const tools = createTelemetryTools(toolCtx);
+    const tools = createTelemetryTools(toolCtx, (spec) => setAiSpec(spec));
     const statsContext = JSON.stringify({
       viewMode,
       stats: {
@@ -1204,15 +1389,31 @@ Currently viewing trace ${drilldownTraceId}. This trace has ${drilldownSpans.len
           return updated;
         });
       }
+      if (!fullText.trim()) {
+        setAiMessages((prev) => {
+          const updated = [...prev];
+          const lastMsg = updated.at(-1);
+          if (lastMsg?.role === "assistant" && !lastMsg.content.trim()) {
+            updated[updated.length - 1] = {
+              role: "assistant",
+              content: "(No response from model \u2014 try a simpler question or a larger model)"
+            };
+          }
+          return updated;
+        });
+      }
       setAiState({ status: "idle" });
     } catch (error) {
       if (abort.signal.aborted) {
         setAiState({ status: "idle" });
         return;
       }
+      const errorMsg = error instanceof Error ? error.message : String(error);
+      process.stderr.write(`[autotel-terminal] AI error: ${errorMsg}
+`);
       setAiState({
         status: "error",
-        message: error instanceof Error ? error.message : String(error)
+        message: errorMsg
       });
     } finally {
       aiAbortRef.current = null;
@@ -1297,7 +1498,7 @@ Currently viewing trace ${drilldownTraceId}. This trace has ${drilldownSpans.len
             aiAbortRef.current?.abort();
           } else {
             setAiInputMode(false);
-            setAiActive(false);
+            setViewMode("trace");
           }
           return;
         }
@@ -1317,14 +1518,19 @@ Currently viewing trace ${drilldownTraceId}. This trace has ${drilldownSpans.len
         return;
       }
       if (input === "a") {
-        setAiActive((v) => !v);
-        if (aiActive) {
+        if (viewMode === "ai") {
+          setViewMode("trace");
           setAiInputMode(false);
         } else {
+          setViewMode("ai");
           if (aiState.status !== "unconfigured") {
             setAiInputMode(true);
           }
         }
+        setSelected(0);
+        setDrilldownTraceId(null);
+        setDrilldownSelectedIndex(0);
+        setDrilldownScrollOffset(0);
         return;
       }
       if (key.escape) {
@@ -1484,6 +1690,13 @@ Currently viewing trace ${drilldownTraceId}. This trace has ${drilldownSpans.len
         setDrilldownSelectedIndex(0);
         setDrilldownScrollOffset(0);
       }
+      if (input === "G") {
+        setViewMode((m) => m === "topology" ? "trace" : "topology");
+        setSelected(0);
+        setDrilldownTraceId(null);
+        setDrilldownSelectedIndex(0);
+        setDrilldownScrollOffset(0);
+      }
       if (input === "c") {
         setSpans([]);
         setLogs([]);
@@ -1625,7 +1838,7 @@ ${json}
     { isActive: isRawModeSupported }
   );
   const headerRight = recording ? "[Recording]" : paused ? "[Paused]" : "[Live]";
-  const headerModeLabel = viewMode === "trace" ? "traces" : viewMode === "span" ? "spans" : viewMode === "log" ? "logs" : viewMode === "service-summary" ? "services" : "errors";
+  const headerModeLabel = viewMode === "trace" ? "traces" : viewMode === "span" ? "spans" : viewMode === "log" ? "logs" : viewMode === "service-summary" ? "services" : viewMode === "topology" ? "topology" : viewMode === "ai" ? "AI" : "errors";
   const showNewError = newErrorCount > 0;
   function renderTreeRow(node, index) {
     const isSel = drilldownTraceId != null && index === drilldownSelectedIndex;
@@ -1639,8 +1852,9 @@ ${json}
         flexDirection: "row",
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { backgroundColor: isSel ? "blue" : void 0, color: isSel ? "white" : void 0, children: isSel ? "\u25B8 " : "  " }),
+          /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { color: node.span.status === "ERROR" ? "red" : void 0, children: node.span.status === "ERROR" ? "\u2717" : " " }),
           /* @__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.jsx(ink.Text, { color: colors ? statusColor : void 0, children: truncate(node.span.name, 23) }),
           /* @__PURE__ */ jsxRuntime.jsxs(ink.Text, { color: svcColor, children: [
             " ",
             truncate(svcName, 10)
@@ -1705,13 +1919,48 @@ ${json}
               "\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}` })
+            /* @__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}` : viewMode === "topology" ? `services ${serviceGraph.services.length} \xB7 edges ${serviceGraph.edges.length}` : viewMode === "ai" ? `messages ${aiMessages.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" })
+          showHelp && /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { dimColor: true, children: "Views: t/l/v/E/G/a \u2022 Search: / \u2022 Filters: e/S/R/H/f/x \u2022 Capture: p/r/J \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: [
+        viewMode === "topology" && /* @__PURE__ */ jsxRuntime.jsxs(ink.Box, { flexDirection: "column", borderStyle: "round", borderColor: "gray", paddingX: 1, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { bold: true, children: "Service Topology" }),
+          /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { dimColor: true, children: "Press G to toggle \xB7 Shows service dependencies from span data" }),
+          /* @__PURE__ */ jsxRuntime.jsx(ink.Box, { flexDirection: "column", marginTop: 1, children: topologyLines.map((line, i) => {
+            const hasErr = line.includes(" err");
+            return /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { color: hasErr ? "red" : void 0, children: line }, `topo-${i}`);
+          }) })
+        ] }),
+        viewMode === "ai" && /* @__PURE__ */ jsxRuntime.jsxs(ink.Box, { flexDirection: "column", borderStyle: "round", borderColor: "gray", paddingX: 1, paddingY: 0, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(ink.Box, { marginBottom: 1, justifyContent: "space-between", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { bold: true, children: "AI Assistant" }),
+            /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { dimColor: true, children: aiState.status === "streaming" ? "(streaming...)" : aiState.status === "unconfigured" ? "(no provider)" : aiState.status === "error" ? "(error)" : "" })
+          ] }),
+          aiState.status === "unconfigured" ? /* @__PURE__ */ jsxRuntime.jsxs(ink.Box, { flexDirection: "column", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { dimColor: true, children: "No AI provider configured." }),
+            /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { dimColor: true, children: "Set AI_PROVIDER and AI_MODEL env vars, or start Ollama locally." }),
+            /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { dimColor: true, children: "Press a to close this view." })
+          ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            aiMessages.length === 0 && aiState.status !== "error" && /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { dimColor: true, children: "Ask a question about your telemetry data. Press Enter to send." }),
+            aiMessages.slice(-10).map((msg, i) => /* @__PURE__ */ jsxRuntime.jsx(ink.Box, { flexDirection: "column", marginBottom: msg.role === "assistant" ? 1 : 0, children: /* @__PURE__ */ jsxRuntime.jsxs(ink.Text, { color: msg.role === "user" ? "cyan" : void 0, children: [
+              msg.role === "user" ? "> " : "",
+              msg.content.slice(0, 1e3),
+              msg.content.length > 1e3 ? "..." : ""
+            ] }) }, `ai-msg-${i}`)),
+            aiSpec && /* @__PURE__ */ jsxRuntime.jsx(ink.Box, { flexDirection: "column", marginBottom: 1, borderStyle: "single", borderColor: "gray", paddingX: 1, children: /* @__PURE__ */ jsxRuntime.jsx(ink$1.Renderer, { spec: aiSpec }) }),
+            aiState.status === "error" && /* @__PURE__ */ jsxRuntime.jsxs(ink.Text, { color: "red", children: [
+              "Error: ",
+              aiState.message
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs(ink.Box, { marginTop: 1, borderStyle: "single", borderColor: "cyan", paddingX: 1, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { color: "cyan", children: "> " }),
+              /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { children: aiInput || (aiInputMode ? "(type your question)" : "(press a to focus)") })
+            ] })
+          ] })
+        ] }),
+        viewMode !== "topology" && viewMode !== "ai" && (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 ",
@@ -1810,7 +2059,8 @@ ${json}
                   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 errorMark = s.status === "ERROR" ? "\u2717" : " ";
+                  const namePart = `${indent}${truncate(s.name, nameWidth - 1)}`.padEnd(NAME_COL - 1);
                   const bar = buildWaterfallBar(
                     s.startTime,
                     s.durationMs,
@@ -1821,6 +2071,7 @@ ${json}
                   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: s.status === "ERROR" ? "red" : void 0, children: errorMark }),
                       namePart
                     ] }),
                     /* @__PURE__ */ jsxRuntime.jsxs(ink.Text, { color: svcColor, children: [
@@ -1927,6 +2178,53 @@ ${json}
                   ": ",
                   truncate(String(v), 28)
                 ] }, k))
+              ] }),
+              span.events && span.events.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(ink.Box, { flexDirection: "column", marginTop: 0, children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(ink.Text, { bold: true, dimColor: true, children: [
+                  "Events (",
+                  span.events.length,
+                  ")"
+                ] }),
+                span.events.slice(0, 5).map((ev, i) => /* @__PURE__ */ jsxRuntime.jsxs(ink.Box, { flexDirection: "row", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs(ink.Text, { color: ev.name === "exception" ? "red" : "yellow", children: [
+                    "  ",
+                    "\u25C6",
+                    " ",
+                    truncate(ev.name, 20)
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsxs(ink.Text, { dimColor: true, children: [
+                    " ",
+                    "+",
+                    formatDurationMs(ev.timeMs - span.startTime)
+                  ] }),
+                  ev.attributes && Object.keys(ev.attributes).length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(ink.Text, { dimColor: true, children: [
+                    " ",
+                    Object.entries(ev.attributes).slice(0, 2).map(([k, v]) => `${k}=${String(v)}`).join(" ")
+                  ] })
+                ] }, `ev-${i}`))
+              ] }),
+              span.links && span.links.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(ink.Box, { flexDirection: "column", marginTop: 0, children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(ink.Text, { bold: true, dimColor: true, children: [
+                  "Links (",
+                  span.links.length,
+                  ")"
+                ] }),
+                span.links.slice(0, 5).map((lnk, i) => /* @__PURE__ */ jsxRuntime.jsxs(ink.Box, { flexDirection: "row", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs(ink.Text, { color: "cyan", children: [
+                    "  ",
+                    "\u2192",
+                    " trace:",
+                    lnk.traceId.slice(0, 8),
+                    "\u2026",
+                    " span:",
+                    lnk.spanId.slice(0, 8),
+                    "\u2026"
+                  ] }),
+                  lnk.attributes && Object.keys(lnk.attributes).length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(ink.Text, { dimColor: true, children: [
+                    " ",
+                    Object.entries(lnk.attributes).slice(0, 2).map(([k, v]) => `${k}=${String(v)}`).join(" ")
+                  ] })
+                ] }, `lnk-${i}`))
               ] })
             ] });
           })(),
@@ -2141,49 +2439,7 @@ ${json}
               borderColor: "gray",
               paddingX: 1,
               paddingY: 0,
-              children: aiActive ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                /* @__PURE__ */ jsxRuntime.jsxs(ink.Box, { marginBottom: 1, justifyContent: "space-between", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { bold: true, children: "AI Assistant" }),
-                  /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { dimColor: true, children: aiState.status === "streaming" ? "(streaming...)" : aiState.status === "unconfigured" ? "(no provider)" : aiState.status === "error" ? "(error)" : "" })
-                ] }),
-                aiState.status === "unconfigured" ? /* @__PURE__ */ jsxRuntime.jsxs(ink.Box, { flexDirection: "column", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { dimColor: true, children: "No AI provider configured." }),
-                  /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { dimColor: true, children: "Set AI_PROVIDER and AI_MODEL env vars, or start Ollama locally." }),
-                  /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { dimColor: true, children: "Press 'a' to close this panel." })
-                ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                  aiMessages.length === 0 && aiState.status !== "error" && /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { dimColor: true, children: "Ask a question about your telemetry data. Press Enter to send." }),
-                  aiMessages.slice(-10).map((msg, i) => /* @__PURE__ */ jsxRuntime.jsx(
-                    ink.Box,
-                    {
-                      flexDirection: "column",
-                      marginBottom: msg.role === "assistant" ? 1 : 0,
-                      children: /* @__PURE__ */ jsxRuntime.jsxs(ink.Text, { color: msg.role === "user" ? "cyan" : void 0, children: [
-                        msg.role === "user" ? "> " : "",
-                        msg.content.slice(0, 500),
-                        msg.content.length > 500 ? "..." : ""
-                      ] })
-                    },
-                    i
-                  )),
-                  aiState.status === "error" && /* @__PURE__ */ jsxRuntime.jsxs(ink.Text, { color: "red", children: [
-                    "Error: ",
-                    aiState.message
-                  ] }),
-                  /* @__PURE__ */ jsxRuntime.jsxs(
-                    ink.Box,
-                    {
-                      marginTop: 1,
-                      borderStyle: "single",
-                      borderColor: "cyan",
-                      paddingX: 1,
-                      children: [
-                        /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { color: "cyan", children: "> " }),
-                        /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { children: aiInput || (aiInputMode ? "(type your question)" : "(press a to focus)") })
-                      ]
-                    }
-                  )
-                ] })
-              ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              children: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
                 /* @__PURE__ */ jsxRuntime.jsx(ink.Box, { marginBottom: 1, children: /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { bold: true, children: "Details" }) }),
                 viewMode === "errors" ? (() => {
                   const e = filteredErrorSummaries[selected] ?? null;
@@ -2407,7 +2663,7 @@ ${json}
               ] })
             }
           )
-        ] }),
+        ] })),
         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,
@@ -2603,6 +2859,8 @@ function* extractSpans(payload) {
   if (!Array.isArray(resourceSpans)) return;
   for (const resourceSpan of resourceSpans) {
     if (!resourceSpan || typeof resourceSpan !== "object") continue;
+    const resource = resourceSpan.resource;
+    const resourceAttrs = attrsToRecord(resource?.attributes);
     const scopeSpans = resourceSpan.scopeSpans;
     if (!Array.isArray(scopeSpans)) continue;
     for (const scopeSpan of scopeSpans) {
@@ -2611,15 +2869,33 @@ function* extractSpans(payload) {
       if (!Array.isArray(spans)) continue;
       for (const span of spans) {
         if (span && typeof span === "object") {
-          yield span;
+          yield { span, resourceAttrs };
         }
       }
     }
   }
 }
-function otlpSpanToTerminalEvent(span) {
+function otlpSpanToTerminalEvent(span, resourceAttrs = {}) {
   const startTime = toMs(span.startTimeUnixNano);
   const endTime = toMs(span.endTimeUnixNano);
+  const spanAttrs = attrsToRecord(span.attributes);
+  const mergedAttrs = {};
+  for (const [k, v] of Object.entries(resourceAttrs)) {
+    mergedAttrs[k] = v;
+  }
+  for (const [k, v] of Object.entries(spanAttrs)) {
+    mergedAttrs[k] = v;
+  }
+  const parsedEvents = span.events?.length ? span.events.map((e) => ({
+    name: e.name || "",
+    timeMs: toMs(e.timeUnixNano),
+    attributes: attrsToRecord(e.attributes)
+  })) : void 0;
+  const parsedLinks = span.links?.length ? span.links.map((l) => ({
+    traceId: normalizeHexId(l.traceId, 32),
+    spanId: normalizeHexId(l.spanId, 16),
+    attributes: attrsToRecord(l.attributes)
+  })) : void 0;
   return {
     name: span.name || "unnamed",
     spanId: normalizeHexId(span.spanId, 16),
@@ -2630,7 +2906,9 @@ function otlpSpanToTerminalEvent(span) {
     durationMs: Math.max(0, endTime - startTime),
     status: mapStatus2(span.status?.code),
     kind: mapKind2(span.kind),
-    attributes: attrsToRecord(span.attributes)
+    attributes: mergedAttrs,
+    ...parsedEvents ? { events: parsedEvents } : {},
+    ...parsedLinks ? { links: parsedLinks } : {}
   };
 }
 async function readJsonBody(req) {
@@ -2655,8 +2933,8 @@ function sendJson(res, status, data) {
 }
 function parseOtlpEvents(payload) {
   const events = [];
-  for (const span of extractSpans(payload)) {
-    events.push(otlpSpanToTerminalEvent(span));
+  for (const { span, resourceAttrs } of extractSpans(payload)) {
+    events.push(otlpSpanToTerminalEvent(span, resourceAttrs));
   }
   return events;
 }