autotel-terminal 17.0.1 → 17.0.3

package/dist/cli.cjs

@@ -8,6 +8,8 @@ var react = require('react');
 var ink = require('ink');
 var autotel = require('autotel');
 var tracerProvider = require('autotel/tracer-provider');
+var ai = require('ai');
+var zod = require('zod');
 require('autotel/exporters');
 var jsxRuntime = require('react/jsx-runtime');
 
@@ -200,7 +202,8 @@ function sortSpansForWaterfall(spans) {
   }
   const withDepth = spans.map((s) => ({ span: s, depth: depth(s) }));
   withDepth.sort((a, b) => {
-    if (a.span.startTime !== b.span.startTime) return a.span.startTime - b.span.startTime;
+    if (a.span.startTime !== b.span.startTime)
+      return a.span.startTime - b.span.startTime;
     return a.depth - b.depth;
   });
   return withDepth;
@@ -215,7 +218,9 @@ function filterTraceSummaries(summaries, searchQuery, errorsOnly) {
   let list = summaries;
   if (searchQuery.trim() === "") return list;
   const q = searchQuery.toLowerCase();
-  return list.filter((s) => s.spans.some((sp) => sp.name.toLowerCase().includes(q)));
+  return list.filter(
+    (s) => s.spans.some((sp) => sp.name.toLowerCase().includes(q))
+  );
 }
 function computeStats(spans) {
   const total = spans.length;
@@ -260,6 +265,17 @@ 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);
+}
 
 // src/lib/log-model.ts
 function filterLogsBySearch(logs, searchQuery, minLevel) {
@@ -423,10 +439,11 @@ function getStatusCode(span) {
   return void 0;
 }
 function applySpanFilters(spans, state) {
-  const { serviceName, route, statusGroup, errorsOnly, searchQuery } = state;
+  const { serviceName, route, statusGroup, errorsOnly, searchQuery, traceId } = state;
   const q = searchQuery?.trim().toLowerCase() ?? "";
   return spans.filter((span) => {
     const attrs = span.attributes ?? {};
+    if (traceId && span.traceId !== traceId) return false;
     if (errorsOnly && span.status !== "ERROR") return false;
     if (serviceName) {
       const svc = getServiceName(span);
@@ -482,17 +499,17 @@ function getStatusCodeFromSpans(spans) {
 }
 function buildErrorSummaries(traceSummaries) {
   const out = [];
-  for (const t of traceSummaries) {
-    const errorSpans = t.spans.filter((s) => s.status === "ERROR");
+  for (const t2 of traceSummaries) {
+    const errorSpans = t2.spans.filter((s) => s.status === "ERROR");
     if (errorSpans.length === 0) continue;
     out.push({
-      traceId: t.traceId,
-      rootName: t.rootName,
-      serviceName: getServiceNameFromSpans(t.spans),
-      route: getRouteFromSpans(t.spans),
-      statusCode: getStatusCodeFromSpans(t.spans),
+      traceId: t2.traceId,
+      rootName: t2.rootName,
+      serviceName: getServiceNameFromSpans(t2.spans),
+      route: getRouteFromSpans(t2.spans),
+      statusCode: getStatusCodeFromSpans(t2.spans),
       errorCount: errorSpans.length,
-      lastEndTime: t.lastEndTime
+      lastEndTime: t2.lastEndTime
     });
   }
   out.sort((a, b) => b.lastEndTime - a.lastEndTime);
@@ -528,6 +545,302 @@ function exportTraceToJson(trace, logs) {
   };
   return JSON.stringify(exported, null, 2);
 }
+
+// src/ai/provider.ts
+async function detectOllama(baseUrl = "http://127.0.0.1:11434") {
+  try {
+    const res = await fetch(`${baseUrl}/api/tags`, {
+      signal: AbortSignal.timeout(1e3)
+    });
+    return res.ok;
+  } catch {
+    return false;
+  }
+}
+function resolveConfig(options = {}) {
+  const provider = options.provider ?? process.env.AI_PROVIDER ?? void 0;
+  const model = options.model ?? process.env.AI_MODEL;
+  const apiKey = options.apiKey ?? process.env.AI_API_KEY ?? (provider === "openai" ? process.env.OPENAI_API_KEY : void 0);
+  const baseUrl = options.baseUrl ?? process.env.AI_BASE_URL;
+  if (provider) {
+    return {
+      provider,
+      model: model ?? (provider === "ollama" ? "granite4" : "gpt-4o"),
+      apiKey,
+      baseUrl
+    };
+  }
+  return null;
+}
+var defaultAutoDetectDeps = { detectOllama };
+async function resolveConfigWithAutoDetect(options = {}, deps = defaultAutoDetectDeps) {
+  const config = resolveConfig(options);
+  if (config) return config;
+  const ollamaUrl = options.baseUrl ?? process.env.AI_BASE_URL ?? "http://127.0.0.1:11434";
+  if (await deps.detectOllama(ollamaUrl)) {
+    return {
+      provider: "ollama",
+      model: options.model ?? process.env.AI_MODEL ?? "granite4",
+      baseUrl: ollamaUrl
+    };
+  }
+  const openaiKey = options.apiKey ?? process.env.AI_API_KEY ?? process.env.OPENAI_API_KEY;
+  if (openaiKey) {
+    return {
+      provider: "openai",
+      model: options.model ?? process.env.AI_MODEL ?? "gpt-4o",
+      apiKey: openaiKey
+    };
+  }
+  return null;
+}
+async function createAIModel(config) {
+  switch (config.provider) {
+    case "ollama": {
+      const { createOllama } = await import('ai-sdk-ollama');
+      const ollama = createOllama({
+        baseURL: config.baseUrl ?? "http://127.0.0.1:11434"
+      });
+      return { model: ollama(config.model), providerType: "ollama", config };
+    }
+    case "openai": {
+      const { createOpenAI } = await import('@ai-sdk/openai');
+      const openai = createOpenAI({
+        apiKey: config.apiKey,
+        ...config.baseUrl ? { baseURL: config.baseUrl } : {}
+      });
+      return { model: openai(config.model), providerType: "openai", config };
+    }
+    case "openai-compatible": {
+      const { createOpenAICompatible } = await import('@ai-sdk/openai-compatible');
+      const provider = createOpenAICompatible({
+        baseURL: config.baseUrl ?? "http://127.0.0.1:11434/v1",
+        name: "custom",
+        ...config.apiKey ? { headers: { Authorization: `Bearer ${config.apiKey}` } } : {}
+      });
+      return {
+        model: provider(config.model),
+        providerType: "openai-compatible",
+        config
+      };
+    }
+    default: {
+      throw new Error(
+        `Unsupported provider: "${config.provider}". Expected "ollama", "openai", or "openai-compatible".`
+      );
+    }
+  }
+}
+
+// src/ai/system-prompt.ts
+function buildSystemPrompt(viewMode, contextJson) {
+  return `You are an OpenTelemetry expert assistant analyzing live telemetry data from a running application.
+The user is viewing their ${viewMode} dashboard in a terminal TUI.
+
+You have tools to query the telemetry data precisely. Use them to answer questions:
+- getOverviewStats: high-level stats (spans, errors, latency)
+- listServices: all services with error rates and p95
+- findSlowestSpans: find slow spans, optionally by service
+- findErrorTraces: find traces with errors
+- getTraceDetail: deep dive into a specific trace
+- searchSpans: search spans by name
+- searchLogs: search logs by message content
+
+Use tools first to gather data, then synthesize a concise answer.
+Keep 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 t = ai.tool;
+function createTelemetryTools(ctx) {
+  return {
+    getOverviewStats: t({
+      description: "Get high-level stats: total spans, error count, average duration, p95 duration, and service count.",
+      parameters: zod.z.object({}),
+      execute: async () => ({
+        totalSpans: ctx.stats.total,
+        errors: ctx.stats.errors,
+        avgMs: Math.round(ctx.stats.avg),
+        p95Ms: Math.round(ctx.stats.p95),
+        serviceCount: ctx.serviceStats.length,
+        traceCount: ctx.traces.length
+      })
+    }),
+    listServices: t({
+      description: "List all services with their span counts, error counts, and p95 latencies.",
+      parameters: zod.z.object({}),
+      execute: async () => ctx.serviceStats.map((s) => ({
+        serviceName: s.serviceName,
+        total: s.total,
+        errors: s.errors,
+        avgMs: Math.round(s.avgMs),
+        p95Ms: Math.round(s.p95Ms)
+      }))
+    }),
+    findSlowestSpans: t({
+      description: "Find the slowest spans, optionally filtered by service name. Returns span name, duration, status, and key attributes.",
+      parameters: zod.z.object({
+        service: zod.z.string().optional().describe("Filter by service name"),
+        limit: zod.z.number().optional().describe("Max results (default 10)")
+      }),
+      execute: async ({
+        service,
+        limit
+      }) => {
+        const max = limit ?? 10;
+        let filtered = ctx.spans;
+        if (service) {
+          filtered = filtered.filter(
+            (s) => s.attributes?.["service.name"] === service
+          );
+        }
+        return filtered.toSorted((a, b) => b.durationMs - a.durationMs).slice(0, max).map((s) => ({
+          name: s.name,
+          durationMs: Math.round(s.durationMs),
+          status: s.status,
+          service: s.attributes?.["service.name"] ?? "unknown",
+          route: s.attributes?.["http.route"],
+          traceId: s.traceId.slice(0, 8)
+        }));
+      }
+    }),
+    findErrorTraces: t({
+      description: "Find traces that contain errors, with root span name, service, route, and error count.",
+      parameters: zod.z.object({
+        service: zod.z.string().optional().describe("Filter by service name"),
+        limit: zod.z.number().optional().describe("Max results (default 10)")
+      }),
+      execute: async ({
+        service,
+        limit
+      }) => {
+        const max = limit ?? 10;
+        let errors = ctx.errorSummaries;
+        if (service) {
+          errors = errors.filter((e) => e.serviceName === service);
+        }
+        return errors.slice(0, max).map((e) => ({
+          traceId: e.traceId.slice(0, 8),
+          rootName: e.rootName,
+          serviceName: e.serviceName,
+          route: e.route,
+          errorCount: e.errorCount
+        }));
+      }
+    }),
+    getTraceDetail: t({
+      description: "Get full detail of a specific trace by trace ID prefix. Returns all spans with their parent relationships, durations, and attributes.",
+      parameters: zod.z.object({
+        traceIdPrefix: zod.z.string().describe("First 8+ characters of the trace ID")
+      }),
+      execute: async ({ traceIdPrefix }) => {
+        const trace = ctx.traces.find(
+          (t2) => t2.traceId.startsWith(traceIdPrefix)
+        );
+        if (!trace) {
+          return { error: `No trace found matching ${traceIdPrefix}` };
+        }
+        const traceLogs = ctx.logs.filter((l) => l.traceId === trace.traceId);
+        return {
+          traceId: trace.traceId.slice(0, 16),
+          rootName: trace.rootName,
+          durationMs: Math.round(trace.durationMs),
+          hasError: trace.hasError,
+          spanCount: trace.spanCount,
+          spans: trace.spans.map((s) => ({
+            name: s.name,
+            durationMs: Math.round(s.durationMs),
+            status: s.status,
+            kind: s.kind,
+            parentSpanId: s.parentSpanId?.slice(0, 8),
+            attrs: Object.fromEntries(
+              Object.entries(s.attributes ?? {}).filter(
+                ([k]) => [
+                  "http.method",
+                  "http.route",
+                  "http.status_code",
+                  "db.operation",
+                  "db.system",
+                  "service.name",
+                  "error.message",
+                  "error.type"
+                ].includes(k)
+              )
+            )
+          })),
+          logs: traceLogs.slice(0, 10).map((l) => ({
+            level: l.level,
+            message: l.message.slice(0, 100)
+          }))
+        };
+      }
+    }),
+    searchSpans: t({
+      description: "Search spans by name pattern (case-insensitive substring match). Returns matching spans with details.",
+      parameters: zod.z.object({
+        query: zod.z.string().describe("Search string to match against span names"),
+        limit: zod.z.number().optional().describe("Max results (default 20)")
+      }),
+      execute: async ({ query, limit }) => {
+        const max = limit ?? 20;
+        const q = query.toLowerCase();
+        return ctx.spans.filter((s) => s.name.toLowerCase().includes(q)).slice(0, max).map((s) => ({
+          name: s.name,
+          durationMs: Math.round(s.durationMs),
+          status: s.status,
+          traceId: s.traceId.slice(0, 8),
+          service: s.attributes?.["service.name"] ?? "unknown"
+        }));
+      }
+    }),
+    searchLogs: t({
+      description: "Search logs by message content (case-insensitive). Returns matching log entries.",
+      parameters: zod.z.object({
+        query: zod.z.string().describe("Search string to match against log messages"),
+        level: zod.z.enum(["debug", "info", "warn", "error"]).optional().describe("Filter by log level"),
+        limit: zod.z.number().optional().describe("Max results (default 20)")
+      }),
+      execute: async ({
+        query,
+        level,
+        limit
+      }) => {
+        const max = limit ?? 20;
+        const q = query.toLowerCase();
+        let filtered = ctx.logs.filter(
+          (l) => l.message.toLowerCase().includes(q)
+        );
+        if (level) {
+          filtered = filtered.filter((l) => l.level === level);
+        }
+        return filtered.slice(0, max).map((l) => ({
+          level: l.level,
+          message: l.message.slice(0, 200),
+          traceId: l.traceId?.slice(0, 8),
+          attrs: l.attributes
+        }));
+      }
+    })
+  };
+}
+
+// src/ai/stream.ts
+async function providerStreamText(providerType, params) {
+  if (providerType === "ollama") {
+    const mod2 = await import('ai-sdk-ollama');
+    const result = await mod2.streamText(
+      params
+    );
+    return result;
+  }
+  const mod = await import('ai');
+  return mod.streamText(
+    params
+  );
+}
 var KEY_ATTR_KEYS = /* @__PURE__ */ new Set([
   "http.route",
   "http.method",
@@ -544,13 +857,15 @@ 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,
   maxSpans,
   colors,
   stream,
-  logStream
+  logStream,
+  aiConfig
 }) {
   const [paused, setPaused] = react.useState(false);
   const [recording, setRecording] = react.useState(false);
@@ -563,13 +878,43 @@ function Dashboard({
   const [spanFilters, setSpanFilters] = react.useState({
     statusGroup: "all"
   });
-  const [selectedTraceId, setSelectedTraceId] = react.useState(null);
-  const [selectedSpanIndex, setSelectedSpanIndex] = react.useState(0);
+  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);
+  const [traceIdMode, setTraceIdMode] = react.useState(false);
+  const [traceIdInput, setTraceIdInput] = react.useState("");
   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 aiModelRef = react.useRef(null);
+  const aiAbortRef = react.useRef(null);
+  react.useEffect(() => {
+    let cancelled = false;
+    resolveConfigWithAutoDetect(aiConfig).then(async (config) => {
+      if (cancelled || !config) return;
+      try {
+        const result = await createAIModel(config);
+        aiModelRef.current = result;
+        setAiState({ status: "idle" });
+      } catch {
+        setAiState({
+          status: "error",
+          message: "Failed to initialize AI model"
+        });
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [aiConfig]);
   react.useEffect(() => {
     if (!logStream) return;
     const unsubscribe = logStream.onLog((event) => {
@@ -601,13 +946,16 @@ function Dashboard({
         return next.slice(0, maxSpans);
       });
       setSelected(0);
-      setSelectedTraceId(null);
+      setDrilldownTraceId(null);
     };
     const unsubscribe = stream.onSpanEnd((span) => {
       if (paused) return;
       if (span.status === "ERROR") {
         setNewErrorCount((n) => n + 1);
-        setTimeout(() => setNewErrorCount((n) => Math.max(0, n - 1)), NEW_ERROR_DISPLAY_MS);
+        setTimeout(
+          () => setNewErrorCount((n) => Math.max(0, n - 1)),
+          NEW_ERROR_DISPLAY_MS
+        );
       }
       if (recording) {
         setSpans((prev) => {
@@ -619,7 +967,7 @@ function Dashboard({
           return next.slice(0, RECORD_LIMIT_DEFAULT);
         });
         setSelected(0);
-        setSelectedTraceId(null);
+        setDrilldownTraceId(null);
         return;
       }
       pendingSpansRef.current = [span, ...pendingSpansRef.current];
@@ -650,21 +998,24 @@ function Dashboard({
     () => buildTraceSummaries(traceMap),
     [traceMap]
   );
-  const filteredSummaries = react.useMemo(
-    () => filterTraceSummaries(traceSummaries, ""),
-    [traceSummaries]
-  );
+  const filteredSummaries = react.useMemo(() => {
+    const base = filterTraceSummaries(traceSummaries, "");
+    return spanFilters.traceId ? base.filter((t2) => t2.traceId === spanFilters.traceId) : base;
+  }, [traceSummaries, spanFilters.traceId]);
   const filteredSpans = react.useMemo(
     () => filterBySearch(filteredSpanBuffer, ""),
     [filteredSpanBuffer]
   );
   const stats = react.useMemo(() => computeStats(spans), [spans]);
-  const perSpanNameStats = react.useMemo(() => computePerSpanNameStats(spans), [spans]);
-  const logStats = react.useMemo(() => computeLogStats(logs), [logs]);
-  const filteredLogs = react.useMemo(
-    () => filterLogsBySearch(logs, searchQuery),
-    [logs, searchQuery]
+  const perSpanNameStats = react.useMemo(
+    () => computePerSpanNameStats(spans),
+    [spans]
   );
+  const logStats = react.useMemo(() => computeLogStats(logs), [logs]);
+  const filteredLogs = react.useMemo(() => {
+    const traceFilteredLogs = spanFilters.traceId ? logs.filter((l) => l.traceId === spanFilters.traceId) : logs;
+    return filterLogsBySearch(traceFilteredLogs, searchQuery);
+  }, [logs, searchQuery, spanFilters.traceId]);
   const serviceStats = react.useMemo(() => computeServiceStats(spans), [spans]);
   const selectedServiceName = serviceStats[selected]?.serviceName ?? null;
   const spansForSelectedService = react.useMemo(() => {
@@ -681,24 +1032,147 @@ function Dashboard({
     () => findHotSpanNames(spansForSelectedService, 8),
     [spansForSelectedService]
   );
-  const selectedTraceSummary = selectedTraceId == null ? filteredSummaries[selected] ?? null : filteredSummaries.find((t) => t.traceId === selectedTraceId) ?? null;
+  const selectedTraceSummary = drilldownTraceId == null ? filteredSummaries[selected] ?? null : filteredSummaries.find((t2) => t2.traceId === drilldownTraceId) ?? null;
   const errorSummaries = react.useMemo(
     () => buildErrorSummaries(traceSummaries),
     [traceSummaries]
   );
+  const filteredErrorSummaries = spanFilters.traceId ? errorSummaries.filter((e) => e.traceId === spanFilters.traceId) : errorSummaries;
   const traceTree = selectedTraceSummary == null ? [] : flattenTraceTree(buildTraceTree(selectedTraceSummary.spans));
   const waterfallSpans = selectedTraceSummary == null ? [] : sortSpansForWaterfall(selectedTraceSummary.spans);
-  const currentSpanInTrace = traceTree[selectedSpanIndex] ?? null;
+  const currentSpanInTrace = traceTree[drilldownSelectedIndex] ?? null;
   const currentSpanInFlat = filteredSpans[selected] ?? null;
-  const selectedTraceSummaryForDetails = viewMode === "trace" && selectedTraceId == null && filteredSummaries[selected] ? filteredSummaries[selected] : null;
+  const selectedTraceSummaryForDetails = viewMode === "trace" && drilldownTraceId == null && filteredSummaries[selected] ? filteredSummaries[selected] : null;
   const rootSpanOfSelectedTrace = selectedTraceSummaryForDetails != null && selectedTraceSummaryForDetails.spans.length > 0 ? selectedTraceSummaryForDetails.spans.find(
     (s) => !selectedTraceSummaryForDetails.spans.some(
       (p) => p.spanId === s.parentSpanId
     )
   ) ?? selectedTraceSummaryForDetails.spans[0] : null;
-  const currentSpan = viewMode === "trace" ? selectedTraceId == null ? rootSpanOfSelectedTrace ?? null : currentSpanInTrace?.span ?? null : viewMode === "span" ? currentSpanInFlat : null;
+  const currentSpan = viewMode === "trace" ? drilldownTraceId == null ? rootSpanOfSelectedTrace ?? null : currentSpanInTrace?.span ?? null : viewMode === "span" ? currentSpanInFlat : null;
   const selectedTraceLogs = selectedTraceSummary?.traceId && logs.length > 0 ? logs.filter((l) => l.traceId === selectedTraceSummary.traceId) : [];
   const timelineItems = selectedTraceSummary && (selectedTraceSummary.spans.length > 0 || selectedTraceLogs.length > 0) ? buildTraceTimeline(selectedTraceSummary.spans, selectedTraceLogs) : [];
+  const drilldownSpans = react.useMemo(
+    () => drilldownTraceId ? spans.filter((s) => s.traceId === drilldownTraceId) : [],
+    [spans, drilldownTraceId]
+  );
+  const drilldownTree = react.useMemo(
+    () => drilldownSpans.length > 0 ? flattenTraceTree(buildTraceTree(drilldownSpans)) : [],
+    [drilldownSpans]
+  );
+  const drilldownLogs = react.useMemo(
+    () => drilldownTraceId ? logs.filter((l) => l.traceId === drilldownTraceId) : [],
+    [logs, drilldownTraceId]
+  );
+  const drilldownTimeline = react.useMemo(
+    () => drilldownSpans.length > 0 || drilldownLogs.length > 0 ? buildTraceTimeline(drilldownSpans, drilldownLogs) : [],
+    [drilldownSpans, drilldownLogs]
+  );
+  const drilldownSummary = react.useMemo(
+    () => drilldownTraceId ? traceSummaries.find((t2) => t2.traceId === drilldownTraceId) ?? null : null,
+    [traceSummaries, drilldownTraceId]
+  );
+  const drilldownSelectedItem = react.useMemo(() => {
+    if (!drilldownTraceId) return null;
+    if (drilldownTab === "timeline") {
+      const item = drilldownTimeline[drilldownSelectedIndex];
+      if (!item) return null;
+      return item;
+    }
+    if (drilldownTab === "spans") {
+      return drilldownTree[drilldownSelectedIndex] ? {
+        type: "span",
+        span: drilldownTree[drilldownSelectedIndex].span
+      } : null;
+    }
+    if (drilldownTab === "logs") {
+      return drilldownLogs[drilldownSelectedIndex] ? { type: "log", log: drilldownLogs[drilldownSelectedIndex] } : null;
+    }
+    return null;
+  }, [
+    drilldownTraceId,
+    drilldownTab,
+    drilldownSelectedIndex,
+    drilldownTimeline,
+    drilldownTree,
+    drilldownLogs
+  ]);
+  const sendAIQuery = async (question) => {
+    const aiResult = aiModelRef.current;
+    if (!aiResult || aiState.status === "streaming") return;
+    const userMsg = { role: "user", content: question };
+    setAiMessages((prev) => [...prev, userMsg]);
+    setAiInput("");
+    const abort = new AbortController();
+    aiAbortRef.current = abort;
+    setAiState({ status: "streaming", abortController: abort });
+    const toolCtx = {
+      spans,
+      logs,
+      traces: traceSummaries,
+      stats,
+      serviceStats,
+      errorSummaries
+    };
+    const tools = createTelemetryTools(toolCtx);
+    const statsContext = JSON.stringify({
+      viewMode,
+      stats: {
+        totalSpans: stats.total,
+        errors: stats.errors,
+        avgMs: Math.round(stats.avg),
+        p95Ms: Math.round(stats.p95)
+      },
+      services: serviceStats.length,
+      traces: traceSummaries.length
+    });
+    const drilldownContext = drilldownTraceId ? `
+
+Currently viewing trace ${drilldownTraceId}. This trace has ${drilldownSpans.length} spans and ${drilldownLogs.length} logs. The root span is "${drilldownSummary?.rootName ?? "unknown"}" with duration ${drilldownSummary ? formatDurationMs(drilldownSummary.durationMs) : "unknown"}.` : "";
+    const systemPrompt = buildSystemPrompt(viewMode, statsContext) + drilldownContext;
+    try {
+      setAiMessages((prev) => [...prev, { role: "assistant", content: "" }]);
+      const result = await providerStreamText(aiResult.providerType, {
+        model: aiResult.model,
+        system: systemPrompt,
+        messages: [...aiMessages, userMsg].map((m) => ({
+          role: m.role,
+          content: m.content
+        })),
+        tools,
+        maxSteps: 10,
+        abortSignal: abort.signal
+      });
+      let fullText = "";
+      for await (const chunk of result.textStream) {
+        if (abort.signal.aborted) break;
+        fullText += chunk;
+        const captured = fullText;
+        setAiMessages((prev) => {
+          const updated = [...prev];
+          const lastMsg = updated.at(-1);
+          if (lastMsg?.role === "assistant") {
+            updated[updated.length - 1] = {
+              role: "assistant",
+              content: captured
+            };
+          }
+          return updated;
+        });
+      }
+      setAiState({ status: "idle" });
+    } catch (error) {
+      if (abort.signal.aborted) {
+        setAiState({ status: "idle" });
+        return;
+      }
+      setAiState({
+        status: "error",
+        message: error instanceof Error ? error.message : String(error)
+      });
+    } finally {
+      aiAbortRef.current = null;
+    }
+  };
   const { isRawModeSupported } = ink.useStdin();
   ink.useInput(
     (input, key) => {
@@ -716,53 +1190,184 @@ function Dashboard({
         return;
       }
       if (searchMode) {
-        if (key.backspace || key.delete) {
-          setSearchQuery((q) => q.slice(0, -1));
-        } else if (key.return) {
+        if (key.escape || key.return) {
           setSearchMode(false);
+        } else if (key.backspace || key.delete) {
+          setSearchQuery((q) => q.slice(0, -1));
+        } else if (key.tab) {
+          if (searchQuery.length >= 4) {
+            const match = traceSummaries.find(
+              (t2) => t2.traceId.toLowerCase().startsWith(searchQuery.toLowerCase())
+            );
+            if (match) {
+              setSpanFilters((prev) => ({ ...prev, traceId: match.traceId }));
+              setSearchMode(false);
+              setSearchQuery("");
+            }
+          }
         } else if (input && input.length === 1 && !key.ctrl && !key.meta) {
           setSearchQuery((q) => q + input);
         }
         return;
       }
-      if (key.escape) {
-        if (viewMode === "trace" && selectedTraceId != null) {
-          setSelectedTraceId(null);
-          setSelectedSpanIndex(0);
+      if (traceIdMode) {
+        if (key.escape) {
+          setTraceIdMode(false);
+          setTraceIdInput("");
+        } else if (key.return) {
+          if (traceIdInput.trim()) {
+            const match = traceSummaries.find(
+              (t2) => t2.traceId.toLowerCase().startsWith(traceIdInput.toLowerCase())
+            );
+            if (match) {
+              setSpanFilters((prev) => ({ ...prev, traceId: match.traceId }));
+            }
+          } else {
+            setSpanFilters((prev) => {
+              const { traceId: _, ...rest } = prev;
+              return rest;
+            });
+          }
+          setTraceIdMode(false);
+          setTraceIdInput("");
+        } else if (key.tab) {
+          if (traceIdInput.length >= 2) {
+            const match = traceSummaries.find(
+              (t2) => t2.traceId.toLowerCase().startsWith(traceIdInput.toLowerCase())
+            );
+            if (match) {
+              setTraceIdInput(match.traceId);
+            }
+          }
+        } else if (key.backspace || key.delete) {
+          setTraceIdInput((q) => q.slice(0, -1));
+        } else if (input && input.length === 1 && !key.ctrl && !key.meta) {
+          setTraceIdInput((q) => q + input);
+        }
+        return;
+      }
+      if (aiInputMode) {
+        if (key.escape) {
+          if (aiState.status === "streaming") {
+            aiAbortRef.current?.abort();
+          } else {
+            setAiInputMode(false);
+            setAiActive(false);
+          }
+          return;
+        }
+        if (key.backspace || key.delete) {
+          setAiInput((q) => q.slice(0, -1));
+          return;
+        }
+        if (key.return) {
+          if (aiInput.trim()) {
+            sendAIQuery(aiInput.trim());
+          }
+          return;
+        }
+        if (input && input.length === 1 && !key.ctrl && !key.meta) {
+          setAiInput((q) => q + input);
+        }
+        return;
+      }
+      if (input === "a") {
+        setAiActive((v) => !v);
+        if (aiActive) {
+          setAiInputMode(false);
         } else {
+          if (aiState.status !== "unconfigured") {
+            setAiInputMode(true);
+          }
+        }
+        return;
+      }
+      if (key.escape) {
+        if (drilldownTraceId == null) {
           setSearchMode(false);
+        } else {
+          setDrilldownTraceId(null);
+          setDrilldownSelectedIndex(0);
+          setDrilldownScrollOffset(0);
+          setDrilldownTab("timeline");
         }
         return;
       }
-      if (key.return && viewMode === "trace" && selectedTraceId == null && filteredSummaries[selected]) {
-        setSelectedTraceId(filteredSummaries[selected].traceId);
-        setSelectedSpanIndex(0);
+      if (key.tab && drilldownTraceId != null) {
+        const tabs = [
+          "timeline",
+          "spans",
+          "logs"
+        ];
+        const currentIdx = tabs.indexOf(drilldownTab);
+        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) {
+        let targetTraceId;
+        let preSelectIndex = 0;
+        if (viewMode === "trace" && filteredSummaries[selected]) {
+          targetTraceId = filteredSummaries[selected].traceId;
+        } else if (viewMode === "log" && filteredLogs[selected]?.traceId) {
+          targetTraceId = filteredLogs[selected].traceId;
+          const originLog = filteredLogs[selected];
+          const traceSpans = spans.filter((s) => s.traceId === targetTraceId);
+          const traceLogs = logs.filter((l) => l.traceId === targetTraceId);
+          const timeline = buildTraceTimeline(traceSpans, traceLogs);
+          preSelectIndex = timeline.findIndex(
+            (item) => item.type === "log" && item.log === originLog
+          );
+          if (preSelectIndex < 0) preSelectIndex = 0;
+        } else if (viewMode === "span" && filteredSpans[selected]?.traceId) {
+          targetTraceId = filteredSpans[selected].traceId;
+          const originSpan = filteredSpans[selected];
+          const traceSpans = spans.filter((s) => s.traceId === targetTraceId);
+          const traceLogs = logs.filter((l) => l.traceId === targetTraceId);
+          const timeline = buildTraceTimeline(traceSpans, traceLogs);
+          preSelectIndex = timeline.findIndex(
+            (item) => item.type === "span" && item.span?.spanId === originSpan.spanId
+          );
+          if (preSelectIndex < 0) preSelectIndex = 0;
+        }
+        if (targetTraceId) {
+          setDrilldownTraceId(targetTraceId);
+          setDrilldownSelectedIndex(preSelectIndex);
+          setDrilldownScrollOffset(Math.max(0, preSelectIndex - LIST_HEIGHT + 1));
+          setDrilldownTab("timeline");
+          return;
+        }
+      }
       if (key.upArrow || key.downArrow) {
+        if (drilldownTraceId != null) {
+          const listLength = drilldownTab === "timeline" ? drilldownTimeline.length : drilldownTab === "spans" ? drilldownTree.length : drilldownLogs.length;
+          if (key.upArrow) {
+            setDrilldownSelectedIndex((prev) => {
+              const next = Math.max(0, prev - 1);
+              setDrilldownScrollOffset((off) => Math.min(next, off));
+              return next;
+            });
+          } else {
+            setDrilldownSelectedIndex((prev) => {
+              const next = Math.min(listLength - 1, prev + 1);
+              setDrilldownScrollOffset(
+                (off) => next >= off + LIST_HEIGHT ? next - LIST_HEIGHT + 1 : off
+              );
+              return next;
+            });
+          }
+          return;
+        }
         switch (viewMode) {
           case "trace": {
             if (key.upArrow) {
-              if (selectedTraceId != null && traceTree.length > 0) {
-                setSelectedSpanIndex((i) => Math.max(0, i - 1));
-              } else {
-                setSelected((i) => Math.max(0, i - 1));
-                setSelectedSpanIndex(0);
-              }
+              setSelected((i) => Math.max(0, i - 1));
+              setDrilldownSelectedIndex(0);
             } else if (key.downArrow) {
-              if (selectedTraceId != null && selectedSpanIndex < traceTree.length - 1) {
-                setSelectedSpanIndex((i) => Math.min(traceTree.length - 1, i + 1));
-              } else if (selectedTraceId != null && traceTree.length > 0 && selectedSpanIndex >= traceTree.length - 1) {
-                const nextIdx = filteredSummaries.findIndex((t) => t.traceId === selectedTraceId) + 1;
-                if (nextIdx < filteredSummaries.length) {
-                  setSelected(nextIdx);
-                  setSelectedTraceId(filteredSummaries[nextIdx].traceId);
-                  setSelectedSpanIndex(0);
-                }
-              } else if (selectedTraceId == null) {
-                setSelected((i) => Math.min(filteredSummaries.length - 1, i + 1));
-                setSelectedSpanIndex(0);
-              }
+              setSelected((i) => Math.min(filteredSummaries.length - 1, i + 1));
+              setDrilldownSelectedIndex(0);
             }
             break;
           }
@@ -794,7 +1399,9 @@ function Dashboard({
             if (key.upArrow) {
               setSelected((i) => Math.max(0, i - 1));
             } else if (key.downArrow) {
-              setSelected((i) => Math.min(errorSummaries.length - 1, i + 1));
+              setSelected(
+                (i) => Math.min(filteredErrorSummaries.length - 1, i + 1)
+              );
             }
             break;
           }
@@ -805,35 +1412,40 @@ function Dashboard({
       if (input === "t") {
         setViewMode((m) => m === "trace" ? "span" : "trace");
         setSelected(0);
-        setSelectedTraceId(null);
-        setSelectedSpanIndex(0);
+        setDrilldownTraceId(null);
+        setDrilldownSelectedIndex(0);
+        setDrilldownScrollOffset(0);
       }
       if (input === "l") {
         setViewMode((m) => m === "log" ? "trace" : "log");
         setSelected(0);
-        setSelectedTraceId(null);
-        setSelectedSpanIndex(0);
+        setDrilldownTraceId(null);
+        setDrilldownSelectedIndex(0);
+        setDrilldownScrollOffset(0);
       }
       if (input === "v") {
         setViewMode(
           (m) => m === "service-summary" ? "trace" : "service-summary"
         );
         setSelected(0);
-        setSelectedTraceId(null);
-        setSelectedSpanIndex(0);
+        setDrilldownTraceId(null);
+        setDrilldownSelectedIndex(0);
+        setDrilldownScrollOffset(0);
       }
       if (input === "E") {
         setViewMode((m) => m === "errors" ? "trace" : "errors");
         setSelected(0);
-        setSelectedTraceId(null);
-        setSelectedSpanIndex(0);
+        setDrilldownTraceId(null);
+        setDrilldownSelectedIndex(0);
+        setDrilldownScrollOffset(0);
       }
       if (input === "c") {
         setSpans([]);
         setLogs([]);
         setSelected(0);
-        setSelectedTraceId(null);
-        setSelectedSpanIndex(0);
+        setDrilldownTraceId(null);
+        setDrilldownSelectedIndex(0);
+        setDrilldownScrollOffset(0);
         setNewErrorCount(0);
         setSpanFilters({ statusGroup: "all" });
         setRecording(false);
@@ -843,8 +1455,9 @@ function Dashboard({
         setSpans([]);
         setLogs([]);
         setSelected(0);
-        setSelectedTraceId(null);
-        setSelectedSpanIndex(0);
+        setDrilldownTraceId(null);
+        setDrilldownSelectedIndex(0);
+        setDrilldownScrollOffset(0);
         setNewErrorCount(0);
         setSpanFilters({ statusGroup: "all" });
         setPaused(false);
@@ -853,8 +1466,14 @@ function Dashboard({
       if (input === "x") {
         setSpanFilters({ statusGroup: "all" });
         setSelected(0);
-        setSelectedTraceId(null);
-        setSelectedSpanIndex(0);
+        setDrilldownTraceId(null);
+        setDrilldownSelectedIndex(0);
+        setDrilldownScrollOffset(0);
+      }
+      if (input === "f") {
+        setTraceIdMode(true);
+        setTraceIdInput(spanFilters.traceId ?? "");
+        return;
       }
       if (input === "H") {
         setSpanFilters((prev) => {
@@ -862,16 +1481,18 @@ function Dashboard({
           return { ...prev, statusGroup: next };
         });
         setSelected(0);
-        setSelectedTraceId(null);
-        setSelectedSpanIndex(0);
+        setDrilldownTraceId(null);
+        setDrilldownSelectedIndex(0);
+        setDrilldownScrollOffset(0);
       }
       if (input === "S") {
         const svc = currentSpan?.attributes?.["service.name"];
         if (typeof svc === "string" && svc.trim()) {
           setSpanFilters((prev) => ({ ...prev, serviceName: svc }));
           setSelected(0);
-          setSelectedTraceId(null);
-          setSelectedSpanIndex(0);
+          setDrilldownTraceId(null);
+          setDrilldownSelectedIndex(0);
+          setDrilldownScrollOffset(0);
         }
       }
       if (input === "R") {
@@ -879,14 +1500,77 @@ function Dashboard({
         if (typeof route === "string" && route.trim()) {
           setSpanFilters((prev) => ({ ...prev, route }));
           setSelected(0);
-          setSelectedTraceId(null);
-          setSelectedSpanIndex(0);
+          setDrilldownTraceId(null);
+          setDrilldownSelectedIndex(0);
+          setDrilldownScrollOffset(0);
+        }
+      }
+      if (input === "T") {
+        let traceId;
+        if (drilldownTraceId) {
+          traceId = drilldownTraceId;
+        } else {
+          switch (viewMode) {
+            case "log": {
+              traceId = filteredLogs[selected]?.traceId;
+              break;
+            }
+            case "span": {
+              traceId = filteredSpans[selected]?.traceId;
+              break;
+            }
+            case "errors": {
+              traceId = filteredErrorSummaries[selected]?.traceId;
+              break;
+            }
+          }
+        }
+        if (traceId && viewMode !== "trace") {
+          setSpanFilters((prev) => ({ ...prev, traceId }));
+          setViewMode("trace");
+          setSelected(0);
+          setDrilldownTraceId(null);
+          setDrilldownSelectedIndex(0);
+          setDrilldownScrollOffset(0);
+          setDrilldownTab("timeline");
+        }
+        return;
+      }
+      if (input === "L") {
+        let traceId;
+        if (drilldownTraceId) {
+          traceId = drilldownTraceId;
+        } else {
+          switch (viewMode) {
+            case "trace": {
+              traceId = filteredSummaries[selected]?.traceId;
+              break;
+            }
+            case "span": {
+              traceId = filteredSpans[selected]?.traceId;
+              break;
+            }
+            case "errors": {
+              traceId = filteredErrorSummaries[selected]?.traceId;
+              break;
+            }
+          }
+        }
+        if (traceId && viewMode !== "log") {
+          setSpanFilters((prev) => ({ ...prev, traceId }));
+          setViewMode("log");
+          setSelected(0);
+          setDrilldownTraceId(null);
+          setDrilldownSelectedIndex(0);
+          setDrilldownScrollOffset(0);
+          setDrilldownTab("timeline");
         }
+        return;
       }
       if (input === "J") {
-        const t = selectedTraceSummary;
-        if (!t) return;
-        const json = exportTraceToJson(t, selectedTraceLogs);
+        const t2 = selectedTraceSummary;
+        if (!t2) return;
+        const json = exportTraceToJson(t2, selectedTraceLogs);
         process.stdout.write(`
 [autotel-terminal] trace export
 ${json}
@@ -899,22 +1583,32 @@ ${json}
   const headerModeLabel = viewMode === "trace" ? "traces" : viewMode === "span" ? "spans" : viewMode === "log" ? "logs" : viewMode === "service-summary" ? "services" : "errors";
   const showNewError = newErrorCount > 0;
   function renderTreeRow(node, index) {
-    const isSel = viewMode === "trace" && selectedTraceId != null && index === selectedSpanIndex;
+    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 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, { 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, { dimColor: true, children: [
-        " ",
-        formatDurationMs(node.span.durationMs)
-      ] })
-    ] }, `${node.span.spanId}-${node.span.startTime}`);
+    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, { 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, { dimColor: true, children: [
+            " ",
+            formatDurationMs(node.span.durationMs)
+          ] })
+        ]
+      },
+      `${node.span.spanId}-${node.span.startTime}`
+    );
   }
   function keyAttrsAndRest(attrs) {
     if (!attrs || Object.keys(attrs).length === 0)
-      return { key: [], rest: [] };
+      return {
+        key: [],
+        rest: []
+      };
     const entries = Object.entries(attrs);
     const key = entries.filter(([k]) => KEY_ATTR_KEYS.has(k));
     const rest = entries.filter(([k]) => !KEY_ATTR_KEYS.has(k));
@@ -926,9 +1620,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: [
@@ -942,37 +1634,28 @@ ${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: /" }),
-              /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { dimColor: true, children: "Filters: e (errors-only), S (service), R (route), H (status), 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: "Other: c (clear), ? (help), Ctrl+C (exit)" })
-            ]
-          }
-        ) : /* @__PURE__ */ jsxRuntime.jsxs(ink.Box, { marginBottom: 1, flexDirection: "row", justifyContent: "space-between", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(ink.Box, { marginBottom: 0, flexDirection: "column", children: [
           searchMode ? /* @__PURE__ */ jsxRuntime.jsxs(ink.Text, { color: "cyan", children: [
             "Search: ",
-            searchQuery || "(type to filter)"
-          ] }, "search") : /* @__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 / search \u2022 p pause \u2022 r record \u2022 e errors \u2022 c clear \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 ${errorSummaries.length}/${errorSummaries.length}` : `logs ${filteredLogs.length}/${logs.length}` }, "count")
+            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" })
         ] }),
-        (spanFilters.serviceName || spanFilters.route || spanFilters.statusGroup !== "all") && /* @__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}` : ""
-        ] }) }),
+        /* @__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" }) }),
         /* @__PURE__ */ jsxRuntime.jsxs(ink.Box, { flexDirection: "row", gap: 2, children: [
           /* @__PURE__ */ jsxRuntime.jsxs(
             ink.Box,
@@ -986,113 +1669,305 @@ ${json}
               children: [
                 /* @__PURE__ */ jsxRuntime.jsxs(ink.Box, { marginTop: 0, marginBottom: 1, children: [
                   /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { bold: true, children: viewMode === "trace" ? "Recent traces" : viewMode === "span" ? "Recent spans" : viewMode === "service-summary" ? "Service summary" : viewMode === "errors" ? "Recent errors" : "Recent logs" }, "list-title"),
-                  filterErrorsOnly && /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { color: "red", children: " (errors only)" }, "errors-only-label"),
+                  filterErrorsOnly && /* @__PURE__ */ jsxRuntime.jsxs(ink.Text, { color: "red", children: [
+                    " ",
+                    "(errors only)"
+                  ] }, "errors-only-label"),
                   searchQuery && /* @__PURE__ */ jsxRuntime.jsxs(ink.Text, { dimColor: true, children: [
-                    " /",
+                    " ",
+                    "/",
                     searchQuery
                   ] }, "search-label")
                 ] }),
-                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: selectedTraceId == null ? filteredSummaries.slice(0, 20).map((t, 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: t.hasError ? "red" : void 0, children: truncate(t.rootName, 20) }),
-                    /* @__PURE__ */ jsxRuntime.jsxs(ink.Text, { dimColor: true, children: [
-                      " ",
-                      formatDurationMs(t.durationMs)
-                    ] }),
-                    /* @__PURE__ */ jsxRuntime.jsxs(ink.Text, { dimColor: true, children: [
-                      " ",
-                      truncate(t.traceId, 8)
-                    ] }),
-                    /* @__PURE__ */ jsxRuntime.jsxs(ink.Text, { dimColor: true, children: [
-                      " ",
-                      formatRelative(t.lastEndTime)
-                    ] })
-                  ] }, t.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
-                    ] }),
+                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: [
-                      " ",
-                      errorRate.toFixed(0),
-                      "%"
-                    ] }),
-                    /* @__PURE__ */ jsxRuntime.jsxs(ink.Text, { dimColor: true, children: [
-                      " p95 ",
-                      formatDurationMs(svc.p95Ms)
-                    ] })
-                  ] }, svc.serviceName);
-                }) : viewMode === "errors" ? errorSummaries.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(ink.Box, { flexDirection: "column", children: /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { dimColor: true, children: "No errors yet." }) }) : errorSummaries.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
+                      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: [
-                      " (",
-                      e.errorCount,
-                      ")"
+                      drilldownSpans.length,
+                      " spans \u2022 ",
+                      drilldownLogs.length,
+                      " logs"
                     ] })
-                  ] }, 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}`);
-                })
+                  ] }),
+                  /* @__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" && (() => {
+                  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 = 24;
+                  const items = drilldownTimeline.slice(drilldownScrollOffset, drilldownScrollOffset + LIST_HEIGHT);
+                  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                    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 = 24 - Math.min(depth, 4) * 2;
+                        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 ? "gray" : void 0, color: isSel ? "white" : void 0, children: [
+                            isSel ? "\u25B8" : " ",
+                            indent,
+                            truncate(s.name, nameWidth)
+                          ] }),
+                          /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { children: "  " }),
+                          /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { color: s.status === "ERROR" ? "red" : "green", children: bar }),
+                          /* @__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 - traceStartMs)}` : "";
+                        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 ? "gray" : void 0, color: isSel ? "white" : void 0, children: [
+                            isSel ? "\u25B8" : " ",
+                            "  ",
+                            /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { color: levelColor, children: l.level.toUpperCase() }),
+                            " ",
+                            truncate(l.message, 18)
+                          ] }),
+                          /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { children: "  " }),
+                          /* @__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}`))
+                  ] });
+                })(),
+                drilldownTraceId != null && drilldownTab === "spans" && drilldownTree.slice(drilldownScrollOffset, drilldownScrollOffset + LIST_HEIGHT).map((node, i) => renderTreeRow(node, i + drilldownScrollOffset)),
+                drilldownTraceId != null && 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}`)),
+                drilldownTraceId != null && 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 ? "gray" : void 0,
+                      color: isSel ? "white" : void 0,
+                      children: [
+                        isSel ? "\u25B8" : " ",
+                        /* @__PURE__ */ jsxRuntime.jsxs(ink.Text, { color: levelColor, children: [
+                          " ",
+                          log.level.toUpperCase()
+                        ] }),
+                        " ",
+                        /* @__PURE__ */ jsxRuntime.jsxs(ink.Text, { dimColor: true, children: [
+                          "[",
+                          truncate(log.message, 50),
+                          "]"
+                        ] })
+                      ]
+                    }
+                  ) }, `log-${i}`);
+                }),
+                drilldownTraceId != null && 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}`)),
+                drilldownTraceId == null && /* @__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." })
+                  ] }),
+                  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)
+                      ] }),
+                      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 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}`
+                    );
+                  }),
+                  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: [
+                        " ",
+                        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}`))
+                ] }) })
               ]
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsxs(
+          /* @__PURE__ */ jsxRuntime.jsx(
             ink.Box,
             {
               flexDirection: "column",
@@ -1101,11 +1976,139 @@ ${json}
               borderColor: "gray",
               paddingX: 1,
               paddingY: 0,
-              children: [
+              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: [
                 /* @__PURE__ */ jsxRuntime.jsx(ink.Box, { marginBottom: 1, children: /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { bold: true, children: "Details" }) }),
-                viewMode === "errors" ? (() => {
-                  const e = errorSummaries[selected] ?? null;
-                  if (!e) return /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { dimColor: true, children: "Select an error to view 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" ? (() => {
+                  const e = filteredErrorSummaries[selected] ?? null;
+                  if (!e)
+                    return /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { dimColor: true, children: "Select an error to view details." });
                   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
                     /* @__PURE__ */ jsxRuntime.jsxs(ink.Text, { children: [
                       /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { dimColor: true, children: "Trace: " }),
@@ -1121,11 +2124,12 @@ ${json}
                       "Errors: ",
                       e.errorCount
                     ] }),
-                    /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { dimColor: true, children: "Tip: switch to trace view and search for this trace ID." })
+                    /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { dimColor: true, children: "Press T to jump to trace view for this trace." })
                   ] });
                 })() : viewMode === "service-summary" ? (() => {
                   const svc = serviceStats[selected] ?? null;
-                  if (!svc) return /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { dimColor: true, children: "Select a service to view details." });
+                  if (!svc)
+                    return /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { dimColor: true, children: "Select a service to view details." });
                   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
                     /* @__PURE__ */ jsxRuntime.jsxs(ink.Text, { children: [
                       /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { dimColor: true, children: "Service: " }),
@@ -1139,7 +2143,8 @@ ${json}
                       " | Avg:",
                       " ",
                       formatDurationMs(svc.avgMs),
-                      " | P95: ",
+                      " | P95:",
+                      " ",
                       formatDurationMs(svc.p95Ms)
                     ] }),
                     /* @__PURE__ */ jsxRuntime.jsxs(ink.Box, { marginTop: 1, flexDirection: "column", children: [
@@ -1159,7 +2164,8 @@ ${json}
                       /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { bold: true, children: "Hot spans" }),
                       selectedServiceHotSpans.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { dimColor: true, children: "(no spans)" }) : selectedServiceHotSpans.map((h) => /* @__PURE__ */ jsxRuntime.jsxs(ink.Text, { dimColor: true, children: [
                         truncate(h.name, 20),
-                        " p95 ",
+                        " p95",
+                        " ",
                         formatDurationMs(h.p95Ms),
                         " (",
                         h.count,
@@ -1209,7 +2215,8 @@ ${json}
                           return /* @__PURE__ */ jsxRuntime.jsxs(ink.Text, { dimColor: true, children: [
                             "+",
                             relMs,
-                            "ms span ",
+                            "ms span",
+                            " ",
                             truncate(item.span.name, 20)
                           ] }, `span-${idx}`);
                         }
@@ -1217,7 +2224,8 @@ ${json}
                           return /* @__PURE__ */ jsxRuntime.jsxs(ink.Text, { children: [
                             "+",
                             relMs,
-                            "ms log ",
+                            "ms log",
+                            " ",
                             truncate(item.log.message, 24)
                           ] }, `log-${idx}`);
                         }
@@ -1232,16 +2240,25 @@ ${json}
                   ] }),
                   /* @__PURE__ */ jsxRuntime.jsxs(ink.Text, { children: [
                     /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { dimColor: true, children: "Status: " }),
-                    /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { color: currentSpan.status === "ERROR" ? "red" : "green", children: currentSpan.status })
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      ink.Text,
+                      {
+                        color: currentSpan.status === "ERROR" ? "red" : "green",
+                        children: currentSpan.status
+                      }
+                    )
                   ] }),
                   /* @__PURE__ */ jsxRuntime.jsxs(ink.Text, { children: [
                     /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { dimColor: true, children: "Duration: " }),
                     /* @__PURE__ */ jsxRuntime.jsxs(ink.Text, { children: [
                       formatDurationMs(currentSpan.durationMs),
                       perSpanNameStats.byName.has(currentSpan.name) && (() => {
-                        const p = perSpanNameStats.byName.get(currentSpan.name);
+                        const p = perSpanNameStats.byName.get(
+                          currentSpan.name
+                        );
                         const ratio = p.avgMs > 0 ? currentSpan.durationMs / p.avgMs : 1;
-                        if (ratio >= 1.5) return ` (${ratio.toFixed(1)}x avg)`;
+                        if (ratio >= 1.5)
+                          return ` (${ratio.toFixed(1)}x avg)`;
                         return "";
                       })()
                     ] })
@@ -1284,10 +2301,12 @@ ${json}
                       keyAttrs.length === 0 && restAttrs.length === 0 && /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { dimColor: true, children: "(no attributes)" })
                     ] });
                   })(),
-                  waterfallSpans.length > 0 && selectedTraceId != null && /* @__PURE__ */ jsxRuntime.jsxs(ink.Box, { marginTop: 1, flexDirection: "column", children: [
+                  waterfallSpans.length > 0 && drilldownTraceId != null && /* @__PURE__ */ jsxRuntime.jsxs(ink.Box, { marginTop: 1, flexDirection: "column", children: [
                     /* @__PURE__ */ jsxRuntime.jsx(ink.Text, { bold: true, children: "Waterfall" }),
                     waterfallSpans.slice(0, 10).map((w) => {
-                      const barLen = Math.round(w.span.durationMs / waterfallMaxMs * barWidth) || 1;
+                      const barLen = Math.round(
+                        w.span.durationMs / waterfallMaxMs * barWidth
+                      ) || 1;
                       const bar = "\u2588".repeat(barLen);
                       const indent = "  ".repeat(w.depth);
                       return /* @__PURE__ */ jsxRuntime.jsxs(ink.Box, { flexDirection: "row", children: [
@@ -1304,8 +2323,8 @@ ${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." }))
+              ] })
             }
           )
         ] }),
@@ -1314,11 +2333,13 @@ ${json}
           stats.total,
           " | Span errors: ",
           stats.errors,
-          " | Logs: ",
+          " | Logs:",
+          " ",
           logStats.total,
           " | Log errors: ",
           logStats.errors,
-          " | Avg: ",
+          " | Avg:",
+          " ",
           formatDurationMs(stats.avg),
           " | P95: ",
           formatDurationMs(stats.p95)
@@ -1336,6 +2357,7 @@ function renderTerminal(options = {}, stream) {
   const showStats = options.showStats !== false;
   const maxSpans = options.maxSpans ?? 100;
   const colors = options.colors ?? Boolean(process.stdout.isTTY);
+  const aiConfig = options.ai;
   const stdinOption = process.stdin.isTTY ? process.stdin : void 0;
   if (stream) {
     try {
@@ -1348,7 +2370,8 @@ function renderTerminal(options = {}, stream) {
             maxSpans,
             colors,
             stream,
-            logStream: getTerminalLogStream()
+            logStream: getTerminalLogStream(),
+            aiConfig
           }
         ),
         { stdin: stdinOption }
@@ -1464,7 +2487,8 @@ function toMs(unixNano) {
 }
 function mapStatus2(code) {
   const normalized = typeof code === "string" ? code.toUpperCase() : code;
-  if (normalized === 1 || normalized === "STATUS_CODE_OK" || normalized === "OK") return "OK";
+  if (normalized === 1 || normalized === "STATUS_CODE_OK" || normalized === "OK")
+    return "OK";
   if (normalized === 2 || normalized === "STATUS_CODE_ERROR" || normalized === "ERROR") {
     return "ERROR";
   }
@@ -1635,33 +2659,39 @@ function countOtlpMetrics(payload) {
 
 // src/cli.ts
 function printHelp() {
-  process.stdout.write(String.raw`autotel-terminal - Standalone OTLP receiver with terminal dashboard
+  process.stdout.write(
+    String.raw`autotel-terminal - Standalone OTLP receiver with terminal dashboard
 
 Usage: autotel-terminal [options]
 
 Options:
-  -p, --port <port>    Port to listen on (default: 4319, env: AUTOTEL_TERMINAL_PORT)
-  -H, --host <host>    Host to bind to (default: 127.0.0.1, env: AUTOTEL_TERMINAL_HOST)
-  -t, --title <title>  Dashboard title (env: AUTOTEL_TERMINAL_TITLE)
-  -h, --help           Show this help message
-  -v, --version        Show version number
+  -p, --port <port>          Port to listen on (default: 4319, env: AUTOTEL_TERMINAL_PORT)
+  -H, --host <host>          Host to bind to (default: 127.0.0.1, env: AUTOTEL_TERMINAL_HOST)
+  -t, --title <title>        Dashboard title (env: AUTOTEL_TERMINAL_TITLE)
+  -h, --help                 Show this help message
+  -v, --version              Show version number
+
+AI Options:
+  --ai-provider <provider>   AI provider: ollama, openai, openai-compatible (env: AI_PROVIDER)
+  --ai-model <model>         AI model name (env: AI_MODEL)
+  --ai-api-key <key>         API key for cloud providers (env: AI_API_KEY)
+  --ai-base-url <url>        Custom AI endpoint URL (env: AI_BASE_URL)
+
+  Auto-detection: if Ollama is running locally, it is used automatically.
+  If OPENAI_API_KEY is set, OpenAI is used. Press 'a' in the dashboard to toggle AI.
 
 Endpoints:
-  POST /v1/traces      Receive OTLP JSON trace data
-  POST /v1/logs        Receive OTLP JSON log data
-  POST /v1/metrics     Receive OTLP JSON metric data (accepted and counted)
-  GET  /healthz        Health check
+  POST /v1/traces            Receive OTLP JSON trace data
+  POST /v1/logs              Receive OTLP JSON log data
+  POST /v1/metrics           Receive OTLP JSON metric data (accepted and counted)
+  GET  /healthz              Health check
 
 Examples:
   npx autotel-terminal
-  npx autotel-terminal --port 4319
-  npx autotel-terminal -p 4319 -H 0.0.0.0
-
-Then in another terminal:
-  OTEL_EXPORTER_OTLP_PROTOCOL=http/json \
-  OTEL_EXPORTER_OTLP_ENDPOINT=http://127.0.0.1:4319 \
-  node app.js
-` + "\n");
+  npx autotel-terminal --ai-provider ollama --ai-model granite4
+  AI_API_KEY=sk-... npx autotel-terminal --ai-provider openai --ai-model gpt-4o
+` + "\n"
+  );
 }
 function printVersion() {
   try {
@@ -1678,7 +2708,8 @@ function parseArgs(argv) {
   const options = {
     port: Number(process.env.AUTOTEL_TERMINAL_PORT || 4319),
     host: process.env.AUTOTEL_TERMINAL_HOST || "127.0.0.1",
-    title: process.env.AUTOTEL_TERMINAL_TITLE
+    title: process.env.AUTOTEL_TERMINAL_TITLE,
+    ai: {}
   };
   for (let i = 0; i < argv.length; i++) {
     const arg = argv[i];
@@ -1704,6 +2735,26 @@ function parseArgs(argv) {
     if ((arg === "--title" || arg === "-t") && next) {
       options.title = next;
       i++;
+      continue;
+    }
+    if (arg === "--ai-provider" && next) {
+      options.ai.provider = next;
+      i++;
+      continue;
+    }
+    if (arg === "--ai-model" && next) {
+      options.ai.model = next;
+      i++;
+      continue;
+    }
+    if (arg === "--ai-api-key" && next) {
+      options.ai.apiKey = next;
+      i++;
+      continue;
+    }
+    if (arg === "--ai-base-url" && next) {
+      options.ai.baseUrl = next;
+      i++;
     }
   }
   return options;
@@ -1718,7 +2769,8 @@ async function main() {
   const logStream = getTerminalLogStream();
   renderTerminal(
     {
-      title: options.title || `Autotel Terminal (${options.host}:${options.port})`
+      title: options.title || `Autotel Terminal (${options.host}:${options.port})`,
+      ai: options.ai
     },
     spanStream
   );