@kopai/ui 0.8.0 → 0.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kopai/ui",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "license": "Apache-2.0",
   "author": "Vladimir Adamic",
   "repository": {
@@ -31,32 +31,32 @@
   ],
   "dependencies": {
     "@tanstack/react-query": "^5",
-    "@tanstack/react-virtual": "^3.13.19",
-    "recharts": "^3.7.0",
-    "@kopai/core": "0.7.0",
-    "@kopai/sdk": "0.5.0"
+    "@tanstack/react-virtual": "^3.13.22",
+    "recharts": "^3.8.0",
+    "@kopai/core": "0.8.0",
+    "@kopai/sdk": "0.6.0"
   },
   "peerDependencies": {
     "react": "^19.2.4",
     "react-dom": "^19.2.4"
   },
   "devDependencies": {
-    "@storybook/addon-docs": "^10.2.13",
-    "@storybook/react": "^10.2.13",
-    "@storybook/react-vite": "^10.2.13",
+    "@storybook/addon-docs": "^10.2.19",
+    "@storybook/react": "^10.2.19",
+    "@storybook/react-vite": "^10.2.19",
     "@testing-library/react": "^16.3.0",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.1.0",
-    "@vitejs/plugin-react": "^5.1.4",
+    "@vitejs/plugin-react": "^6.0.1",
     "@tailwindcss/postcss": "^4.2.1",
     "jsdom": "^28.1.0",
-    "postcss": "^8.5.3",
+    "postcss": "^8.5.8",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
-    "storybook": "^10.2.13",
+    "storybook": "^10.2.19",
     "tailwindcss": "^4.2.1",
-    "tsdown": "^0.20.3",
-    "vite": "^7.3.1",
+    "tsdown": "^0.21.2",
+    "vite": "^8.0.0",
     "@kopai/tsconfig": "0.2.0"
   },
   "scripts": {

package/src/components/KeyboardShortcuts/KeyboardShortcutsProvider.tsx

@@ -8,7 +8,7 @@ const GENERAL_GROUP: ShortcutGroup = {
   name: "General",
   shortcuts: [
     { keys: ["Shift", "?"], description: "Toggle shortcuts help" },
-    { keys: ["Shift", "S"], description: "Services tab" },
+    { keys: ["Shift", "T"], description: "Traces tab" },
     { keys: ["Shift", "L"], description: "Logs tab" },
     { keys: ["Shift", "M"], description: "Metrics tab" },
   ],
@@ -48,12 +48,12 @@ export function KeyboardShortcutsProvider({
 
   useEffect(() => {
     function handleKeyDown(e: KeyboardEvent) {
-      const target = e.target as HTMLElement;
+      if (!(e.target instanceof HTMLElement)) return;
       if (
-        target.tagName === "INPUT" ||
-        target.tagName === "TEXTAREA" ||
-        target.tagName === "SELECT" ||
-        target.isContentEditable
+        e.target.tagName === "INPUT" ||
+        e.target.tagName === "TEXTAREA" ||
+        e.target.tagName === "SELECT" ||
+        e.target.isContentEditable
       ) {
         return;
       }
@@ -70,7 +70,7 @@ export function KeyboardShortcutsProvider({
         return;
       }
 
-      if (e.shiftKey && e.key === "S") {
+      if (e.shiftKey && e.key === "T") {
         e.preventDefault();
         onNavigateServices();
         return;

package/src/components/observability/DynamicDashboard/DynamicDashboard.test.tsx

@@ -28,6 +28,11 @@ function createMockClient(): MockClient {
       .fn()
       .mockResolvedValue({ data: [], nextCursor: null }),
     searchDashboards: vi.fn().mockReturnValue((async function* () {})()),
+    getServices: vi.fn().mockResolvedValue({ services: [] }),
+    getOperations: vi.fn().mockResolvedValue({ operations: [] }),
+    searchTraceSummariesPage: vi
+      .fn()
+      .mockResolvedValue({ data: [], nextCursor: null }),
   };
 }
 

package/src/components/observability/LogTimeline/LogFilter.tsx

@@ -130,7 +130,11 @@ function MultiSelect({
   useEffect(() => {
     if (!dropOpen) return;
     const handler = (e: MouseEvent) => {
-      if (ref.current && !ref.current.contains(e.target as Node)) {
+      if (
+        ref.current &&
+        e.target instanceof Node &&
+        !ref.current.contains(e.target)
+      ) {
         setDropOpen(false);
       }
     };

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

@@ -269,8 +269,12 @@ export function LogTimeline({
         e.target instanceof HTMLInputElement ||
         e.target instanceof HTMLTextAreaElement ||
         e.target instanceof HTMLSelectElement;
-      if (isFormField && e.key === "Escape") {
-        (e.target as HTMLElement).blur();
+      if (
+        isFormField &&
+        e.key === "Escape" &&
+        e.target instanceof HTMLElement
+      ) {
+        e.target.blur();
         return;
       }
       if (isFormField) return;

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

@@ -13,9 +13,11 @@ import {
   Legend,
   ResponsiveContainer,
   Cell,
+  type TooltipPayload,
 } from "recharts";
 import type { denormalizedSignals } from "@kopai/core";
 import { formatSeriesLabel } from "../utils/attributes.js";
+import { TooltipEntryList } from "../shared/TooltipEntryList.js";
 import {
   resolveUnitScale,
   formatDisplayValue,
@@ -57,6 +59,12 @@ interface BucketData {
   [seriesKey: string]: number | string;
 }
 
+function isBucketData(v: unknown): v is BucketData {
+  return (
+    typeof v === "object" && v !== null && "bucket" in v && "lowerBound" in v
+  );
+}
+
 const defaultFormatBucketLabel = (
   bound: number,
   index: number,
@@ -125,7 +133,8 @@ function buildHistogramData(
         };
         buckets.push(bucket);
       }
-      bucket[seriesName] = ((bucket[seriesName] as number) ?? 0) + count;
+      const prev = bucket[seriesName];
+      bucket[seriesName] = (typeof prev === "number" ? prev : 0) + count;
     }
   }
 
@@ -304,37 +313,29 @@ function HistogramTooltip({
   displayLabelMap,
 }: {
   active?: boolean;
-  payload?: readonly {
-    dataKey: string;
-    value: number;
-    color: string;
-    payload: BucketData;
-  }[];
+  payload?: TooltipPayload;
   formatValue: (val: number) => string;
   boundsScale: ResolvedScale | null;
   displayLabelMap: Map<string, string>;
 }) {
   if (!active || !payload?.length) return null;
-  const bucket = payload[0]?.payload;
-  if (!bucket) return null;
+  const raw = payload[0]?.payload;
+  if (!isBucketData(raw)) return null;
 
   const boundsLabel = boundsScale
-    ? `${formatDisplayValue(bucket.lowerBound, boundsScale)} – ${bucket.upperBound === Infinity ? "∞" : formatDisplayValue(bucket.upperBound, boundsScale)}`
-    : bucket.bucket;
+    ? `${formatDisplayValue(raw.lowerBound, boundsScale)} – ${raw.upperBound === Infinity ? "∞" : formatDisplayValue(raw.upperBound, boundsScale)}`
+    : raw.bucket;
 
   return (
     <div className="bg-background border border-gray-700 rounded-lg p-3 shadow-lg">
       <p className="text-gray-300 text-sm font-medium mb-2">
         Bucket: {boundsLabel}
       </p>
-      {payload.map((entry, i) => (
-        <p key={i} className="text-sm" style={{ color: entry.color }}>
-          <span className="font-medium">
-            {displayLabelMap.get(entry.dataKey) ?? entry.dataKey}:
-          </span>{" "}
-          {formatValue(entry.value)}
-        </p>
-      ))}
+      <TooltipEntryList
+        payload={payload}
+        displayLabelMap={displayLabelMap}
+        formatValue={formatValue}
+      />
     </div>
   );
 }

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

@@ -14,6 +14,7 @@ import {
   ResponsiveContainer,
   Brush,
   ReferenceLine,
+  type TooltipPayload,
 } from "recharts";
 import type { denormalizedSignals } from "@kopai/core";
 import type {
@@ -23,6 +24,7 @@ import type {
 } from "../types.js";
 import { downsampleLTTB, type LTTBPoint } from "../utils/lttb.js";
 import { formatSeriesLabel } from "../utils/attributes.js";
+import { TooltipEntryList } from "../shared/TooltipEntryList.js";
 import {
   resolveUnitScale,
   formatTickValue,
@@ -461,7 +463,7 @@ function CustomTooltip({
   displayLabelMap,
 }: {
   active?: boolean;
-  payload?: readonly { dataKey: string; value: number; color: string }[];
+  payload?: TooltipPayload;
   label?: string | number;
   formatTime: (ts: number) => string;
   formatValue: (val: number) => string;
@@ -472,14 +474,11 @@ function CustomTooltip({
   return (
     <div className="bg-background border border-gray-700 rounded-lg p-3 shadow-lg">
       <p className="text-gray-400 text-xs mb-2">{formatTime(ts)}</p>
-      {payload.map((entry, i) => (
-        <p key={i} className="text-sm" style={{ color: entry.color }}>
-          <span className="font-medium">
-            {displayLabelMap.get(entry.dataKey) ?? entry.dataKey}:
-          </span>{" "}
-          {formatValue(entry.value)}
-        </p>
-      ))}
+      <TooltipEntryList
+        payload={payload}
+        displayLabelMap={displayLabelMap}
+        formatValue={formatValue}
+      />
     </div>
   );
 }

package/src/components/observability/ServiceList/shortcuts.ts

@@ -1,6 +1,6 @@
 import type { ShortcutGroup } from "../../KeyboardShortcuts/types.js";
 
 export const SERVICES_SHORTCUTS: ShortcutGroup = {
-  name: "Services",
+  name: "Traces",
   shortcuts: [{ keys: ["Backspace"], description: "Go back" }],
 };

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

@@ -0,0 +1,332 @@
+import { useMemo } from "react";
+import type { denormalizedSignals } from "@kopai/core";
+import type { DataSource } from "../../../lib/component-catalog.js";
+import { useKopaiData } from "../../../hooks/use-kopai-data.js";
+import { TraceTimeline } from "../TraceTimeline/index.js";
+import { formatDuration } from "../utils/time.js";
+
+type OtelTracesRow = denormalizedSignals.OtelTracesRow;
+
+export interface TraceComparisonProps {
+  traceIdA: string;
+  traceIdB: string;
+  onBack: () => void;
+}
+
+interface DiffRow {
+  serviceName: string;
+  spanName: string;
+  countA: number;
+  countB: number;
+  avgDurationA: number;
+  avgDurationB: number;
+  deltaMs: number;
+}
+
+function computeTraceStats(rows: OtelTracesRow[]) {
+  if (rows.length === 0) return { durationMs: 0, spanCount: 0 };
+  let minTs = Infinity;
+  let maxEnd = -Infinity;
+  for (const row of rows) {
+    const startMs = parseInt(row.Timestamp, 10) / 1e6;
+    const durNs = row.Duration ? parseInt(row.Duration, 10) : 0;
+    const endMs = startMs + durNs / 1e6;
+    minTs = Math.min(minTs, startMs);
+    maxEnd = Math.max(maxEnd, endMs);
+  }
+  return { durationMs: maxEnd - minTs, spanCount: rows.length };
+}
+
+function collectSignatures(
+  rows: OtelTracesRow[]
+): Map<string, { count: number; totalDurationMs: number }> {
+  const map = new Map<string, { count: number; totalDurationMs: number }>();
+  for (const row of rows) {
+    const key = `${row.ServiceName ?? "unknown"}::${row.SpanName ?? ""}`;
+    const durNs = row.Duration ? parseInt(row.Duration, 10) : 0;
+    const durMs = durNs / 1e6;
+    const existing = map.get(key);
+    if (existing) {
+      existing.count++;
+      existing.totalDurationMs += durMs;
+    } else {
+      map.set(key, { count: 1, totalDurationMs: durMs });
+    }
+  }
+  return map;
+}
+
+function computeDiff(
+  rowsA: OtelTracesRow[],
+  rowsB: OtelTracesRow[]
+): DiffRow[] {
+  const sigA = collectSignatures(rowsA);
+  const sigB = collectSignatures(rowsB);
+  const allKeys = new Set([...sigA.keys(), ...sigB.keys()]);
+  const result: DiffRow[] = [];
+
+  for (const key of allKeys) {
+    const [serviceName = "unknown", spanName = ""] = key.split("::");
+    const a = sigA.get(key);
+    const b = sigB.get(key);
+    const countA = a?.count ?? 0;
+    const countB = b?.count ?? 0;
+    const avgA = a ? a.totalDurationMs / a.count : 0;
+    const avgB = b ? b.totalDurationMs / b.count : 0;
+    result.push({
+      serviceName,
+      spanName,
+      countA,
+      countB,
+      avgDurationA: avgA,
+      avgDurationB: avgB,
+      deltaMs: avgB - avgA,
+    });
+  }
+
+  // Sort: spans only in A first, then only in B, then shared (by absolute delta desc)
+  return result.sort((a, b) => {
+    const aShared = a.countA > 0 && a.countB > 0;
+    const bShared = b.countA > 0 && b.countB > 0;
+    if (aShared !== bShared) return aShared ? 1 : -1;
+    return Math.abs(b.deltaMs) - Math.abs(a.deltaMs);
+  });
+}
+
+function formatDelta(ms: number): string {
+  const sign = ms > 0 ? "+" : "";
+  return `${sign}${formatDuration(ms)}`;
+}
+
+export function TraceComparison({
+  traceIdA,
+  traceIdB,
+  onBack,
+}: TraceComparisonProps) {
+  const dsA = useMemo<DataSource>(
+    () => ({ method: "getTrace", params: { traceId: traceIdA } }),
+    [traceIdA]
+  );
+  const dsB = useMemo<DataSource>(
+    () => ({ method: "getTrace", params: { traceId: traceIdB } }),
+    [traceIdB]
+  );
+
+  const {
+    data: rowsA,
+    loading: loadingA,
+    error: errorA,
+  } = useKopaiData<OtelTracesRow[]>(dsA);
+  const {
+    data: rowsB,
+    loading: loadingB,
+    error: errorB,
+  } = useKopaiData<OtelTracesRow[]>(dsB);
+
+  const statsA = useMemo(() => computeTraceStats(rowsA ?? []), [rowsA]);
+  const statsB = useMemo(() => computeTraceStats(rowsB ?? []), [rowsB]);
+  const diff = useMemo(
+    () => computeDiff(rowsA ?? [], rowsB ?? []),
+    [rowsA, rowsB]
+  );
+
+  const durationDelta = statsB.durationMs - statsA.durationMs;
+  const spanDelta = statsB.spanCount - statsA.spanCount;
+  const isLoading = loadingA || loadingB;
+
+  return (
+    <div className="flex flex-col gap-4">
+      {/* Header */}
+      <div className="flex items-center justify-between bg-background border border-border rounded-lg p-4">
+        <div className="flex items-center gap-4">
+          <button
+            onClick={onBack}
+            className="text-sm text-muted-foreground hover:text-foreground transition-colors"
+          >
+            &larr; Back
+          </button>
+          <div className="flex items-center gap-6 text-sm">
+            <div>
+              <span className="text-muted-foreground mr-1">A:</span>
+              <span className="font-mono text-xs text-foreground">
+                {traceIdA.slice(0, 16)}...
+              </span>
+            </div>
+            <div>
+              <span className="text-muted-foreground mr-1">B:</span>
+              <span className="font-mono text-xs text-foreground">
+                {traceIdB.slice(0, 16)}...
+              </span>
+            </div>
+          </div>
+        </div>
+        {!isLoading && (
+          <div className="flex items-center gap-6 text-sm">
+            <div>
+              <span className="text-muted-foreground mr-1">
+                Duration delta:
+              </span>
+              <span
+                className={
+                  durationDelta > 0
+                    ? "text-red-400"
+                    : durationDelta < 0
+                      ? "text-green-400"
+                      : "text-foreground"
+                }
+              >
+                {formatDelta(durationDelta)}
+              </span>
+            </div>
+            <div>
+              <span className="text-muted-foreground mr-1">
+                Span count delta:
+              </span>
+              <span
+                className={
+                  spanDelta > 0
+                    ? "text-red-400"
+                    : spanDelta < 0
+                      ? "text-green-400"
+                      : "text-foreground"
+                }
+              >
+                {spanDelta > 0 ? `+${spanDelta}` : String(spanDelta)}
+              </span>
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Side-by-side timelines */}
+      <div className="grid grid-cols-2 gap-4" style={{ height: "50vh" }}>
+        <div className="border border-border rounded-lg overflow-hidden">
+          <TraceTimeline
+            rows={rowsA ?? []}
+            isLoading={loadingA}
+            error={errorA ?? undefined}
+          />
+        </div>
+        <div className="border border-border rounded-lg overflow-hidden">
+          <TraceTimeline
+            rows={rowsB ?? []}
+            isLoading={loadingB}
+            error={errorB ?? undefined}
+          />
+        </div>
+      </div>
+
+      {/* Structural Diff Table */}
+      {!isLoading && diff.length > 0 && (
+        <div className="border border-border rounded-lg overflow-hidden">
+          <div className="px-4 py-3 border-b border-border bg-background">
+            <h3 className="text-sm font-medium text-foreground">
+              Structural Diff
+            </h3>
+          </div>
+          <div className="overflow-x-auto">
+            <table className="w-full text-sm">
+              <thead>
+                <tr className="border-b border-border bg-muted/30">
+                  <th className="text-left px-4 py-2 text-muted-foreground font-medium">
+                    Service
+                  </th>
+                  <th className="text-left px-4 py-2 text-muted-foreground font-medium">
+                    Span
+                  </th>
+                  <th className="text-right px-4 py-2 text-muted-foreground font-medium">
+                    Count A
+                  </th>
+                  <th className="text-right px-4 py-2 text-muted-foreground font-medium">
+                    Count B
+                  </th>
+                  <th className="text-right px-4 py-2 text-muted-foreground font-medium">
+                    Avg Dur A
+                  </th>
+                  <th className="text-right px-4 py-2 text-muted-foreground font-medium">
+                    Avg Dur B
+                  </th>
+                  <th className="text-right px-4 py-2 text-muted-foreground font-medium">
+                    Delta
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                {diff.map((row) => {
+                  const onlyA = row.countA > 0 && row.countB === 0;
+                  const onlyB = row.countA === 0 && row.countB > 0;
+                  const rowBg = onlyA
+                    ? "bg-red-500/5"
+                    : onlyB
+                      ? "bg-green-500/5"
+                      : "";
+
+                  return (
+                    <tr
+                      key={`${row.serviceName}::${row.spanName}`}
+                      className={`border-b border-border/50 ${rowBg}`}
+                    >
+                      <td className="px-4 py-1.5 text-foreground">
+                        {row.serviceName}
+                      </td>
+                      <td className="px-4 py-1.5 font-mono text-xs text-foreground">
+                        {row.spanName}
+                      </td>
+                      <td className="px-4 py-1.5 text-right text-foreground">
+                        {row.countA || (
+                          <span className="text-muted-foreground">-</span>
+                        )}
+                      </td>
+                      <td className="px-4 py-1.5 text-right text-foreground">
+                        {row.countB || (
+                          <span className="text-muted-foreground">-</span>
+                        )}
+                      </td>
+                      <td className="px-4 py-1.5 text-right text-foreground">
+                        {row.countA > 0 ? (
+                          formatDuration(row.avgDurationA)
+                        ) : (
+                          <span className="text-muted-foreground">-</span>
+                        )}
+                      </td>
+                      <td className="px-4 py-1.5 text-right text-foreground">
+                        {row.countB > 0 ? (
+                          formatDuration(row.avgDurationB)
+                        ) : (
+                          <span className="text-muted-foreground">-</span>
+                        )}
+                      </td>
+                      <td className="px-4 py-1.5 text-right">
+                        {row.countA > 0 && row.countB > 0 ? (
+                          <span
+                            className={
+                              row.deltaMs > 0
+                                ? "text-red-400"
+                                : row.deltaMs < 0
+                                  ? "text-green-400"
+                                  : "text-foreground"
+                            }
+                          >
+                            {formatDelta(row.deltaMs)}
+                          </span>
+                        ) : (
+                          <span
+                            className={
+                              onlyA ? "text-red-400" : "text-green-400"
+                            }
+                          >
+                            {onlyA ? "removed" : "added"}
+                          </span>
+                        )}
+                      </td>
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/observability/TraceDetail/TraceDetail.stories.tsx

@@ -18,7 +18,6 @@ type Story = StoryObj<typeof TraceDetail>;
 
 export const Default: Story = {
   args: {
-    service: "api-gateway",
     traceId: "0af7651916cd43dd8448eb211c80319c",
     rows: mockTraceRows,
   },
@@ -26,7 +25,6 @@ export const Default: Story = {
 
 export const ErrorTrace: Story = {
   args: {
-    service: "api-gateway",
     traceId: "1bf8762027de54ee9559fc322d91420d",
     rows: mockErrorTraceRows,
   },
@@ -34,7 +32,6 @@ export const ErrorTrace: Story = {
 
 export const Loading: Story = {
   args: {
-    service: "api-gateway",
     traceId: "0af7651916cd43dd8448eb211c80319c",
     rows: [],
     isLoading: true,
@@ -43,7 +40,6 @@ export const Loading: Story = {
 
 export const Error: Story = {
   args: {
-    service: "api-gateway",
     traceId: "0af7651916cd43dd8448eb211c80319c",
     rows: [],
     error: new globalThis.Error("Failed to fetch trace"),

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

@@ -5,24 +5,24 @@ import type { SpanNode } from "../types.js";
 type OtelTracesRow = denormalizedSignals.OtelTracesRow;
 
 export interface TraceDetailProps {
-  service: string;
   traceId: string;
   rows: OtelTracesRow[];
   isLoading?: boolean;
   error?: Error;
   selectedSpanId?: string;
   onSpanClick?: (span: SpanNode) => void;
+  onSpanDeselect?: () => void;
   onBack: () => void;
 }
 
 export function TraceDetail({
-  service,
   traceId,
   rows,
   isLoading,
   error,
   selectedSpanId,
   onSpanClick,
+  onSpanDeselect,
   onBack,
 }: TraceDetailProps) {
   return (
@@ -33,7 +33,7 @@ export function TraceDetail({
           onClick={onBack}
           className="hover:text-foreground transition-colors"
         >
-          Services / {service}
+          Traces
         </button>
         <span>/</span>
         <span className="text-foreground font-mono text-xs">
@@ -47,6 +47,7 @@ export function TraceDetail({
         error={error}
         selectedSpanId={selectedSpanId}
         onSpanClick={onSpanClick}
+        onSpanDeselect={onSpanDeselect}
       />
     </div>
   );