@workflow/web-shared 5.0.0-beta.1 → 5.0.0-beta.3

package/src/components/new-trace-viewer/icons.tsx

@@ -0,0 +1,79 @@
+const WorkflowIcon = () => {
+  return (
+    <svg
+      data-testid="geist-icon"
+      height="16"
+      stroke-linejoin="round"
+      style={{ color: 'currentColor' }}
+      viewBox="0 0 16 16"
+      width="16"
+    >
+      <path
+        d="M5.75 7L6.4209 7.33594L4.85254 10.4717C5.38789 10.771 5.75 11.3431 5.75 12V14C5.75 14.9665 4.96648 15.75 4 15.75H2C1.03352 15.75 0.25 14.9665 0.25 14V12C0.25 11.0335 1.03352 10.25 2 10.25H3.28711L5.0791 6.66504L5.75 7ZM14 10.25C14.9665 10.25 15.75 11.0335 15.75 12V14C15.75 14.9665 14.9665 15.75 14 15.75H12C11.1185 15.75 10.3909 15.098 10.2695 14.25H7V12.75H10.25V12C10.25 11.0335 11.0335 10.25 12 10.25H14ZM2 11.75C1.86192 11.75 1.75 11.8619 1.75 12V14C1.75 14.1381 1.86192 14.25 2 14.25H4C4.13808 14.25 4.25 14.1381 4.25 14V12C4.25 11.8619 4.13808 11.75 4 11.75H2ZM12 11.75C11.8619 11.75 11.75 11.8619 11.75 12V14C11.75 14.1381 11.8619 14.25 12 14.25H14C14.1381 14.25 14.25 14.1381 14.25 14V12C14.25 11.8619 14.1381 11.75 14 11.75H12ZM9 0.25C9.96649 0.25 10.75 1.03351 10.75 2V4C10.75 4.44642 10.5808 4.85197 10.3057 5.16113L12.2041 8.6416L10.8877 9.36035L8.91895 5.75H7C6.03351 5.75 5.25 4.96649 5.25 4V2C5.25 1.03351 6.03351 0.25 7 0.25H9ZM7 1.75C6.86193 1.75 6.75 1.86193 6.75 2V4C6.75 4.13807 6.86193 4.25 7 4.25H9C9.13807 4.25 9.25 4.13807 9.25 4V2C9.25 1.86193 9.13807 1.75 9 1.75H7Z"
+        fill="currentColor"
+      ></path>
+    </svg>
+  );
+};
+
+const WebhookIcon = () => {
+  return (
+    <svg
+      data-testid="geist-icon"
+      height="16"
+      stroke-linejoin="round"
+      viewBox="0 0 16 16"
+      width="16"
+      style={{ color: 'currentColor' }}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M5.8349 3.24994C5.14454 4.44567 5.55423 5.97464 6.74996 6.665L7.39465 7.03721L7.02726 7.68466L5.14599 11C5.21289 11.1531 5.25 11.3222 5.25 11.5C5.25 12.1904 4.69036 12.75 4 12.75C3.30964 12.75 2.75 12.1904 2.75 11.5C2.75 10.8634 3.22584 10.338 3.84123 10.26L5.38944 7.5316C3.95909 6.30274 3.55857 4.19264 4.53586 2.49994C5.64043 0.586765 8.08679 -0.0687357 9.99996 1.03583C11.836 2.09584 12.5137 4.39156 11.5892 6.26591L10.4949 4.33754C10.4418 3.53274 10.0009 2.76843 9.24996 2.33487C8.05423 1.64452 6.52525 2.0542 5.8349 3.24994ZM9.146 4.99996C9.21289 4.84686 9.25 4.67776 9.25 4.5C9.25 3.80964 8.69036 3.25 8 3.25C7.30964 3.25 6.75 3.80964 6.75 4.5C6.75 5.13659 7.22586 5.66203 7.84127 5.74002L9.72266 9.05556L10.0956 9.71274L10.75 9.33493C11.9457 8.64458 13.4747 9.05427 14.165 10.25C14.8554 11.4457 14.4457 12.9747 13.25 13.6651C12.5047 14.0953 11.63 14.0983 10.9096 13.75H8.69252C9.85895 15.4685 12.1727 16.0191 14 14.9641C15.9131 13.8595 16.5686 11.4132 15.4641 9.5C14.4886 7.81038 12.4665 7.10169 10.6895 7.71998L9.146 4.99996ZM13.25 11.5C13.25 12.1904 12.6904 12.75 12 12.75C11.591 12.75 11.228 12.5536 10.9999 12.25H7.9298C7.57875 14.1006 5.95279 15.5 4 15.5C1.79086 15.5 0 13.7091 0 11.5C0 9.40018 1.61801 7.67826 3.67529 7.51299L2.58098 9.44147C1.92792 9.89251 1.5 10.6463 1.5 11.5C1.5 12.8807 2.61929 14 4 14C5.38071 14 6.5 12.8807 6.5 11.5V10.75H7.25H10.9999C11.228 10.4464 11.591 10.25 12 10.25C12.6904 10.25 13.25 10.8096 13.25 11.5Z"
+        fill="currentColor"
+      ></path>
+    </svg>
+  );
+};
+
+const SleepIcon = () => {
+  return (
+    <svg
+      data-testid="geist-icon"
+      height="16"
+      strokeLinejoin="round"
+      viewBox="0 0 16 16"
+      width="16"
+      style={{ color: 'currentColor' }}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M7.25 1.25V2.03971C5.87928 2.18571 4.62678 2.72736 3.6089 3.54824L3.03033 2.96967L2.5 2.43934L1.43934 3.5L1.96967 4.03033L2.54824 4.6089C1.57979 5.80976 1 7.33717 1 9C1 12.866 4.13401 16 8 16C11.866 16 15 12.866 15 9C15 7.33717 14.4202 5.80976 13.4518 4.6089L14.0303 4.03033L14.5607 3.5L13.5 2.43934L12.9697 2.96967L12.3911 3.54824C11.3732 2.72736 10.1207 2.18571 8.75 2.03971V1.25H9.25H10V-0.25H9.25H8.75H7.25H6.75H6V1.25H6.75H7.25ZM2.5 9C2.5 5.96243 4.96243 3.5 8 3.5C11.0376 3.5 13.5 5.96243 13.5 9C13.5 12.0376 11.0376 14.5 8 14.5C4.96243 14.5 2.5 12.0376 2.5 9ZM8.75 6.75V6H7.25V6.75V9V9.75H8.75V9V6.75Z"
+        fill="currentColor"
+      ></path>
+    </svg>
+  );
+};
+
+const StepForwardIcon = () => {
+  return (
+    <svg
+      data-testid="geist-icon"
+      height="16"
+      strokeLinejoin="round"
+      viewBox="0 0 16 16"
+      width="16"
+      style={{ color: 'currentColor' }}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M4.21969 12.5303L4.75002 13.0607L5.81068 12L5.28035 11.4697L1.81068 7.99999L5.28035 4.53032L5.81068 3.99999L4.75002 2.93933L4.21969 3.46966L0.39647 7.29289C0.00594562 7.68341 0.00594562 8.31658 0.39647 8.7071L4.21969 12.5303ZM11.7804 12.5303L11.25 13.0607L10.1894 12L10.7197 11.4697L14.1894 7.99999L10.7197 4.53032L10.1894 3.99999L11.25 2.93933L11.7804 3.46966L15.6036 7.29289C15.9941 7.68341 15.9941 8.31658 15.6036 8.7071L11.7804 12.5303Z"
+        fill="currentColor"
+      ></path>
+    </svg>
+  );
+};
+
+export { WorkflowIcon, WebhookIcon, SleepIcon, StepForwardIcon };

package/src/components/new-trace-viewer/trace-viewer.tsx

@@ -0,0 +1,585 @@
+'use client';
+
+import { parseStepName, parseWorkflowName } from '@workflow/utils/parse-name';
+import { Search, X } from 'lucide-react';
+import {
+  type ReactNode,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { ErrorBoundary } from '../error-boundary';
+import {
+  EntityDetailPanel,
+  type SelectedSpanInfo,
+} from '../sidebar/entity-detail-panel';
+import { useSidebarDataOptional } from '../sidebar/sidebar-data-context';
+import type { Trace } from '../trace-viewer/types';
+import { formatDuration, getHighResInMs } from '../trace-viewer/util/timing';
+import { CopyButton } from './components/copy-button';
+import { SplitPane } from './components/split-pane';
+import EventList from './components/event-list';
+import { Timeline, TimelineHeader } from './components/timeline';
+import { ActiveSpanProvider, useActiveSpan } from './context';
+import { DetailPanel } from './detail-panel';
+import { buildTimeCompression, computeRootBounds } from './utils';
+
+interface NewTraceViewerProps {
+  trace: Trace;
+}
+
+const MIN_VIEWPORT_MS = 0.001;
+const TIMELINE_PADDING = 16;
+
+interface Viewport {
+  start: number;
+  end: number;
+}
+
+function useAnimatedViewport(initial: Viewport) {
+  const [viewport, setViewportState] = useState<Viewport>(initial);
+  const animRef = useRef<{
+    raf: number;
+    from: Viewport;
+    to: Viewport;
+    start: number;
+  } | null>(null);
+  const currentRef = useRef(initial);
+  currentRef.current = viewport;
+
+  const cancel = useCallback(() => {
+    if (animRef.current) {
+      cancelAnimationFrame(animRef.current.raf);
+      animRef.current = null;
+    }
+  }, []);
+
+  const animateTo = useCallback(
+    (target: Viewport) => {
+      cancel();
+      const from = currentRef.current;
+      const anim = { raf: 0, from, to: target, start: performance.now() };
+
+      const tick = () => {
+        const t = Math.min((performance.now() - anim.start) / 150, 1);
+        const e = 1 - (1 - t) * (1 - t);
+        setViewportState({
+          start: anim.from.start + (anim.to.start - anim.from.start) * e,
+          end: anim.from.end + (anim.to.end - anim.from.end) * e,
+        });
+        if (t < 1) anim.raf = requestAnimationFrame(tick);
+        else animRef.current = null;
+      };
+
+      animRef.current = anim;
+      anim.raf = requestAnimationFrame(tick);
+    },
+    [cancel]
+  );
+
+  const setViewport = useCallback(
+    (update: Viewport | ((prev: Viewport) => Viewport)) => {
+      cancel();
+      if (typeof update === 'function') {
+        setViewportState((prev) => {
+          const next = update(prev);
+          currentRef.current = next;
+          return next;
+        });
+      } else {
+        currentRef.current = update;
+        setViewportState(update);
+      }
+    },
+    [cancel]
+  );
+
+  useEffect(() => cancel, [cancel]);
+
+  return { viewport, setViewport, animateTo };
+}
+
+// ---------------------------------------------------------------------------
+// Hook: bridge ActiveSpanContext + SidebarDataContext → SelectedSpanInfo
+// ---------------------------------------------------------------------------
+
+function useSelectedSpanInfo(): SelectedSpanInfo | null {
+  const { activeSpan } = useActiveSpan();
+  const sidebar = useSidebarDataOptional();
+
+  return useMemo(() => {
+    if (!activeSpan || !sidebar) return null;
+
+    const correlationId = activeSpan.spanId;
+    const rawEvents = correlationId
+      ? sidebar.events.filter((e) => e.correlationId === correlationId)
+      : [];
+
+    return {
+      data: activeSpan.attributes?.data,
+      resource: activeSpan.attributes?.resource as string | undefined,
+      spanId: activeSpan.spanId,
+      rawEvents,
+    };
+  }, [activeSpan, sidebar?.events]);
+}
+
+// ---------------------------------------------------------------------------
+// Root component
+// ---------------------------------------------------------------------------
+
+export function NewTraceViewer({ trace }: NewTraceViewerProps): ReactNode {
+  return (
+    <ActiveSpanProvider spans={trace.spans}>
+      <NewTraceViewerContent trace={trace} />
+    </ActiveSpanProvider>
+  );
+}
+
+function NewTraceViewerContent({ trace }: NewTraceViewerProps): ReactNode {
+  const { activeSpan, activeSpanId, setActiveSpan, clearActiveSpan } =
+    useActiveSpan();
+
+  const sidebar = useSidebarDataOptional();
+  const selectedSpan = useSelectedSpanInfo();
+
+  const [searchQuery, setSearchQuery] = useState('');
+
+  const filteredSpans = useMemo(() => {
+    const q = searchQuery.trim().toLowerCase();
+    if (!q) return trace.spans;
+    return trace.spans.filter(
+      (s) =>
+        s.name.toLowerCase().includes(q) || s.resource.toLowerCase().includes(q)
+    );
+  }, [trace.spans, searchQuery]);
+
+  const root = useMemo(() => computeRootBounds(trace.spans), [trace.spans]);
+
+  const { viewport, setViewport, animateTo } = useAnimatedViewport({
+    start: root.startTime,
+    end: root.startTime + root.duration,
+  });
+
+  const prevRootRef = useRef<Viewport>({
+    start: root.startTime,
+    end: root.startTime + root.duration,
+  });
+
+  useEffect(() => {
+    const prevRoot = prevRootRef.current;
+    const newStart = root.startTime;
+    const newEnd = root.startTime + root.duration;
+
+    setViewport((prev) => {
+      const wasAtFullExtent =
+        Math.abs(prev.start - prevRoot.start) < 0.01 &&
+        Math.abs(prev.end - prevRoot.end) < 0.01;
+
+      if (wasAtFullExtent) {
+        return { start: newStart, end: newEnd };
+      }
+      return prev;
+    });
+
+    prevRootRef.current = { start: newStart, end: newEnd };
+  }, [root.startTime, root.duration]);
+
+  const viewDuration = viewport.end - viewport.start;
+
+  const compression = useMemo(
+    () => buildTimeCompression(trace.spans, viewport.start, viewport.end),
+    [trace.spans, viewport.start, viewport.end]
+  );
+
+  const isZoomed =
+    viewport.start > root.startTime + 0.01 ||
+    viewport.end < root.startTime + root.duration - 0.01;
+
+  const resetZoom = useCallback(() => {
+    animateTo({ start: root.startTime, end: root.startTime + root.duration });
+  }, [animateTo, root.startTime, root.duration]);
+
+  const handleSelectSpan = useCallback(
+    (spanId: string) => {
+      if (spanId === activeSpanId) {
+        clearActiveSpan();
+        return;
+      }
+      setActiveSpan(spanId);
+
+      const span = trace.spans.find((s) => s.spanId === spanId);
+      if (!span) return;
+
+      const spanStart = getHighResInMs(span.startTime);
+      const spanEnd = getHighResInMs(span.endTime);
+      const spanDuration = spanEnd - spanStart;
+
+      const rootS = root.startTime;
+      const rootE = root.startTime + root.duration;
+      const rootD = root.duration;
+
+      if (spanDuration > rootD * 0.8) {
+        animateTo({ start: rootS, end: rootE });
+        return;
+      }
+
+      const padding = Math.max(spanDuration * 0.2, MIN_VIEWPORT_MS / 2);
+      let newStart = spanStart - padding;
+      let newEnd = spanEnd + padding;
+
+      if (newEnd - newStart < MIN_VIEWPORT_MS) {
+        const center = (spanStart + spanEnd) / 2;
+        newStart = center - MIN_VIEWPORT_MS / 2;
+        newEnd = center + MIN_VIEWPORT_MS / 2;
+      }
+
+      if (newStart < rootS) {
+        const duration = newEnd - newStart;
+        newStart = rootS;
+        newEnd = Math.min(rootE, rootS + duration);
+      }
+      if (newEnd > rootE) {
+        const duration = newEnd - newStart;
+        newEnd = rootE;
+        newStart = Math.max(rootS, rootE - duration);
+      }
+
+      animateTo({ start: newStart, end: newEnd });
+    },
+    [
+      animateTo,
+      setActiveSpan,
+      clearActiveSpan,
+      activeSpanId,
+      trace.spans,
+      root.startTime,
+      root.duration,
+    ]
+  );
+
+  const [altHeld, setAltHeld] = useState(false);
+
+  useEffect(() => {
+    const onKeyDown = (e: KeyboardEvent): void => {
+      if (e.key === 'Escape') {
+        clearActiveSpan();
+      }
+      if (e.key === 'Alt') {
+        e.preventDefault();
+        setAltHeld(true);
+      }
+    };
+    const onKeyUp = (e: KeyboardEvent): void => {
+      if (e.key === 'Alt') setAltHeld(false);
+    };
+    const onBlur = (): void => setAltHeld(false);
+
+    window.addEventListener('keydown', onKeyDown);
+    window.addEventListener('keyup', onKeyUp);
+    window.addEventListener('blur', onBlur);
+    return () => {
+      window.removeEventListener('keydown', onKeyDown);
+      window.removeEventListener('keyup', onKeyUp);
+      window.removeEventListener('blur', onBlur);
+    };
+  }, [clearActiveSpan]);
+
+  const timelineRef = useRef<HTMLDivElement>(null);
+  const [hoverFraction, setHoverFraction] = useState<number | null>(null);
+
+  const hoverInfo = useMemo(() => {
+    if (hoverFraction == null) return null;
+    const absTime = compression.fromVisual(hoverFraction);
+    const offset = absTime - root.startTime;
+    return { fraction: hoverFraction, label: formatDuration(offset, true) };
+  }, [hoverFraction, compression, root.startTime]);
+
+  const handleTimelineMouseMove = useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      const el = timelineRef.current;
+      if (!el) return;
+      const rect = el.getBoundingClientRect();
+      const padding = 8;
+      const contentWidth = rect.width - padding * 2;
+      if (contentWidth <= 0) return;
+      const fraction = Math.max(
+        0,
+        Math.min(1, (e.clientX - rect.left - padding) / contentWidth)
+      );
+      setHoverFraction(fraction);
+    },
+    []
+  );
+
+  const handleTimelineMouseLeave = useCallback(() => {
+    setHoverFraction(null);
+  }, []);
+
+  useEffect(() => {
+    const el = timelineRef.current;
+    if (!el) return;
+
+    const rootS = root.startTime;
+    const rootE = root.startTime + root.duration;
+    const rootD = root.duration;
+    if (rootD <= 0) return;
+
+    const onWheel = (e: WheelEvent): void => {
+      const isZoomGesture = e.ctrlKey || e.metaKey;
+      const hasDeltaX = Math.abs(e.deltaX) > Math.abs(e.deltaY);
+
+      if (!isZoomGesture && !hasDeltaX) return;
+      e.preventDefault();
+
+      const rect = el.getBoundingClientRect();
+      const contentWidth = rect.width - TIMELINE_PADDING * 2;
+      if (contentWidth <= 0) return;
+
+      if (isZoomGesture) {
+        let dy = e.deltaY;
+        if (e.deltaMode === 1) dy *= 16;
+
+        const cursorFraction = Math.max(
+          0,
+          Math.min(1, (e.clientX - rect.left - TIMELINE_PADDING) / contentWidth)
+        );
+        const scaleFactor = Math.pow(2, dy / 200);
+
+        setViewport((prev) => {
+          const prevDuration = prev.end - prev.start;
+          const cursorTime = prev.start + cursorFraction * prevDuration;
+          const newDuration = Math.max(
+            MIN_VIEWPORT_MS,
+            Math.min(rootD, prevDuration * scaleFactor)
+          );
+
+          let newStart = cursorTime - cursorFraction * newDuration;
+          let newEnd = newStart + newDuration;
+
+          if (newStart < rootS) {
+            newStart = rootS;
+            newEnd = rootS + newDuration;
+          }
+          if (newEnd > rootE) {
+            newEnd = rootE;
+            newStart = Math.max(rootS, rootE - newDuration);
+          }
+
+          return { start: newStart, end: newEnd };
+        });
+      } else {
+        let dx = e.deltaX;
+        if (e.deltaMode === 1) dx *= 16;
+
+        setViewport((prev) => {
+          const prevDuration = prev.end - prev.start;
+          const panAmount = (dx / contentWidth) * prevDuration;
+
+          let newStart = prev.start + panAmount;
+          let newEnd = prev.end + panAmount;
+
+          if (newStart < rootS) {
+            newStart = rootS;
+            newEnd = rootS + prevDuration;
+          }
+          if (newEnd > rootE) {
+            newEnd = rootE;
+            newStart = Math.max(rootS, rootE - prevDuration);
+          }
+
+          return { start: newStart, end: newEnd };
+        });
+      }
+    };
+
+    el.addEventListener('wheel', onWheel, { passive: false });
+    return () => el.removeEventListener('wheel', onWheel);
+  }, [root.startTime, root.duration]);
+
+  // Derive the selected span name and metadata for the panel header
+  const selectedSpanName = useMemo(() => {
+    if (!selectedSpan?.data) return 'Details';
+    const data = selectedSpan.data as Record<string, unknown>;
+    const stepName = data.stepName as string | undefined;
+    const workflowName = data.workflowName as string | undefined;
+    return (
+      (stepName ? parseStepName(stepName)?.shortName : undefined) ??
+      (workflowName ? parseWorkflowName(workflowName)?.shortName : undefined) ??
+      stepName ??
+      workflowName ??
+      (data.hookId as string) ??
+      'Details'
+    );
+  }, [selectedSpan?.data]);
+
+  const selectedResource = selectedSpan?.resource as string | undefined;
+  const selectedResourceId = useMemo(() => {
+    if (!selectedSpan?.data) return undefined;
+    const data = selectedSpan.data as Record<string, unknown>;
+    return (
+      (data.stepId as string) ??
+      (data.runId as string) ??
+      (data.hookId as string) ??
+      selectedSpan.spanId
+    );
+  }, [selectedSpan?.data, selectedSpan?.spanId]);
+
+  return (
+    <div
+      data-pane="pane-root"
+      data-has-detail={activeSpan ? '' : undefined}
+      className="grid w-full h-full max-h-full grid-cols-[minmax(100px,1fr)] data-[has-detail]:grid-cols-[minmax(100px,1fr)_clamp(280px,420px,100%)]"
+    >
+      <div
+        id="trace-parent"
+        className="grid grid-rows-[1fr] h-full min-h-0 overflow-hidden relative bg-background-100"
+      >
+        <SplitPane
+          startHeader={
+            <div className="bg-background-100 border-b border-gray-alpha-400 h-10 min-h-10 flex items-center px-2 gap-1.5">
+              <Search className="w-3.5 h-3.5 shrink-0 text-gray-800" />
+              <input
+                id="trace-viewer-search"
+                name="trace-viewer-search"
+                type="text"
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                placeholder="Search spans..."
+                aria-label="Search spans"
+                className="flex-1 min-w-0 bg-transparent text-sm text-gray-1000 placeholder:text-gray-800 outline-none"
+              />
+              {searchQuery && (
+                <button
+                  type="button"
+                  onClick={() => setSearchQuery('')}
+                  className="shrink-0 p-0.5 rounded-sm text-gray-800 hover:text-gray-1000 hover:bg-gray-200 transition-colors"
+                >
+                  <X className="w-3 h-3" />
+                </button>
+              )}
+            </div>
+          }
+          endHeader={
+            <TimelineHeader
+              viewStart={viewport.start}
+              viewDuration={viewDuration}
+              rootStart={root.startTime}
+              compression={compression}
+              isZoomed={isZoomed}
+              onResetZoom={resetZoom}
+              hoverInfo={hoverInfo}
+            />
+          }
+        >
+          <div className="block overflow-visible">
+            <EventList
+              spans={filteredSpans}
+              activeSpanId={activeSpanId}
+              onSelectSpan={handleSelectSpan}
+            />
+          </div>
+          <div
+            ref={timelineRef}
+            className="block min-h-0 overflow-visible relative px-2"
+            onDoubleClick={resetZoom}
+            onMouseMove={handleTimelineMouseMove}
+            onMouseLeave={handleTimelineMouseLeave}
+          >
+            <Timeline
+              spans={filteredSpans}
+              compression={compression}
+              selectedId={activeSpanId}
+              onSelect={handleSelectSpan}
+              hoverFraction={hoverFraction}
+              altHeld={altHeld}
+            />
+          </div>
+        </SplitPane>
+      </div>
+
+      {/* Detail panel */}
+      {activeSpan && sidebar ? (
+        <aside className="flex flex-col h-full max-h-full bg-background-100 border-l border-gray-alpha-400 overflow-auto">
+          {/* Panel header */}
+          <div className="flex-shrink-0 px-4 pt-4 pb-3">
+            <div className="flex items-start justify-between gap-2">
+              <div className="min-w-0 flex-1">
+                <span className="text-[15px] font-semibold text-gray-1000 truncate block">
+                  {selectedSpanName}
+                </span>
+                {selectedResourceId && (
+                  <div className="mt-1 flex items-center gap-2">
+                    {selectedResource && (
+                      <span
+                        className={`inline-flex items-center rounded-md px-1.5 py-0.5 text-[11px] font-medium leading-none shrink-0 ${
+                          selectedResource === 'step'
+                            ? 'bg-green-200 text-green-900'
+                            : selectedResource === 'run'
+                              ? 'bg-blue-200 text-blue-900'
+                              : selectedResource === 'hook'
+                                ? 'bg-yellow-200 text-yellow-900'
+                                : 'bg-gray-200 text-gray-900'
+                        }`}
+                      >
+                        {selectedResource.charAt(0).toUpperCase() +
+                          selectedResource.slice(1)}
+                      </span>
+                    )}
+                    <div
+                      className="flex items-center gap-1 text-[13px] font-mono text-gray-700 min-w-0"
+                      title={selectedResourceId}
+                    >
+                      <span className="truncate">{selectedResourceId}</span>
+                      <CopyButton
+                        copyText={selectedResourceId}
+                        ariaLabel="Copy ID"
+                        className="shrink-0"
+                      />
+                    </div>
+                  </div>
+                )}
+              </div>
+              <button
+                type="button"
+                className="p-1 rounded-md text-gray-900 hover:text-gray-1000 hover:bg-gray-alpha-200 transition-colors shrink-0"
+                onClick={clearActiveSpan}
+              >
+                <X className="w-4 h-4" />
+              </button>
+            </div>
+          </div>
+          {/* Panel body */}
+          <div className="flex-1 overflow-y-auto">
+            <ErrorBoundary>
+              <EntityDetailPanel
+                run={sidebar.run}
+                onStreamClick={sidebar.onStreamClick}
+                onRunClick={sidebar.onRunClick}
+                spanDetailData={sidebar.spanDetailData}
+                spanDetailError={sidebar.spanDetailError}
+                spanDetailLoading={sidebar.spanDetailLoading}
+                onSpanSelect={sidebar.onSpanSelect}
+                onWakeUpSleep={sidebar.onWakeUpSleep}
+                onLoadEventData={sidebar.onLoadEventData}
+                onResolveHook={sidebar.onResolveHook}
+                encryptionKey={sidebar.encryptionKey}
+                onDecrypt={sidebar.onDecrypt}
+                isDecrypting={sidebar.isDecrypting}
+                selectedSpan={selectedSpan}
+              />
+            </ErrorBoundary>
+          </div>
+        </aside>
+      ) : activeSpan ? (
+        <DetailPanel
+          span={activeSpan}
+          rootStart={root.startTime}
+          onClose={clearActiveSpan}
+        />
+      ) : null}
+    </div>
+  );
+}