@kopai/ui 0.8.0 → 0.9.0

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

@@ -0,0 +1,223 @@
+import { useMemo, useState } from "react";
+import type { ParsedTrace, SpanNode } from "../types.js";
+import { formatDuration } from "../utils/time.js";
+import { flattenAllSpans } from "../utils/flatten-tree.js";
+
+interface StatisticsViewProps {
+  trace: ParsedTrace;
+}
+
+interface SpanStats {
+  key: string;
+  serviceName: string;
+  spanName: string;
+  count: number;
+  totalDuration: number;
+  avgDuration: number;
+  minDuration: number;
+  maxDuration: number;
+  selfTimeTotal: number;
+  selfTimeAvg: number;
+  selfTimeMin: number;
+  selfTimeMax: number;
+}
+
+type SortField =
+  | "name"
+  | "count"
+  | "total"
+  | "avg"
+  | "min"
+  | "max"
+  | "selfTotal"
+  | "selfAvg"
+  | "selfMin"
+  | "selfMax";
+
+function computeSelfTime(span: SpanNode): number {
+  const childrenTotal = span.children.reduce(
+    (sum, child) => sum + child.durationMs,
+    0
+  );
+  return Math.max(0, span.durationMs - childrenTotal);
+}
+
+function computeStats(trace: ParsedTrace): SpanStats[] {
+  const allFlattened = flattenAllSpans(trace.rootSpans);
+  const groups = new Map<string, { spans: SpanNode[]; selfTimes: number[] }>();
+
+  for (const { span } of allFlattened) {
+    const key = `${span.serviceName}:${span.name}`;
+    let group = groups.get(key);
+    if (!group) {
+      group = { spans: [], selfTimes: [] };
+      groups.set(key, group);
+    }
+    group.spans.push(span);
+    group.selfTimes.push(computeSelfTime(span));
+  }
+
+  const stats: SpanStats[] = [];
+  for (const [key, { spans, selfTimes }] of groups) {
+    const durations = spans.map((s) => s.durationMs);
+    const count = spans.length;
+    const totalDuration = durations.reduce((a, b) => a + b, 0);
+    const selfTimeTotal = selfTimes.reduce((a, b) => a + b, 0);
+
+    const firstSpan = spans[0];
+    if (!firstSpan) continue;
+
+    stats.push({
+      key,
+      serviceName: firstSpan.serviceName,
+      spanName: firstSpan.name,
+      count,
+      totalDuration,
+      avgDuration: totalDuration / count,
+      minDuration: Math.min(...durations),
+      maxDuration: Math.max(...durations),
+      selfTimeTotal,
+      selfTimeAvg: selfTimeTotal / count,
+      selfTimeMin: Math.min(...selfTimes),
+      selfTimeMax: Math.max(...selfTimes),
+    });
+  }
+
+  return stats;
+}
+
+function getSortValue(stat: SpanStats, field: SortField): number | string {
+  switch (field) {
+    case "name":
+      return stat.key.toLowerCase();
+    case "count":
+      return stat.count;
+    case "total":
+      return stat.totalDuration;
+    case "avg":
+      return stat.avgDuration;
+    case "min":
+      return stat.minDuration;
+    case "max":
+      return stat.maxDuration;
+    case "selfTotal":
+      return stat.selfTimeTotal;
+    case "selfAvg":
+      return stat.selfTimeAvg;
+    case "selfMin":
+      return stat.selfTimeMin;
+    case "selfMax":
+      return stat.selfTimeMax;
+  }
+}
+
+const COLUMNS: { label: string; field: SortField }[] = [
+  { label: "Name", field: "name" },
+  { label: "Count", field: "count" },
+  { label: "Total", field: "total" },
+  { label: "Avg", field: "avg" },
+  { label: "Min", field: "min" },
+  { label: "Max", field: "max" },
+  { label: "ST Total", field: "selfTotal" },
+  { label: "ST Avg", field: "selfAvg" },
+  { label: "ST Min", field: "selfMin" },
+  { label: "ST Max", field: "selfMax" },
+];
+
+export function StatisticsView({ trace }: StatisticsViewProps) {
+  const [sortField, setSortField] = useState<SortField>("total");
+  const [sortAsc, setSortAsc] = useState(false);
+
+  const stats = useMemo(() => computeStats(trace), [trace]);
+
+  const sorted = useMemo(() => {
+    const copy = [...stats];
+    copy.sort((a, b) => {
+      const aVal = getSortValue(a, sortField);
+      const bVal = getSortValue(b, sortField);
+      let cmp: number;
+      if (typeof aVal === "string" && typeof bVal === "string") {
+        cmp = aVal.localeCompare(bVal);
+      } else if (typeof aVal === "number" && typeof bVal === "number") {
+        cmp = aVal - bVal;
+      } else {
+        cmp = 0;
+      }
+      return sortAsc ? cmp : -cmp;
+    });
+    return copy;
+  }, [stats, sortField, sortAsc]);
+
+  const handleSort = (field: SortField) => {
+    if (sortField === field) {
+      setSortAsc((p) => !p);
+    } else {
+      setSortField(field);
+      setSortAsc(false);
+    }
+  };
+
+  return (
+    <div className="flex-1 overflow-auto p-2">
+      <table className="w-full text-sm border-collapse">
+        <thead>
+          <tr className="border-b border-border">
+            {COLUMNS.map((col) => (
+              <th
+                key={col.field}
+                className="px-3 py-2 text-left text-xs font-medium text-muted-foreground cursor-pointer select-none hover:text-foreground whitespace-nowrap"
+                onClick={() => handleSort(col.field)}
+              >
+                {col.label}{" "}
+                {sortField === col.field ? (sortAsc ? "▲" : "▼") : ""}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {sorted.map((stat, i) => (
+            <tr
+              key={stat.key}
+              className={`border-b border-border/50 ${i % 2 === 0 ? "bg-background" : "bg-muted/30"}`}
+            >
+              <td className="px-3 py-1.5 text-foreground font-mono text-xs whitespace-nowrap">
+                <span className="text-muted-foreground">
+                  {stat.serviceName}
+                </span>
+                <span className="text-muted-foreground/50">:</span>{" "}
+                {stat.spanName}
+              </td>
+              <td className="px-3 py-1.5 text-foreground tabular-nums">
+                {stat.count}
+              </td>
+              <td className="px-3 py-1.5 text-foreground tabular-nums">
+                {formatDuration(stat.totalDuration)}
+              </td>
+              <td className="px-3 py-1.5 text-foreground tabular-nums">
+                {formatDuration(stat.avgDuration)}
+              </td>
+              <td className="px-3 py-1.5 text-foreground tabular-nums">
+                {formatDuration(stat.minDuration)}
+              </td>
+              <td className="px-3 py-1.5 text-foreground tabular-nums">
+                {formatDuration(stat.maxDuration)}
+              </td>
+              <td className="px-3 py-1.5 text-foreground tabular-nums">
+                {formatDuration(stat.selfTimeTotal)}
+              </td>
+              <td className="px-3 py-1.5 text-foreground tabular-nums">
+                {formatDuration(stat.selfTimeAvg)}
+              </td>
+              <td className="px-3 py-1.5 text-foreground tabular-nums">
+                {formatDuration(stat.selfTimeMin)}
+              </td>
+              <td className="px-3 py-1.5 text-foreground tabular-nums">
+                {formatDuration(stat.selfTimeMax)}
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}

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

@@ -0,0 +1,54 @@
+import { formatDuration } from "../utils/time.js";
+
+export interface TimeRulerProps {
+  totalDurationMs: number;
+  leftColumnWidth: string;
+  offsetMs?: number;
+}
+
+const TICK_COUNT = 5;
+
+export function TimeRuler({
+  totalDurationMs,
+  leftColumnWidth,
+  offsetMs = 0,
+}: TimeRulerProps) {
+  const ticks = Array.from({ length: TICK_COUNT + 1 }, (_, i) => {
+    const fraction = i / TICK_COUNT;
+    return {
+      label: formatDuration(offsetMs + totalDurationMs * fraction),
+      percent: fraction * 100,
+    };
+  });
+
+  return (
+    <div className="flex border-b border-border bg-background">
+      <div className="flex-shrink-0" style={{ width: leftColumnWidth }} />
+      <div className="flex-1 relative h-6 px-2">
+        {ticks.map((tick) => (
+          <div
+            key={tick.percent}
+            className="absolute top-0 h-full flex flex-col justify-end"
+            style={{ left: `${tick.percent}%` }}
+          >
+            <div className="h-2 border-l border-muted-foreground/40" />
+            <span
+              className="text-[10px] text-muted-foreground font-mono -translate-x-1/2 absolute bottom-0 whitespace-nowrap"
+              style={{
+                left: 0,
+                transform:
+                  tick.percent === 100
+                    ? "translateX(-100%)"
+                    : tick.percent === 0
+                      ? "none"
+                      : "translateX(-50%)",
+              }}
+            >
+              {tick.label}
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

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

@@ -19,21 +19,37 @@ export function TimelineBar({
 
   const leftPercent = relativeStart * 100;
   const widthPercent = Math.max(0.2, relativeDuration * 100);
+  const isWide = widthPercent > 8;
 
   const tooltipText = `${span.name}\n${formatDuration(span.durationMs)}\nStatus: ${isError ? "ERROR" : "OK"}`;
+  const durationLabel = formatDuration(span.durationMs);
 
   return (
     <div className="relative h-full">
       <Tooltip content={tooltipText}>
         <div className="absolute inset-0">
           <div
-            className="absolute top-1/2 -translate-y-1/2 h-2 rounded-sm cursor-pointer hover:opacity-80 transition-opacity"
+            className="absolute top-1/2 -translate-y-1/2 h-2 rounded-sm cursor-pointer hover:opacity-80 transition-opacity flex items-center"
             style={{
               left: `${leftPercent}%`,
               width: `max(2px, ${widthPercent}%)`,
               backgroundColor: barColor,
             }}
-          />
+          >
+            {isWide && (
+              <span className="text-[10px] font-mono text-white px-1 truncate">
+                {durationLabel}
+              </span>
+            )}
+          </div>
+          {!isWide && (
+            <span
+              className="absolute top-1/2 -translate-y-1/2 text-[10px] font-mono text-muted-foreground whitespace-nowrap"
+              style={{ left: `calc(${leftPercent + widthPercent}% + 4px)` }}
+            >
+              {durationLabel}
+            </span>
+          )}
         </div>
       </Tooltip>
     </div>

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

@@ -1,18 +1,40 @@
 import { useState } from "react";
 import type { ParsedTrace } from "../types.js";
 import { formatDuration, formatTimestamp } from "../utils/time.js";
+import { getServiceColor } from "../utils/colors.js";
 
 export interface TraceHeaderProps {
   trace: ParsedTrace;
+  services?: string[];
+  onHeaderToggle?: () => void;
+  isCollapsed?: boolean;
 }
 
-export function TraceHeader({ trace }: TraceHeaderProps) {
+function computeMaxDepth(spans: ParsedTrace["rootSpans"]): number {
+  let max = 0;
+  function walk(nodes: ParsedTrace["rootSpans"], depth: number) {
+    for (const node of nodes) {
+      if (depth > max) max = depth;
+      walk(node.children, depth + 1);
+    }
+  }
+  walk(spans, 1);
+  return max;
+}
+
+export function TraceHeader({
+  trace,
+  services = [],
+  onHeaderToggle,
+  isCollapsed = false,
+}: TraceHeaderProps) {
   const [copied, setCopied] = useState(false);
 
   const rootSpan = trace.rootSpans[0];
   const rootServiceName = rootSpan?.serviceName ?? "unknown";
   const rootSpanName = rootSpan?.name ?? "unknown";
   const totalDuration = trace.maxTimeMs - trace.minTimeMs;
+  const maxDepth = computeMaxDepth(trace.rootSpans);
 
   const handleCopyTraceId = async () => {
     try {
@@ -26,63 +48,106 @@ export function TraceHeader({ trace }: TraceHeaderProps) {
 
   return (
     <div className="bg-background border-b border-border px-4 py-3">
-      <div className="flex items-center gap-6 flex-wrap">
-        <div className="flex items-center gap-2">
-          <span className="text-xs font-semibold text-muted-foreground">
-            Trace ID:
-          </span>
+      <div className="flex items-center gap-2 mb-1">
+        {onHeaderToggle && (
           <button
-            onClick={handleCopyTraceId}
-            className="text-sm font-mono bg-muted px-2 py-1 rounded hover:bg-muted/80 transition-colors text-foreground"
-            title="Click to copy"
+            onClick={onHeaderToggle}
+            className="p-0.5 text-muted-foreground hover:text-foreground"
+            aria-label={isCollapsed ? "Expand header" : "Collapse header"}
           >
-            {trace.traceId.slice(0, 16)}...
+            <svg
+              className={`w-4 h-4 transition-transform ${isCollapsed ? "-rotate-90" : ""}`}
+              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>
-          {copied && (
-            <span className="text-xs text-green-600 dark:text-green-400 font-medium">
-              Copied!
-            </span>
-          )}
-        </div>
+        )}
+        <span className="text-sm font-semibold text-foreground">
+          {rootServiceName}: {rootSpanName}
+        </span>
+      </div>
 
-        <div className="flex items-center gap-2">
-          <span className="text-xs font-semibold text-muted-foreground">
-            Root:
-          </span>
-          <span className="text-sm">
-            <span className="text-muted-foreground">{rootServiceName}</span>
-            <span className="mx-1 text-muted-foreground/70">/</span>
-            <span className="font-medium text-foreground">{rootSpanName}</span>
-          </span>
-        </div>
+      {!isCollapsed && (
+        <>
+          <div className="flex items-center gap-6 flex-wrap">
+            <div className="flex items-center gap-2">
+              <span className="text-xs font-semibold text-muted-foreground">
+                Trace ID:
+              </span>
+              <button
+                onClick={handleCopyTraceId}
+                className="text-sm font-mono bg-muted px-2 py-1 rounded hover:bg-muted/80 transition-colors text-foreground"
+                title="Click to copy"
+              >
+                {trace.traceId.slice(0, 16)}...
+              </button>
+              {copied && (
+                <span className="text-xs text-green-600 dark:text-green-400 font-medium">
+                  Copied!
+                </span>
+              )}
+            </div>
 
-        <div className="flex items-center gap-2">
-          <span className="text-xs font-semibold text-muted-foreground">
-            Duration:
-          </span>
-          <span className="text-sm font-medium text-foreground">
-            {formatDuration(totalDuration)}
-          </span>
-        </div>
+            <div className="flex items-center gap-2">
+              <span className="text-xs font-semibold text-muted-foreground">
+                Duration:
+              </span>
+              <span className="text-sm font-medium text-foreground">
+                {formatDuration(totalDuration)}
+              </span>
+            </div>
 
-        <div className="flex items-center gap-2">
-          <span className="text-xs font-semibold text-muted-foreground">
-            Spans:
-          </span>
-          <span className="text-sm font-medium text-foreground">
-            {trace.totalSpanCount}
-          </span>
-        </div>
+            <div className="flex items-center gap-2">
+              <span className="text-xs font-semibold text-muted-foreground">
+                Spans:
+              </span>
+              <span className="text-sm font-medium text-foreground">
+                {trace.totalSpanCount}
+              </span>
+            </div>
 
-        <div className="flex items-center gap-2">
-          <span className="text-xs font-semibold text-muted-foreground">
-            Started:
-          </span>
-          <span className="text-sm text-foreground">
-            {formatTimestamp(trace.minTimeMs)}
-          </span>
-        </div>
-      </div>
+            <div className="flex items-center gap-2">
+              <span className="text-xs font-semibold text-muted-foreground">
+                Depth:
+              </span>
+              <span className="text-sm font-medium text-foreground">
+                {maxDepth}
+              </span>
+            </div>
+
+            <div className="flex items-center gap-2">
+              <span className="text-xs font-semibold text-muted-foreground">
+                Started:
+              </span>
+              <span className="text-sm text-foreground">
+                {formatTimestamp(trace.minTimeMs)}
+              </span>
+            </div>
+          </div>
+
+          {services.length > 0 && (
+            <div className="flex items-center gap-3 mt-2 flex-wrap">
+              {services.map((svc) => (
+                <div key={svc} className="flex items-center gap-1.5">
+                  <span
+                    className="w-2.5 h-2.5 rounded-full flex-shrink-0"
+                    style={{ backgroundColor: getServiceColor(svc) }}
+                  />
+                  <span className="text-xs text-muted-foreground">{svc}</span>
+                </div>
+              ))}
+            </div>
+          )}
+        </>
+      )}
     </div>
   );
 }

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

@@ -0,0 +1,34 @@
+export const VIEWS = ["timeline", "graph", "statistics", "flamegraph"] as const;
+export type ViewName = (typeof VIEWS)[number];
+
+export interface ViewTabsProps {
+  activeView: ViewName;
+  onChange: (view: ViewName) => void;
+}
+
+const VIEW_LABELS: Record<string, string> = {
+  timeline: "Timeline",
+  graph: "Graph",
+  statistics: "Statistics",
+  flamegraph: "Flamegraph",
+};
+
+export function ViewTabs({ activeView, onChange }: ViewTabsProps) {
+  return (
+    <div className="flex border-b border-border bg-background">
+      {VIEWS.map((view) => (
+        <button
+          key={view}
+          onClick={() => onChange(view)}
+          className={`px-4 py-1.5 text-sm font-medium transition-colors ${
+            activeView === view
+              ? "text-foreground border-b-2 border-blue-500"
+              : "text-muted-foreground hover:text-foreground"
+          }`}
+        >
+          {VIEW_LABELS[view]}
+        </button>
+      ))}
+    </div>
+  );
+}