@kopai/ui 0.7.0 → 0.9.0

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

@@ -0,0 +1,260 @@
+/**
+ * Minimap - Compressed overview of all spans with a draggable viewport.
+ */
+
+import { useRef, useCallback, useMemo, useEffect } from "react";
+import type { ParsedTrace } from "../types.js";
+import { getSpanBarColor } from "../utils/colors.js";
+import { flattenAllSpans } from "../utils/flatten-tree.js";
+
+export interface MinimapProps {
+  trace: ParsedTrace;
+  viewStart: number; // 0-1 fraction
+  viewEnd: number; // 0-1 fraction
+  onViewChange: (viewStart: number, viewEnd: number) => void;
+}
+
+const MINIMAP_HEIGHT = 40;
+const SPAN_HEIGHT = 2;
+const SPAN_GAP = 1;
+const MIN_VIEWPORT_WIDTH = 0.02;
+const HANDLE_WIDTH = 6;
+
+type DragMode = "pan" | "resize-left" | "resize-right" | null;
+
+export function Minimap({
+  trace,
+  viewStart,
+  viewEnd,
+  onViewChange,
+}: MinimapProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const dragRef = useRef<{
+    mode: DragMode;
+    startX: number;
+    origViewStart: number;
+    origViewEnd: number;
+  } | null>(null);
+  const cleanupRef = useRef<(() => void) | null>(null);
+
+  useEffect(() => {
+    return () => {
+      cleanupRef.current?.();
+    };
+  }, []);
+
+  const allSpans = useMemo(
+    () => flattenAllSpans(trace.rootSpans),
+    [trace.rootSpans]
+  );
+
+  const traceDuration = trace.maxTimeMs - trace.minTimeMs;
+
+  const getFraction = useCallback((clientX: number): number => {
+    const el = containerRef.current;
+    if (!el) return 0;
+    const rect = el.getBoundingClientRect();
+    if (!rect.width) return 0;
+    return Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
+  }, []);
+
+  const clampView = useCallback(
+    (start: number, end: number): [number, number] => {
+      let s = Math.max(0, Math.min(1 - MIN_VIEWPORT_WIDTH, start));
+      let e = Math.max(s + MIN_VIEWPORT_WIDTH, Math.min(1, end));
+      if (e > 1) {
+        e = 1;
+        s = Math.max(0, e - Math.max(MIN_VIEWPORT_WIDTH, end - start));
+      }
+      return [s, e];
+    },
+    []
+  );
+
+  const handleMouseDown = useCallback(
+    (e: React.MouseEvent, mode: DragMode) => {
+      e.preventDefault();
+      e.stopPropagation();
+      cleanupRef.current?.();
+      dragRef.current = {
+        mode,
+        startX: e.clientX,
+        origViewStart: viewStart,
+        origViewEnd: viewEnd,
+      };
+
+      const handleMouseMove = (ev: MouseEvent) => {
+        const drag = dragRef.current;
+        if (!drag || !containerRef.current) return;
+
+        const rect = containerRef.current.getBoundingClientRect();
+        if (!rect.width) return;
+        const deltaFrac = (ev.clientX - drag.startX) / rect.width;
+
+        let newStart: number;
+        let newEnd: number;
+
+        if (drag.mode === "pan") {
+          const width = drag.origViewEnd - drag.origViewStart;
+          newStart = drag.origViewStart + deltaFrac;
+          newEnd = newStart + width;
+          if (newStart < 0) {
+            newStart = 0;
+            newEnd = width;
+          }
+          if (newEnd > 1) {
+            newEnd = 1;
+            newStart = 1 - width;
+          }
+        } else if (drag.mode === "resize-left") {
+          newStart = drag.origViewStart + deltaFrac;
+          newEnd = drag.origViewEnd;
+        } else {
+          newStart = drag.origViewStart;
+          newEnd = drag.origViewEnd + deltaFrac;
+        }
+
+        const [s, e] = clampView(newStart, newEnd);
+        onViewChange(s, e);
+      };
+
+      const handleMouseUp = () => {
+        dragRef.current = null;
+        cleanupRef.current = null;
+        window.removeEventListener("mousemove", handleMouseMove);
+        window.removeEventListener("mouseup", handleMouseUp);
+      };
+
+      window.addEventListener("mousemove", handleMouseMove);
+      window.addEventListener("mouseup", handleMouseUp);
+      cleanupRef.current = handleMouseUp;
+    },
+    [viewStart, viewEnd, onViewChange, clampView]
+  );
+
+  const handleBackgroundClick = useCallback(
+    (e: React.MouseEvent) => {
+      if (dragRef.current) return;
+      if (e.target !== e.currentTarget) return;
+      const frac = getFraction(e.clientX);
+      const width = viewEnd - viewStart;
+      const half = width / 2;
+      const [s, eVal] = clampView(frac - half, frac + half);
+      onViewChange(s, eVal);
+    },
+    [viewStart, viewEnd, onViewChange, getFraction, clampView]
+  );
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      const step = 0.05;
+      const width = viewEnd - viewStart;
+      let newStart: number;
+      if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
+        newStart = viewStart - step;
+      } else if (e.key === "ArrowRight" || e.key === "ArrowDown") {
+        newStart = viewStart + step;
+      } else {
+        return;
+      }
+      e.preventDefault();
+      const [s, eVal] = clampView(newStart, newStart + width);
+      onViewChange(s, eVal);
+    },
+    [viewStart, viewEnd, onViewChange, clampView]
+  );
+
+  const viewStartPct = viewStart * 100;
+  const viewEndPct = viewEnd * 100;
+  const viewWidthPct = viewEndPct - viewStartPct;
+
+  // Calculate span row height to fit within minimap
+  const totalRows = allSpans.length;
+  const availableHeight = MINIMAP_HEIGHT - 4; // 2px padding top/bottom
+  const rowHeight =
+    totalRows > 0
+      ? Math.min(SPAN_HEIGHT + SPAN_GAP, availableHeight / totalRows)
+      : SPAN_HEIGHT;
+
+  return (
+    <div
+      ref={containerRef}
+      className="relative w-full border-b border-border bg-muted/30 select-none"
+      style={{ height: MINIMAP_HEIGHT }}
+      onClick={handleBackgroundClick}
+      onKeyDown={handleKeyDown}
+      role="slider"
+      tabIndex={0}
+      aria-label="Trace minimap viewport"
+      aria-valuemin={0}
+      aria-valuemax={100}
+      aria-valuenow={Math.round(viewStartPct)}
+    >
+      {/* Span bars */}
+      {traceDuration > 0 &&
+        allSpans.map(({ span }, i) => {
+          const left =
+            ((span.startTimeUnixMs - trace.minTimeMs) / traceDuration) * 100;
+          const width = Math.max(0.2, (span.durationMs / traceDuration) * 100);
+          const color = getSpanBarColor(
+            span.serviceName,
+            span.status === "ERROR"
+          );
+          return (
+            <div
+              key={span.spanId}
+              className="absolute pointer-events-none"
+              style={{
+                left: `${left}%`,
+                width: `${width}%`,
+                top: 2 + i * rowHeight,
+                height: Math.max(1, rowHeight - SPAN_GAP),
+                backgroundColor: color,
+                opacity: 0.8,
+                borderRadius: 1,
+              }}
+            />
+          );
+        })}
+
+      {/* Left overlay (outside viewport) */}
+      {viewStartPct > 0 && (
+        <div
+          className="absolute top-0 left-0 h-full bg-black/30 pointer-events-none"
+          style={{ width: `${viewStartPct}%` }}
+        />
+      )}
+
+      {/* Right overlay (outside viewport) */}
+      {viewEndPct < 100 && (
+        <div
+          className="absolute top-0 h-full bg-black/30 pointer-events-none"
+          style={{ left: `${viewEndPct}%`, right: 0 }}
+        />
+      )}
+
+      {/* Viewport rectangle */}
+      <div
+        className="absolute top-0 h-full border border-blue-500/50 bg-blue-500/10 cursor-grab active:cursor-grabbing"
+        style={{
+          left: `${viewStartPct}%`,
+          width: `${viewWidthPct}%`,
+        }}
+        onMouseDown={(e) => handleMouseDown(e, "pan")}
+      >
+        {/* Left resize handle */}
+        <div
+          className="absolute top-0 left-0 h-full cursor-ew-resize z-10"
+          style={{ width: HANDLE_WIDTH, marginLeft: -HANDLE_WIDTH / 2 }}
+          onMouseDown={(e) => handleMouseDown(e, "resize-left")}
+        />
+        {/* Right resize handle */}
+        <div
+          className="absolute top-0 right-0 h-full cursor-ew-resize z-10"
+          style={{ width: HANDLE_WIDTH, marginRight: -HANDLE_WIDTH / 2 }}
+          onMouseDown={(e) => handleMouseDown(e, "resize-right")}
+        />
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,184 @@
+import { useState, useCallback } from "react";
+import type { SpanNode } from "../types.js";
+import { formatDuration, formatRelativeTime } from "../utils/time.js";
+import { formatAttributeValue } from "../utils/attributes.js";
+import { getServiceColor } from "../utils/colors.js";
+
+interface SpanDetailInlineProps {
+  span: SpanNode;
+  traceStartMs: number;
+}
+
+interface CollapsibleSectionProps {
+  title: string;
+  count: number;
+  children: React.ReactNode;
+}
+
+function CollapsibleSection({
+  title,
+  count,
+  children,
+}: CollapsibleSectionProps) {
+  const [open, setOpen] = useState(false);
+
+  if (count === 0) return null;
+
+  return (
+    <div>
+      <button
+        className="flex items-center gap-1 text-xs font-medium text-foreground hover:text-blue-600 dark:hover:text-blue-400 py-1"
+        onClick={(e) => {
+          e.stopPropagation();
+          setOpen((p) => !p);
+        }}
+      >
+        <span className="w-3 text-center">{open ? "▾" : "▸"}</span>
+        {title}
+        <span className="text-muted-foreground">({count})</span>
+      </button>
+      {open && <div className="ml-4 mt-1 space-y-1">{children}</div>}
+    </div>
+  );
+}
+
+function KeyValueRow({ k, v }: { k: string; v: unknown }) {
+  const formatted = formatAttributeValue(v);
+  return (
+    <div className="flex gap-2 text-xs font-mono py-0.5">
+      <span className="text-muted-foreground flex-shrink-0">{k}</span>
+      <span className="text-foreground">=</span>
+      <span className="text-foreground break-all">{formatted}</span>
+    </div>
+  );
+}
+
+export function SpanDetailInline({
+  span,
+  traceStartMs,
+}: SpanDetailInlineProps) {
+  const [copiedId, setCopiedId] = useState(false);
+  const serviceColor = getServiceColor(span.serviceName);
+  const relativeStartMs = span.startTimeUnixMs - traceStartMs;
+
+  const handleCopy = useCallback(async () => {
+    try {
+      await navigator.clipboard.writeText(span.spanId);
+      setCopiedId(true);
+      setTimeout(() => setCopiedId(false), 2000);
+    } catch {
+      /* clipboard unavailable */
+    }
+  }, [span.spanId]);
+
+  const spanAttrs = Object.entries(span.attributes).sort(([a], [b]) =>
+    a.localeCompare(b)
+  );
+  const resourceAttrs = Object.entries(span.resourceAttributes).sort(
+    ([a], [b]) => a.localeCompare(b)
+  );
+
+  return (
+    <div
+      className="border-b border-border bg-muted/50 px-4 py-3"
+      style={{ borderLeft: `3px solid ${serviceColor}` }}
+      onClick={(e) => e.stopPropagation()}
+    >
+      {/* Header */}
+      <div className="mb-2">
+        <div className="text-sm font-medium text-foreground">{span.name}</div>
+        <div className="flex flex-wrap gap-x-4 gap-y-1 text-xs text-muted-foreground mt-1">
+          <span>
+            Service: <span className="text-foreground">{span.serviceName}</span>
+          </span>
+          <span>
+            Duration:{" "}
+            <span className="text-foreground">
+              {formatDuration(span.durationMs)}
+            </span>
+          </span>
+          <span>
+            Start:{" "}
+            <span className="text-foreground">
+              {formatDuration(relativeStartMs)}
+            </span>
+          </span>
+          <span>
+            Kind: <span className="text-foreground">{span.kind}</span>
+          </span>
+          {span.status !== "UNSET" && (
+            <span>
+              Status:{" "}
+              <span
+                className={
+                  span.status === "ERROR" ? "text-red-500" : "text-foreground"
+                }
+              >
+                {span.status}
+              </span>
+            </span>
+          )}
+        </div>
+      </div>
+
+      {/* Collapsible sections */}
+      <div className="space-y-1">
+        <CollapsibleSection title="Tags" count={spanAttrs.length}>
+          {spanAttrs.map(([k, v]) => (
+            <KeyValueRow key={k} k={k} v={v} />
+          ))}
+        </CollapsibleSection>
+
+        <CollapsibleSection title="Process" count={resourceAttrs.length}>
+          {resourceAttrs.map(([k, v]) => (
+            <KeyValueRow key={k} k={k} v={v} />
+          ))}
+        </CollapsibleSection>
+
+        <CollapsibleSection title="Events" count={span.events.length}>
+          {span.events.map((event, i) => (
+            <div
+              key={i}
+              className="text-xs border-l-2 border-border pl-2 py-1.5 space-y-0.5"
+            >
+              <div className="flex items-center gap-2">
+                <span className="font-mono text-muted-foreground flex-shrink-0">
+                  {formatRelativeTime(event.timeUnixMs, span.startTimeUnixMs)}
+                </span>
+                <span className="font-medium text-foreground">
+                  {event.name}
+                </span>
+              </div>
+              {Object.entries(event.attributes).map(([k, v]) => (
+                <KeyValueRow key={k} k={k} v={v} />
+              ))}
+            </div>
+          ))}
+        </CollapsibleSection>
+
+        <CollapsibleSection title="Links" count={span.links.length}>
+          {span.links.map((link, i) => (
+            <div key={i} className="text-xs font-mono py-0.5">
+              <span className="text-muted-foreground">trace:</span>{" "}
+              {link.traceId}{" "}
+              <span className="text-muted-foreground">span:</span> {link.spanId}
+            </div>
+          ))}
+        </CollapsibleSection>
+      </div>
+
+      {/* SpanID + copy */}
+      <div className="flex items-center justify-end gap-2 mt-2 pt-2 border-t border-border">
+        <span className="text-xs text-muted-foreground">SpanID:</span>
+        <code className="text-xs font-mono text-foreground">{span.spanId}</code>
+        <button
+          onClick={handleCopy}
+          className="text-xs text-muted-foreground hover:text-foreground"
+          aria-label="Copy span ID"
+        >
+          {copiedId ? "✓" : "Copy"}
+        </button>
+      </div>
+    </div>
+  );
+}

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

@@ -2,6 +2,8 @@ import { memo } from "react";
 import type { SpanNode } from "../types.js";
 import { TimelineBar } from "./TimelineBar.js";
 import { formatDuration } from "../utils/time.js";
+import { getServiceColor } from "../utils/colors.js";
+import { spanMatchesSearch } from "../utils/flatten-tree.js";
 
 export interface SpanRowProps {
   span: SpanNode;
@@ -16,22 +18,7 @@ export interface SpanRowProps {
   onToggleCollapse: () => void;
   onMouseEnter?: () => void;
   onMouseLeave?: () => void;
-}
-
-function getHttpContext(span: SpanNode): string | null {
-  const attrs = span.attributes;
-  const method = attrs["http.method"];
-  const url = attrs["http.url"] || attrs["http.target"];
-  const statusCode = attrs["http.status_code"];
-
-  if (!method && !url) return null;
-
-  const parts: string[] = [];
-  if (method) parts.push(String(method));
-  if (url) parts.push(String(url));
-  if (statusCode) parts.push(`[${statusCode}]`);
-
-  return parts.join(" ");
+  uiFind?: string;
 }
 
 export const SpanRow = memo(function SpanRow({
@@ -46,10 +33,12 @@ export const SpanRow = memo(function SpanRow({
   onToggleCollapse,
   onMouseEnter,
   onMouseLeave,
+  uiFind,
 }: SpanRowProps) {
   const hasChildren = span.children.length > 0;
   const isError = span.status === "ERROR";
-  const httpContext = getHttpContext(span);
+  const serviceColor = getServiceColor(span.serviceName);
+  const isDimmed = uiFind ? !spanMatchesSearch(span, uiFind) : false;
 
   return (
     <div
@@ -58,6 +47,10 @@ export const SpanRow = memo(function SpanRow({
           ? "bg-blue-100 dark:bg-blue-900/30 hover:bg-blue-100 dark:hover:bg-blue-900/30"
           : ""
       }`}
+      style={{
+        borderLeft: `3px solid ${serviceColor}`,
+        opacity: isDimmed ? 0.4 : 1,
+      }}
       onClick={onClick}
       onMouseEnter={onMouseEnter}
       onMouseLeave={onMouseLeave}
@@ -135,7 +128,10 @@ export const SpanRow = memo(function SpanRow({
           </svg>
         )}
 
-        <span className="text-xs text-muted-foreground flex-shrink-0 mr-2">
+        <span
+          className="text-xs flex-shrink-0 mr-2 font-medium"
+          style={{ color: serviceColor }}
+        >
           {span.serviceName}
         </span>
 
@@ -149,12 +145,6 @@ export const SpanRow = memo(function SpanRow({
           </span>
         )}
 
-        {httpContext && (
-          <span className="text-xs text-muted-foreground truncate ml-2 flex-shrink-0 max-w-xs">
-            {httpContext}
-          </span>
-        )}
-
         <span className="text-xs text-muted-foreground flex-shrink-0 ml-2">
           {formatDuration(span.durationMs)}
         </span>

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

@@ -0,0 +1,76 @@
+export interface SpanSearchProps {
+  value: string;
+  onChange: (value: string) => void;
+  matchCount: number;
+  currentMatch: number;
+  onPrev: () => void;
+  onNext: () => void;
+}
+
+export function SpanSearch({
+  value,
+  onChange,
+  matchCount,
+  currentMatch,
+  onPrev,
+  onNext,
+}: SpanSearchProps) {
+  return (
+    <div className="flex items-center gap-1 px-2 py-1 border-b border-border bg-background">
+      <input
+        type="text"
+        placeholder="Find..."
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        className="bg-muted text-foreground text-sm px-2 py-0.5 rounded border border-border outline-none focus:border-blue-500 w-48"
+      />
+      {value && (
+        <>
+          <span className="text-xs text-muted-foreground whitespace-nowrap">
+            {matchCount > 0 ? `${currentMatch + 1}/${matchCount}` : "0 matches"}
+          </span>
+          <button
+            onClick={onPrev}
+            disabled={matchCount === 0}
+            className="p-0.5 text-muted-foreground hover:text-foreground disabled:opacity-30"
+            aria-label="Previous match"
+          >
+            <svg
+              className="w-3.5 h-3.5"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M5 15l7-7 7 7"
+              />
+            </svg>
+          </button>
+          <button
+            onClick={onNext}
+            disabled={matchCount === 0}
+            className="p-0.5 text-muted-foreground hover:text-foreground disabled:opacity-30"
+            aria-label="Next match"
+          >
+            <svg
+              className="w-3.5 h-3.5"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M19 9l-7 7-7-7"
+              />
+            </svg>
+          </button>
+        </>
+      )}
+    </div>
+  );
+}