@industry-theme/principal-view-panels 0.12.31 → 0.12.33

package/dist/components/TraceTape.d.ts

@@ -0,0 +1,44 @@
+import type { Theme } from '@principal-ade/industry-theme';
+import type { OtelSpanData } from '@principal-ai/principal-view-core';
+import type { RegisteredTrace } from '../types/otel';
+/**
+ * Color configuration for the tape
+ */
+interface TraceTapeColors {
+    line?: string;
+    scrubber?: string;
+    highlighted?: string;
+    background?: string;
+}
+/**
+ * Props for the TraceTape component
+ */
+export interface TraceTapeProps {
+    /** Array of traces to display on the tape */
+    traces: RegisteredTrace[];
+    /** Theme for styling */
+    theme: Theme;
+    /** Currently highlighted span ID (controlled from parent) */
+    highlightedSpanId?: string;
+    /** Currently selected trace ID - its spans will glow */
+    selectedTraceId?: string;
+    /** Trace ID to focus/jump to (changes trigger scrubber movement) */
+    focusTraceId?: string | null;
+    /** Callback when user scrubs to a new span */
+    onSpanHighlight: (spanId: string | null, span: OtelSpanData | null) => void;
+    /** Height of the tape in pixels */
+    height?: number;
+    /** Whether the tape is interactive */
+    interactive?: boolean;
+    /** Color scheme configuration (overrides theme-based colors) */
+    colors?: TraceTapeColors;
+}
+/**
+ * TraceTape - A horizontal timeline scrubber for navigating trace spans
+ *
+ * Displays all trace spans and events as vertical lines on a horizontal tape.
+ * Dragging the scrubber highlights the nearest span to the left of the cursor.
+ */
+export declare function TraceTape({ traces, theme, highlightedSpanId, selectedTraceId, focusTraceId, onSpanHighlight, height, interactive, colors, }: TraceTapeProps): import("react/jsx-runtime").JSX.Element;
+export default TraceTape;
+//# sourceMappingURL=TraceTape.d.ts.map

package/dist/components/TraceTape.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TraceTape.d.ts","sourceRoot":"","sources":["../../src/components/TraceTape.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AAC3D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AACtE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAGrD;;GAEG;AACH,UAAU,eAAe;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,6CAA6C;IAC7C,MAAM,EAAE,eAAe,EAAE,CAAC;IAC1B,wBAAwB;IACxB,KAAK,EAAE,KAAK,CAAC;IACb,6DAA6D;IAC7D,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,wDAAwD;IACxD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,oEAAoE;IACpE,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,8CAA8C;IAC9C,eAAe,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,EAAE,IAAI,EAAE,YAAY,GAAG,IAAI,KAAK,IAAI,CAAC;IAC5E,mCAAmC;IACnC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,sCAAsC;IACtC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gEAAgE;IAChE,MAAM,CAAC,EAAE,eAAe,CAAC;CAC1B;AAUD;;;;;GAKG;AACH,wBAAgB,SAAS,CAAC,EACxB,MAAM,EACN,KAAK,EACL,iBAAiB,EACjB,eAAe,EACf,YAAY,EACZ,eAAe,EACf,MAAW,EACX,WAAkB,EAClB,MAAW,GACZ,EAAE,cAAc,2CA8ahB;AAED,eAAe,SAAS,CAAC"}

package/dist/components/index.d.ts

@@ -2,4 +2,6 @@ export { TraceList } from './TraceList';
 export type { TraceListProps } from './TraceList';
 export { TraceDetails } from './TraceDetails';
 export type { TraceDetailsProps, ScopeInfo } from './TraceDetails';
+export { TraceTape } from './TraceTape';
+export type { TraceTapeProps } from './TraceTape';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAElD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,YAAY,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAElD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,YAAY,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAEnE,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC"}

package/dist/panels/TraceListPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TraceListPanel.d.ts","sourceRoot":"","sources":["../../src/panels/TraceListPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAE3D,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,UAAU,CAAC;AAczD;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CAgnC7D,CAAC"}
+{"version":3,"file":"TraceListPanel.d.ts","sourceRoot":"","sources":["../../src/panels/TraceListPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAE3D,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,UAAU,CAAC;AAgBzD;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CAurC7D,CAAC"}

package/dist/panels.bundle.js

@@ -86468,16 +86468,43 @@ const CustomNode = ({ data, selected: selected2, dragging }) => {
         };
     }
   };
+  const getBadgePosition = (position2) => {
+    const isDiamondShape = typeDefinition.shape === "diamond";
+    if (isDiamondShape) {
+      switch (position2) {
+        case "top-left":
+          return { top: "50%", left: 0, transform: "translate(-50%, -50%)" };
+        case "top-right":
+          return { top: "50%", right: 0, transform: "translate(50%, -50%)" };
+        case "left":
+          return { top: "50%", left: 0, transform: "translate(-50%, -50%)" };
+        case "right":
+          return { top: "50%", right: 0, transform: "translate(50%, -50%)" };
+      }
+    }
+    switch (position2) {
+      case "top-left":
+        return { top: -6, left: -6 };
+      case "top-right":
+        return { top: -6, right: -6 };
+      case "left":
+        return { top: -6, left: -6 };
+      case "right":
+        return { top: -6, right: -6 };
+    }
+  };
   const renderSourcesBadge = () => {
     const sources2 = nodeData == null ? void 0 : nodeData.sources;
     if (!sources2 || sources2.length === 0)
       return null;
     const shapeStyles = getBadgeShapeStyles();
+    const positionStyles = getBadgePosition("top-right");
     return jsx("div", { style: {
       position: "absolute",
-      top: -6,
-      right: -6,
+      ...positionStyles,
       ...shapeStyles,
+      // Override transform if shape has rotation but we already have a position transform
+      ...typeDefinition.shape === "diamond" ? { transform: `${positionStyles.transform} rotate(45deg)` } : {},
       backgroundColor: "#10b981",
       color: "white",
       fontSize: theme2.fontSizes[0],
@@ -86499,11 +86526,10 @@ const CustomNode = ({ data, selected: selected2, dragging }) => {
     const isOutbound = direction === "outbound";
     const directionIcon = isOutbound ? "↗" : "↙";
     const directionTitle = isOutbound ? "Outbound boundary (calls external system)" : "Inbound boundary (called by external system)";
+    const positionStyles = getBadgePosition(isOutbound ? "right" : "left");
     return jsx("div", { style: {
       position: "absolute",
-      top: -6,
-      // Inbound badge on left, outbound badge on right
-      ...isOutbound ? { right: -6 } : { left: -6 },
+      ...positionStyles,
       width: 18,
       height: 18,
       borderRadius: "50%",
@@ -86542,11 +86568,13 @@ const CustomNode = ({ data, selected: selected2, dragging }) => {
       implemented: "Implemented - Code exists"
     };
     const shapeStyles = getBadgeShapeStyles();
+    const positionStyles = getBadgePosition("top-left");
     return jsx("div", { style: {
       position: "absolute",
-      top: -6,
-      left: -6,
+      ...positionStyles,
       ...shapeStyles,
+      // Override transform if shape has rotation but we already have a position transform
+      ...typeDefinition.shape === "diamond" ? { transform: `${positionStyles.transform} rotate(45deg)` } : {},
       backgroundColor: statusColors[status2],
       color: "white",
       fontSize: theme2.fontSizes[0],
@@ -100928,6 +100956,361 @@ const TraceList = ({
     }
   );
 };
+function parseNanoTime(nanoStr) {
+  const nanos = BigInt(nanoStr);
+  return Number(nanos / BigInt(1e6));
+}
+function TraceTape({
+  traces,
+  theme: theme2,
+  highlightedSpanId,
+  selectedTraceId,
+  focusTraceId,
+  onSpanHighlight,
+  height = 48,
+  interactive = true,
+  colors: colors2 = {}
+}) {
+  var _a;
+  const tapeRef = useRef(null);
+  const [scrubberPercent, setScrubberPercent] = useState(null);
+  const [isDragging, setIsDragging] = useState(false);
+  const prevFocusTraceIdRef = useRef(void 0);
+  const resolvedColors = {
+    line: theme2.colors.primary,
+    scrubber: theme2.colors.accent || "#22d3ee",
+    highlighted: theme2.colors.text,
+    background: theme2.colors.backgroundSecondary,
+    ...colors2
+  };
+  const timeRange = useMemo(() => {
+    if (traces.length === 0) return { min: 0, max: 0 };
+    const allStartTimes = traces.map((t) => t.startTime);
+    const allEndTimes = traces.map((t) => t.endTime);
+    return {
+      min: Math.min(...allStartTimes),
+      max: Math.max(...allEndTimes)
+    };
+  }, [traces]);
+  const spanIndexToPercent = useCallback((index2, total) => {
+    if (total <= 1) return 50;
+    const usableRange = 90;
+    const startOffset = 5;
+    return startOffset + index2 / (total - 1) * usableRange;
+  }, []);
+  const percentToSpanIndex = useCallback((percent, total) => {
+    if (total <= 1) return 0;
+    const usableRange = 90;
+    const startOffset = 5;
+    const normalizedPercent = Math.max(0, Math.min(100, percent));
+    const index2 = Math.round((normalizedPercent - startOffset) / usableRange * (total - 1));
+    return Math.max(0, Math.min(total - 1, index2));
+  }, []);
+  const spanMap = useMemo(() => {
+    const map2 = /* @__PURE__ */ new Map();
+    traces.forEach((trace2) => {
+      const spans = getSpansFromTrace(trace2);
+      spans.forEach((span) => map2.set(span.spanId, span));
+    });
+    return map2;
+  }, [traces]);
+  const spanBars = useMemo(() => {
+    const bars = [];
+    traces.forEach((trace2) => {
+      const spans = getSpansFromTrace(trace2);
+      if (spans.length > 0) {
+        let earliestSpanId = spans[0].spanId;
+        let earliestTime = parseNanoTime(spans[0].startTimeUnixNano);
+        spans.forEach((span) => {
+          const startMs = parseNanoTime(span.startTimeUnixNano);
+          const endMs = parseNanoTime(span.endTimeUnixNano);
+          if (startMs < earliestTime) {
+            earliestTime = startMs;
+            earliestSpanId = span.spanId;
+          }
+          bars.push({
+            id: span.spanId,
+            spanId: span.spanId,
+            spanName: span.name,
+            startMs,
+            endMs,
+            isRoot: false,
+            // Will be set below
+            traceId: trace2.traceId
+          });
+        });
+        const rootBar = bars.find((b) => b.spanId === earliestSpanId);
+        if (rootBar) rootBar.isRoot = true;
+      } else {
+        bars.push({
+          id: `trace-${trace2.traceId}`,
+          spanId: `trace-${trace2.traceId}`,
+          spanName: trace2.name,
+          startMs: trace2.startTime,
+          endMs: trace2.endTime,
+          isRoot: true,
+          traceId: trace2.traceId
+        });
+      }
+    });
+    bars.sort((a, b) => a.startMs - b.startMs);
+    return bars;
+  }, [traces]);
+  const findSpanByIndex = useCallback(
+    (index2) => {
+      if (index2 < 0 || index2 >= spanBars.length) return null;
+      const bar = spanBars[index2];
+      return spanMap.get(bar.spanId) || null;
+    },
+    [spanBars, spanMap]
+  );
+  const getSpanBarByIndex = useCallback(
+    (index2) => {
+      if (index2 < 0 || index2 >= spanBars.length) return null;
+      return spanBars[index2];
+    },
+    [spanBars]
+  );
+  const getRelativePercent = useCallback((event) => {
+    var _a2, _b;
+    if (!tapeRef.current) return 0;
+    const rect = tapeRef.current.getBoundingClientRect();
+    const clientX = "touches" in event ? ((_a2 = event.touches[0]) == null ? void 0 : _a2.clientX) ?? ((_b = event.changedTouches[0]) == null ? void 0 : _b.clientX) ?? 0 : event.clientX;
+    const x = clientX - rect.left;
+    const percent = x / rect.width * 100;
+    return Math.max(0, Math.min(100, percent));
+  }, []);
+  const handlePointerDown2 = useCallback(
+    (event) => {
+      if (!interactive) return;
+      event.preventDefault();
+      setIsDragging(true);
+      const percent = getRelativePercent(event.nativeEvent);
+      const spanIndex = percentToSpanIndex(percent, spanBars.length);
+      const snappedPercent = spanIndexToPercent(spanIndex, spanBars.length);
+      setScrubberPercent(snappedPercent);
+      const span = findSpanByIndex(spanIndex);
+      const bar = getSpanBarByIndex(spanIndex);
+      onSpanHighlight((span == null ? void 0 : span.spanId) || (bar == null ? void 0 : bar.spanId) || null, span);
+    },
+    [
+      interactive,
+      percentToSpanIndex,
+      spanIndexToPercent,
+      spanBars.length,
+      findSpanByIndex,
+      getSpanBarByIndex,
+      onSpanHighlight,
+      getRelativePercent
+    ]
+  );
+  const handlePointerMove2 = useCallback(
+    (event) => {
+      if (!isDragging || !tapeRef.current) return;
+      event.preventDefault();
+      const percent = getRelativePercent(event);
+      const spanIndex = percentToSpanIndex(percent, spanBars.length);
+      const snappedPercent = spanIndexToPercent(spanIndex, spanBars.length);
+      setScrubberPercent(snappedPercent);
+      const span = findSpanByIndex(spanIndex);
+      const bar = getSpanBarByIndex(spanIndex);
+      onSpanHighlight((span == null ? void 0 : span.spanId) || (bar == null ? void 0 : bar.spanId) || null, span);
+    },
+    [
+      isDragging,
+      percentToSpanIndex,
+      spanIndexToPercent,
+      spanBars.length,
+      findSpanByIndex,
+      getSpanBarByIndex,
+      onSpanHighlight,
+      getRelativePercent
+    ]
+  );
+  const handlePointerUp2 = useCallback(() => {
+    setIsDragging(false);
+  }, []);
+  useEffect(() => {
+    if (focusTraceId === prevFocusTraceIdRef.current) return;
+    prevFocusTraceIdRef.current = focusTraceId;
+    if (!focusTraceId) return;
+    const spanIndex = spanBars.findIndex((bar) => bar.traceId === focusTraceId);
+    if (spanIndex !== -1) {
+      const snappedPercent = spanIndexToPercent(spanIndex, spanBars.length);
+      setScrubberPercent(snappedPercent);
+    }
+  }, [focusTraceId, spanBars, spanIndexToPercent]);
+  useEffect(() => {
+    if (isDragging) {
+      window.addEventListener("mousemove", handlePointerMove2);
+      window.addEventListener("mouseup", handlePointerUp2);
+      window.addEventListener("touchmove", handlePointerMove2, { passive: false });
+      window.addEventListener("touchend", handlePointerUp2);
+    }
+    return () => {
+      window.removeEventListener("mousemove", handlePointerMove2);
+      window.removeEventListener("mouseup", handlePointerUp2);
+      window.removeEventListener("touchmove", handlePointerMove2);
+      window.removeEventListener("touchend", handlePointerUp2);
+    };
+  }, [isDragging, handlePointerMove2, handlePointerUp2]);
+  const formatDuration = (ms) => {
+    const totalSeconds = Math.floor(ms / 1e3);
+    const minutes = Math.floor(totalSeconds / 60);
+    const seconds = totalSeconds % 60;
+    const milliseconds = Math.floor(ms % 1e3);
+    if (minutes > 0) {
+      return `${minutes}:${String(seconds).padStart(2, "0")}.${String(milliseconds).padStart(3, "0")}`;
+    }
+    return `${seconds}.${String(milliseconds).padStart(3, "0")}`;
+  };
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          fontSize: theme2.fontSizes[1],
+          fontFamily: theme2.fonts.monospace,
+          color: theme2.colors.textSecondary,
+          whiteSpace: "nowrap",
+          minWidth: "60px"
+        },
+        children: traces.length > 0 ? "0.000" : "--.---"
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: tapeRef,
+        onMouseDown: handlePointerDown2,
+        onTouchStart: handlePointerDown2,
+        style: {
+          position: "relative",
+          flex: 1,
+          height: `${height}px`,
+          background: resolvedColors.background,
+          borderRadius: theme2.radii[2],
+          overflow: "visible",
+          cursor: interactive ? "pointer" : "default",
+          userSelect: "none",
+          touchAction: "none"
+        },
+        children: [
+          traces.length === 0 && /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                inset: 0,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                color: theme2.colors.textMuted,
+                fontSize: theme2.fontSizes[2],
+                fontFamily: theme2.fonts.body
+              },
+              children: "No traces"
+            }
+          ),
+          spanBars.map((bar, index2) => {
+            const percent = spanIndexToPercent(index2, spanBars.length);
+            const isHighlighted = bar.spanId === highlightedSpanId;
+            const isInSelectedTrace = bar.traceId === selectedTraceId;
+            const topOffset = bar.isRoot ? "4px" : "50%";
+            const bottomOffset = "4px";
+            const traceColor = theme2.colors.accent || "#14b8a6";
+            const spanColor = resolvedColors.line;
+            const selectedTraceColor = theme2.colors.accent || "#5eead4";
+            const selectedSpanColor = `${theme2.colors.primary}cc`;
+            const getWidth = () => {
+              if (isHighlighted) return "6px";
+              if (isInSelectedTrace) return bar.isRoot ? "6px" : "4px";
+              return bar.isRoot ? "4px" : "2px";
+            };
+            const getBackground = () => {
+              if (isHighlighted) return resolvedColors.highlighted;
+              if (isInSelectedTrace) return bar.isRoot ? selectedTraceColor : selectedSpanColor;
+              return bar.isRoot ? traceColor : spanColor;
+            };
+            return /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  position: "absolute",
+                  left: `${percent}%`,
+                  transform: "translateX(-50%)",
+                  top: topOffset,
+                  bottom: bottomOffset,
+                  width: getWidth(),
+                  background: getBackground(),
+                  opacity: isHighlighted ? 1 : isInSelectedTrace ? 1 : bar.isRoot ? 0.9 : 0.5,
+                  borderRadius: "2px",
+                  transition: "all 0.15s",
+                  pointerEvents: "none",
+                  boxShadow: isInSelectedTrace ? `0 0 8px 2px ${getBackground()}` : "none"
+                },
+                title: `${bar.isRoot ? "Trace: " : ""}${bar.spanName} (${(bar.endMs - bar.startMs).toFixed(1)}ms)`
+              },
+              bar.id
+            );
+          }),
+          scrubberPercent !== null && /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                left: `${scrubberPercent}%`,
+                top: 0,
+                bottom: 0,
+                width: "2px",
+                marginLeft: "-1px",
+                background: resolvedColors.scrubber,
+                pointerEvents: "none",
+                zIndex: 10
+              },
+              children: /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    position: "absolute",
+                    top: "-24px",
+                    left: "50%",
+                    transform: "translateX(-50%)",
+                    fontSize: theme2.fontSizes[0],
+                    fontFamily: theme2.fonts.monospace,
+                    color: resolvedColors.scrubber,
+                    whiteSpace: "nowrap",
+                    background: theme2.colors.background,
+                    padding: "2px 6px",
+                    borderRadius: "3px",
+                    textTransform: "uppercase",
+                    letterSpacing: "0.5px",
+                    border: `1px solid ${theme2.colors.border}`
+                  },
+                  children: ((_a = spanBars[percentToSpanIndex(scrubberPercent, spanBars.length)]) == null ? void 0 : _a.isRoot) ? "trace" : "span"
+                }
+              )
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          fontSize: theme2.fontSizes[1],
+          fontFamily: theme2.fonts.monospace,
+          color: theme2.colors.textSecondary,
+          whiteSpace: "nowrap",
+          minWidth: "60px",
+          textAlign: "right"
+        },
+        children: traces.length > 0 ? formatDuration(timeRange.max - timeRange.min) : "--.---"
+      }
+    )
+  ] });
+}
 class PanelFileSystemAdapter {
   constructor(options) {
     this.fileContentCache = /* @__PURE__ */ new Map();
@@ -101158,6 +101541,8 @@ const TraceListPanel = ({
   const [activeTab, setActiveTab] = useState("traces");
   const [selectedSchematicNodeId, setSelectedSchematicNodeId] = useState(null);
   const [workflowFilterMode, setWorkflowFilterMode] = useState("all");
+  const [highlightedSpanId, setHighlightedSpanId] = useState();
+  const [focusTraceId, setFocusTraceId] = useState(null);
   const telemetrySlice = context2.telemetry;
   const traces = React__default.useMemo(() => (telemetrySlice == null ? void 0 : telemetrySlice.data) || [], [telemetrySlice == null ? void 0 : telemetrySlice.data]);
   const schematicsSlice = context2.schematics;
@@ -101389,6 +101774,39 @@ const TraceListPanel = ({
       setResources((prev) => ({ ...prev, [key.trim()]: "" }));
     }
   };
+  const findTraceForSpan = (spanId) => {
+    var _a;
+    if (spanId.startsWith("trace-")) {
+      const traceId = spanId.slice(6);
+      return traces.find((t) => t.traceId === traceId) || null;
+    }
+    for (const trace2 of traces) {
+      if ((_a = trace2.otlpData) == null ? void 0 : _a.resourceSpans) {
+        for (const resourceSpan of trace2.otlpData.resourceSpans) {
+          for (const scopeSpan of resourceSpan.scopeSpans) {
+            if (scopeSpan.spans.some((s2) => s2.spanId === spanId)) {
+              return trace2;
+            }
+          }
+        }
+      }
+    }
+    return null;
+  };
+  const handleSpanHighlight = (spanId, _span) => {
+    setHighlightedSpanId(spanId ?? void 0);
+    setFocusTraceId(null);
+    if (spanId) {
+      const trace2 = findTraceForSpan(spanId);
+      if (trace2) {
+        setExpandedTraceIds((prev) => {
+          const newSet = new Set(prev);
+          newSet.add(trace2.traceId);
+          return newSet;
+        });
+      }
+    }
+  };
   const handleTraceClick = (trace2) => {
     setExpandedTraceIds((prev) => {
       const newSet = new Set(prev);
@@ -101399,6 +101817,7 @@ const TraceListPanel = ({
       }
       return newSet;
     });
+    setFocusTraceId(trace2.traceId);
   };
   const handleTraceSelect = (trace2) => {
     if (events) {
@@ -101688,20 +102107,46 @@ const TraceListPanel = ({
             ]
           }
         ),
-        activeTab === "traces" ? /* @__PURE__ */ jsx("div", { style: { flex: 1, overflow: "auto" }, children: /* @__PURE__ */ jsx(
-          TraceList,
-          {
-            traces,
-            theme: theme2,
-            onTraceClick: handleTraceClick,
-            onTraceSelect: handleTraceSelect,
-            onWorkflowClick: handleWorkflowClick,
-            onRemoveTrace: handleRemoveTrace,
-            onClearAll: handleClearAll,
-            expandedTraceIds,
-            emptyMessage: traces.length === 0 ? "No traces received yet. Waiting for telemetry data..." : void 0
-          }
-        ) }) : activeTab === "configuration" && showConfigurationTab ? /* @__PURE__ */ jsx("div", { style: { flex: 1, padding: "16px", overflow: "auto" }, children: configLoading ? /* @__PURE__ */ jsx("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", height: "100%" }, children: /* @__PURE__ */ jsx("div", { style: { fontFamily: theme2.fonts.body, fontSize: theme2.fontSizes[1], color: theme2.colors.textSecondary }, children: "Loading resources..." }) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        activeTab === "traces" ? /* @__PURE__ */ jsxs("div", { style: { flex: 1, overflow: "hidden", display: "flex", flexDirection: "column" }, children: [
+          traces.length > 0 && /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                padding: "16px 16px 8px 16px",
+                paddingTop: "24px",
+                // Extra space for scrubber label
+                borderBottom: `1px solid ${theme2.colors.border}`,
+                flexShrink: 0
+              },
+              children: /* @__PURE__ */ jsx(
+                TraceTape,
+                {
+                  traces,
+                  theme: theme2,
+                  highlightedSpanId,
+                  selectedTraceId: Array.from(expandedTraceIds)[0],
+                  focusTraceId,
+                  onSpanHighlight: handleSpanHighlight,
+                  height: 40
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { style: { flex: 1, overflow: "auto" }, children: /* @__PURE__ */ jsx(
+            TraceList,
+            {
+              traces,
+              theme: theme2,
+              onTraceClick: handleTraceClick,
+              onTraceSelect: handleTraceSelect,
+              onWorkflowClick: handleWorkflowClick,
+              onRemoveTrace: handleRemoveTrace,
+              onClearAll: handleClearAll,
+              expandedTraceIds,
+              emptyMessage: traces.length === 0 ? "No traces received yet. Waiting for telemetry data..." : void 0
+            }
+          ) })
+        ] }) : activeTab === "configuration" && showConfigurationTab ? /* @__PURE__ */ jsx("div", { style: { flex: 1, padding: "16px", overflow: "auto" }, children: configLoading ? /* @__PURE__ */ jsx("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", height: "100%" }, children: /* @__PURE__ */ jsx("div", { style: { fontFamily: theme2.fonts.body, fontSize: theme2.fontSizes[1], color: theme2.colors.textSecondary }, children: "Loading resources..." }) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsxs("div", { style: { marginBottom: "16px" }, children: [
             /* @__PURE__ */ jsx("h2", { style: { margin: "0 0 8px 0", fontFamily: theme2.fonts.heading, fontSize: theme2.fontSizes[3], fontWeight: theme2.fontWeights.semibold }, children: "Library Resources" }),
             /* @__PURE__ */ jsx("p", { style: { margin: 0, fontFamily: theme2.fonts.body, fontSize: theme2.fontSizes[1], color: theme2.colors.textSecondary }, children: "Configure OpenTelemetry and other resources in library.yaml" })