@kopai/ui 0.8.0 → 0.9.0

package/src/components/observability/TraceTimeline/index.tsx

@@ -4,11 +4,14 @@
  */
 
 import { useMemo, useState, useRef, useEffect, useCallback } from "react";
-import { useVirtualizer } from "@tanstack/react-virtual";
 import type { denormalizedSignals } from "@kopai/core";
 type OtelTracesRow = denormalizedSignals.OtelTracesRow;
 import type { SpanNode, ParsedTrace } from "../types.js";
-import { flattenTree, getAllSpanIds } from "../utils/flatten-tree.js";
+import {
+  flattenTree,
+  getAllSpanIds,
+  spanMatchesSearch,
+} from "../utils/flatten-tree.js";
 import {
   calculateRelativeTime,
   calculateRelativeDuration,
@@ -16,17 +19,32 @@ import {
 } from "../utils/time.js";
 import { TraceHeader } from "./TraceHeader.js";
 import { SpanRow } from "./SpanRow.js";
-import { DetailPane } from "./DetailPane/index.js";
+import { SpanDetailInline } from "./SpanDetailInline.js";
 import { LoadingSkeleton } from "../shared/LoadingSkeleton.js";
 import { useRegisterShortcuts } from "../../KeyboardShortcuts/index.js";
 import { TRACE_VIEWER_SHORTCUTS } from "./shortcuts.js";
+import { TimeRuler } from "./TimeRuler.js";
+import { SpanSearch } from "./SpanSearch.js";
+import { ViewTabs, type ViewName } from "./ViewTabs.js";
+import { GraphView } from "./GraphView.js";
+import { StatisticsView } from "./StatisticsView.js";
+import { FlamegraphView } from "./FlamegraphView.js";
+import { Minimap } from "./Minimap.js";
 
 export interface TraceTimelineProps {
   rows: OtelTracesRow[];
   onSpanClick?: (span: SpanNode) => void;
+  onSpanDeselect?: () => void;
   selectedSpanId?: string;
   isLoading?: boolean;
   error?: Error;
+  view?: ViewName;
+  onViewChange?: (view: ViewName) => void;
+  uiFind?: string;
+  onUiFindChange?: (value: string) => void;
+  viewStart?: number;
+  viewEnd?: number;
+  onViewRangeChange?: (viewStart: number, viewEnd: number) => void;
 }
 
 /** Transform OtelTracesRow[] to ParsedTrace */
@@ -150,12 +168,30 @@ function isSpanAncestorOf(
   return false;
 }
 
+function collectServices(rootSpans: SpanNode[]): string[] {
+  const set = new Set<string>();
+  function walk(span: SpanNode) {
+    set.add(span.serviceName);
+    span.children.forEach(walk);
+  }
+  rootSpans.forEach(walk);
+  return Array.from(set).sort();
+}
+
 export function TraceTimeline({
   rows,
   onSpanClick,
+  onSpanDeselect,
   selectedSpanId: externalSelectedSpanId,
   isLoading,
   error,
+  view: externalView,
+  onViewChange,
+  uiFind: externalUiFind,
+  onUiFindChange,
+  viewStart: externalViewStart,
+  viewEnd: externalViewEnd,
+  onViewRangeChange,
 }: TraceTimelineProps) {
   useRegisterShortcuts("trace-viewer", TRACE_VIEWER_SHORTCUTS);
 
@@ -164,23 +200,39 @@ export function TraceTimeline({
     string | null
   >(null);
   const [hoveredSpanId, setHoveredSpanId] = useState<string | null>(null);
+  const [internalView, setInternalView] = useState<ViewName>("timeline");
+  const [internalUiFind, setInternalUiFind] = useState("");
+  const [currentMatchIndex, setCurrentMatchIndex] = useState(0);
+  const [headerCollapsed, setHeaderCollapsed] = useState(false);
+  const [internalViewStart, setInternalViewStart] = useState(0);
+  const [internalViewEnd, setInternalViewEnd] = useState(1);
+
   const selectedSpanId = externalSelectedSpanId ?? internalSelectedSpanId;
+  const viewStart = externalViewStart ?? internalViewStart;
+  const viewEnd = externalViewEnd ?? internalViewEnd;
+  const activeView = externalView ?? internalView;
+  const uiFind = externalUiFind ?? internalUiFind;
   const scrollRef = useRef<HTMLDivElement>(null);
   const announcementRef = useRef<HTMLDivElement>(null);
 
   const parsedTrace = useMemo(() => buildTrace(rows), [rows]);
 
+  const services = useMemo(
+    () => (parsedTrace ? collectServices(parsedTrace.rootSpans) : []),
+    [parsedTrace]
+  );
+
   const flattenedSpans = useMemo(() => {
     if (!parsedTrace) return [];
     return flattenTree(parsedTrace.rootSpans, collapsedIds);
   }, [parsedTrace, collapsedIds]);
 
-  const virtualizer = useVirtualizer({
-    count: flattenedSpans.length,
-    getScrollElement: () => scrollRef.current,
-    estimateSize: () => 32,
-    overscan: 5,
-  });
+  const matchingIndices = useMemo(() => {
+    if (!uiFind) return [];
+    return flattenedSpans
+      .map((item, idx) => (spanMatchesSearch(item.span, uiFind) ? idx : -1))
+      .filter((idx) => idx !== -1);
+  }, [flattenedSpans, uiFind]);
 
   const handleToggleCollapse = (spanId: string) => {
     setCollapsedIds((prev) => {
@@ -191,15 +243,25 @@ export function TraceTimeline({
     });
   };
 
+  const handleDeselect = useCallback(() => {
+    setInternalSelectedSpanId(null);
+    onSpanDeselect?.();
+  }, [onSpanDeselect]);
+
   const handleSpanClick = useCallback(
     (span: SpanNode) => {
-      setInternalSelectedSpanId(span.spanId);
-      onSpanClick?.(span);
-      if (announcementRef.current) {
-        announcementRef.current.textContent = `Selected span: ${span.name}, duration: ${formatDuration(span.durationMs)}`;
+      const isAlreadySelected = selectedSpanId === span.spanId;
+      if (isAlreadySelected) {
+        handleDeselect();
+      } else {
+        setInternalSelectedSpanId(span.spanId);
+        onSpanClick?.(span);
+        if (announcementRef.current) {
+          announcementRef.current.textContent = `Selected span: ${span.name}, duration: ${formatDuration(span.durationMs)}`;
+        }
       }
     },
-    [onSpanClick]
+    [onSpanClick, selectedSpanId, handleDeselect]
   );
 
   const handleExpandAll = useCallback(() => {
@@ -259,25 +321,94 @@ export function TraceTimeline({
     [selectedSpanId, flattenedSpans]
   );
 
-  const handleDeselect = useCallback(() => {
-    setInternalSelectedSpanId(null);
+  const handleViewChange = useCallback(
+    (view: ViewName) => {
+      if (onViewChange) onViewChange(view);
+      else setInternalView(view);
+    },
+    [onViewChange]
+  );
+
+  const handleUiFindChange = useCallback(
+    (value: string) => {
+      if (onUiFindChange) onUiFindChange(value);
+      else setInternalUiFind(value);
+      setCurrentMatchIndex(0);
+    },
+    [onUiFindChange]
+  );
+
+  const handleViewRangeChange = useCallback(
+    (start: number, end: number) => {
+      if (onViewRangeChange) onViewRangeChange(start, end);
+      else {
+        setInternalViewStart(start);
+        setInternalViewEnd(end);
+      }
+    },
+    [onViewRangeChange]
+  );
+
+  const scrollToSpan = useCallback((spanId: string) => {
+    const el = scrollRef.current?.querySelector(`[data-span-id="${spanId}"]`);
+    el?.scrollIntoView({ block: "center", behavior: "smooth" });
   }, []);
 
+  const handleSearchNext = useCallback(() => {
+    if (matchingIndices.length === 0) return;
+    const next = (currentMatchIndex + 1) % matchingIndices.length;
+    setCurrentMatchIndex(next);
+    const idx = matchingIndices[next];
+    if (idx !== undefined) {
+      const item = flattenedSpans[idx];
+      if (item) {
+        handleSpanClick(item.span);
+        scrollToSpan(item.span.spanId);
+      }
+    }
+  }, [
+    matchingIndices,
+    currentMatchIndex,
+    flattenedSpans,
+    handleSpanClick,
+    scrollToSpan,
+  ]);
+
+  const handleSearchPrev = useCallback(() => {
+    if (matchingIndices.length === 0) return;
+    const prev =
+      (currentMatchIndex - 1 + matchingIndices.length) % matchingIndices.length;
+    setCurrentMatchIndex(prev);
+    const idx = matchingIndices[prev];
+    if (idx !== undefined) {
+      const item = flattenedSpans[idx];
+      if (item) {
+        handleSpanClick(item.span);
+        scrollToSpan(item.span.spanId);
+      }
+    }
+  }, [
+    matchingIndices,
+    currentMatchIndex,
+    flattenedSpans,
+    handleSpanClick,
+    scrollToSpan,
+  ]);
+
   useEffect(() => {
     if (!selectedSpanId) return;
-    const selectedIndex = flattenedSpans.findIndex(
-      (item) => item.span.spanId === selectedSpanId
-    );
-    if (selectedIndex !== -1) {
-      virtualizer.scrollToIndex(selectedIndex, {
-        align: "center",
-        behavior: "smooth",
-      });
-    }
-  }, [selectedSpanId, flattenedSpans, virtualizer]);
+    scrollToSpan(selectedSpanId);
+  }, [selectedSpanId, scrollToSpan]);
 
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
+      // Escape always deselects when a span is selected
+      if (e.key === "Escape" && selectedSpanId) {
+        e.preventDefault();
+        handleDeselect();
+        return;
+      }
+
       const timelineElement = scrollRef.current?.parentElement;
       if (!timelineElement?.contains(document.activeElement)) return;
 
@@ -303,8 +434,7 @@ export function TraceTimeline({
           handleCollapseExpand(false);
           break;
         case "Escape":
-          e.preventDefault();
-          handleDeselect();
+          // handled above, before focus check
           break;
         case "Enter": {
           if (selectedSpanId) {
@@ -378,10 +508,6 @@ export function TraceTimeline({
   }
 
   const totalDurationMs = parsedTrace.maxTimeMs - parsedTrace.minTimeMs;
-  const selectedSpan =
-    selectedSpanId && flattenedSpans.length > 0
-      ? flattenedSpans.find((item) => item.span.spanId === selectedSpanId)?.span
-      : null;
 
   return (
     <div className="flex h-full bg-background">
@@ -393,86 +519,104 @@ export function TraceTimeline({
           aria-live="polite"
           aria-atomic="true"
         />
-        <TraceHeader trace={parsedTrace} />
-        <div
-          ref={scrollRef}
-          className="flex-1 overflow-auto outline-none"
-          role="tree"
-          aria-label="Trace timeline"
-          tabIndex={0}
-        >
-          <div
-            style={{
-              height: `${virtualizer.getTotalSize()}px`,
-              width: "100%",
-              position: "relative",
-            }}
-          >
-            {virtualizer.getVirtualItems().map((virtualItem) => {
-              const item = flattenedSpans[virtualItem.index];
-              if (!item) return null;
-
-              const { span, level } = item;
-              const isCollapsed = collapsedIds.has(span.spanId);
-              const isSelected = span.spanId === selectedSpanId;
-              const isHovered = span.spanId === hoveredSpanId;
-              const isParentOfHovered = hoveredSpanId
-                ? isSpanAncestorOf(span, hoveredSpanId, flattenedSpans)
-                : false;
-
-              const relativeStart = calculateRelativeTime(
-                span.startTimeUnixMs,
-                parsedTrace.minTimeMs,
-                parsedTrace.maxTimeMs
-              );
-              const relativeDuration = calculateRelativeDuration(
-                span.durationMs,
-                totalDurationMs
-              );
-
-              return (
-                <div
-                  key={span.spanId}
-                  style={{
-                    position: "absolute",
-                    top: 0,
-                    left: 0,
-                    width: "100%",
-                    height: `${virtualItem.size}px`,
-                    transform: `translateY(${virtualItem.start}px)`,
-                  }}
-                >
-                  <SpanRow
-                    span={span}
-                    level={level}
-                    isCollapsed={isCollapsed}
-                    isSelected={isSelected}
-                    isHovered={isHovered}
-                    isParentOfHovered={isParentOfHovered}
-                    relativeStart={relativeStart}
-                    relativeDuration={relativeDuration}
-                    onClick={() => handleSpanClick(span)}
-                    onToggleCollapse={() => handleToggleCollapse(span.spanId)}
-                    onMouseEnter={() => setHoveredSpanId(span.spanId)}
-                    onMouseLeave={() => setHoveredSpanId(null)}
-                  />
-                </div>
-              );
-            })}
-          </div>
-        </div>
-      </div>
+        <TraceHeader
+          trace={parsedTrace}
+          services={services}
+          onHeaderToggle={() => setHeaderCollapsed((p) => !p)}
+          isCollapsed={headerCollapsed}
+        />
+        <ViewTabs activeView={activeView} onChange={handleViewChange} />
+        <SpanSearch
+          value={uiFind}
+          onChange={handleUiFindChange}
+          matchCount={matchingIndices.length}
+          currentMatch={currentMatchIndex}
+          onPrev={handleSearchPrev}
+          onNext={handleSearchNext}
+        />
 
-      {selectedSpan && (
-        <div className="w-96 h-full flex-shrink-0">
-          <DetailPane
-            span={selectedSpan}
-            onClose={handleDeselect}
-            // TODO: wire up cross-trace navigation
-            onLinkClick={undefined}
+        {activeView === "graph" ? (
+          <GraphView trace={parsedTrace} />
+        ) : activeView === "statistics" ? (
+          <StatisticsView trace={parsedTrace} />
+        ) : activeView === "flamegraph" ? (
+          <FlamegraphView
+            trace={parsedTrace}
+            onSpanClick={handleSpanClick}
+            selectedSpanId={selectedSpanId ?? undefined}
           />
-        </div>
-      )}
+        ) : (
+          <>
+            <Minimap
+              trace={parsedTrace}
+              viewStart={viewStart}
+              viewEnd={viewEnd}
+              onViewChange={handleViewRangeChange}
+            />
+            <TimeRuler
+              totalDurationMs={totalDurationMs * (viewEnd - viewStart)}
+              leftColumnWidth="24rem"
+              offsetMs={totalDurationMs * viewStart}
+            />
+            <div
+              ref={scrollRef}
+              className="flex-1 overflow-auto outline-none"
+              role="tree"
+              aria-label="Trace timeline"
+              tabIndex={0}
+            >
+              {flattenedSpans.map((item) => {
+                const { span, level } = item;
+                const isCollapsed = collapsedIds.has(span.spanId);
+                const isSelected = span.spanId === selectedSpanId;
+                const isHovered = span.spanId === hoveredSpanId;
+                const isParentOfHovered = hoveredSpanId
+                  ? isSpanAncestorOf(span, hoveredSpanId, flattenedSpans)
+                  : false;
+
+                const viewRange = viewEnd - viewStart;
+                const relativeStart =
+                  (calculateRelativeTime(
+                    span.startTimeUnixMs,
+                    parsedTrace.minTimeMs,
+                    parsedTrace.maxTimeMs
+                  ) -
+                    viewStart) /
+                  viewRange;
+                const relativeDuration =
+                  calculateRelativeDuration(span.durationMs, totalDurationMs) /
+                  viewRange;
+
+                return (
+                  <div key={span.spanId} data-span-id={span.spanId}>
+                    <SpanRow
+                      span={span}
+                      level={level}
+                      isCollapsed={isCollapsed}
+                      isSelected={isSelected}
+                      isHovered={isHovered}
+                      isParentOfHovered={isParentOfHovered}
+                      relativeStart={relativeStart}
+                      relativeDuration={relativeDuration}
+                      onClick={() => handleSpanClick(span)}
+                      onToggleCollapse={() => handleToggleCollapse(span.spanId)}
+                      onMouseEnter={() => setHoveredSpanId(span.spanId)}
+                      onMouseLeave={() => setHoveredSpanId(null)}
+                      uiFind={uiFind || undefined}
+                    />
+                    {isSelected && (
+                      <SpanDetailInline
+                        span={span}
+                        traceStartMs={parsedTrace.minTimeMs}
+                      />
+                    )}
+                  </div>
+                );
+              })}
+            </div>
+          </>
+        )}
+      </div>
     </div>
   );
 }

package/src/components/observability/index.ts

@@ -12,6 +12,18 @@ export type {
   TraceSummary,
 } from "./TraceSearch/index.js";
 
+export { SearchForm } from "./TraceSearch/SearchForm.js";
+export type { SearchFormProps } from "./TraceSearch/SearchForm.js";
+
+export { ScatterPlot } from "./TraceSearch/ScatterPlot.js";
+export type { ScatterPlotProps } from "./TraceSearch/ScatterPlot.js";
+
+export { SortDropdown } from "./TraceSearch/SortDropdown.js";
+export type { SortDropdownProps } from "./TraceSearch/SortDropdown.js";
+
+export { DurationBar } from "./TraceSearch/DurationBar.js";
+export type { DurationBarProps } from "./TraceSearch/DurationBar.js";
+
 export { TraceDetail } from "./TraceDetail/index.js";
 export type { TraceDetailProps } from "./TraceDetail/index.js";
 
@@ -54,6 +66,9 @@ export type {
 export { DynamicDashboard } from "./DynamicDashboard/index.js";
 export type { DynamicDashboardProps } from "./DynamicDashboard/index.js";
 
+export { TraceComparison } from "./TraceComparison/index.js";
+export type { TraceComparisonProps } from "./TraceComparison/index.js";
+
 // Types
 export type {
   SpanNode,

package/src/components/observability/renderers/OtelTraceDetail.tsx

@@ -18,16 +18,13 @@ export function OtelTraceDetail(props: Props) {
 
   const response = props.data as { data?: OtelTracesRow[] } | null;
   const rows = response?.data ?? [];
-  const firstRow = rows[0];
-  const service = firstRow?.ServiceName ?? "unknown";
-  const traceId = firstRow?.TraceId ?? "";
+  const traceId = rows[0]?.TraceId ?? "";
 
   return (
     <TraceDetail
       rows={rows}
       isLoading={props.loading}
       error={props.error ?? undefined}
-      service={service}
       traceId={traceId}
       onBack={() => {}}
     />

package/src/components/observability/shared/TooltipEntryList.tsx

@@ -0,0 +1,25 @@
+import type { TooltipPayload } from "recharts";
+
+export function TooltipEntryList({
+  payload,
+  displayLabelMap,
+  formatValue,
+}: {
+  payload: TooltipPayload;
+  displayLabelMap: Map<string, string>;
+  formatValue: (v: number) => string;
+}) {
+  return payload.map((entry, i) => {
+    const dataKey = entry.dataKey;
+    const value = entry.value;
+    if (typeof dataKey !== "string" || typeof value !== "number") return null;
+    return (
+      <p key={i} className="text-sm" style={{ color: entry.color }}>
+        <span className="font-medium">
+          {displayLabelMap.get(dataKey) ?? dataKey}:
+        </span>{" "}
+        {formatValue(value)}
+      </p>
+    );
+  });
+}

package/src/components/observability/utils/flatten-tree.ts

@@ -40,6 +40,21 @@ export function getAllDescendantIds(span: SpanNode): string[] {
   return ids;
 }
 
+/** Flatten all spans (ignoring collapse state) with depth. */
+export function flattenAllSpans(rootSpans: SpanNode[]): FlattenedSpan[] {
+  return flattenTree(rootSpans, new Set());
+}
+
+export function spanMatchesSearch(span: SpanNode, query: string): boolean {
+  const q = query.toLowerCase();
+  if (span.name.toLowerCase().includes(q)) return true;
+  if (span.serviceName.toLowerCase().includes(q)) return true;
+  for (const val of Object.values(span.attributes)) {
+    if (String(val).toLowerCase().includes(q)) return true;
+  }
+  return false;
+}
+
 export function getAllSpanIds(rootSpans: SpanNode[]): string[] {
   const ids: string[] = [];
 

package/src/components/observability/utils/time.ts

@@ -27,6 +27,15 @@ export function formatTimestamp(timestampMs: number): string {
   });
 }
 
+export function formatRelativeTime(
+  eventTimeMs: number,
+  spanStartMs: number
+): string {
+  const relativeMs = eventTimeMs - spanStartMs;
+  const prefix = relativeMs < 0 ? "-" : "+";
+  return `${prefix}${formatDuration(Math.abs(relativeMs))}`;
+}
+
 export function calculateRelativeTime(
   timeMs: number,
   minTimeMs: number,

package/src/hooks/use-kopai-data.test.ts

@@ -19,6 +19,9 @@ const createMockClient = () => ({
   getTrace: vi.fn(),
   discoverMetrics: vi.fn(),
   getDashboard: vi.fn(),
+  getServices: vi.fn(),
+  getOperations: vi.fn(),
+  searchTraceSummariesPage: vi.fn(),
 });
 
 type MockClient = ReturnType<typeof createMockClient>;

package/src/hooks/use-kopai-data.ts

@@ -34,6 +34,17 @@ function fetchForDataSource(
       return client.getTrace(dataSource.params.traceId, { signal });
     case "discoverMetrics":
       return client.discoverMetrics({ signal });
+    case "getServices":
+      return client.getServices({ signal });
+    case "getOperations":
+      return client.getOperations(dataSource.params.serviceName, { signal });
+    case "searchTraceSummariesPage":
+      return client.searchTraceSummariesPage(
+        dataSource.params as Parameters<
+          typeof client.searchTraceSummariesPage
+        >[0],
+        { signal }
+      );
     default: {
       const exhaustiveCheck: never = dataSource;
       throw new Error(

package/src/hooks/use-live-logs.test.ts

@@ -22,6 +22,9 @@ const createMockClient = () => ({
   getTrace: vi.fn(),
   discoverMetrics: vi.fn(),
   getDashboard: vi.fn(),
+  getServices: vi.fn(),
+  getOperations: vi.fn(),
+  searchTraceSummariesPage: vi.fn(),
 });
 
 function wrapper(client: KopaiClient) {