@kopai/ui 0.0.5 → 0.1.0

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

@@ -0,0 +1,292 @@
+import { useState } from "react";
+import { formatDuration, formatTimestamp } from "../utils/time.js";
+import { getServiceColor } from "../utils/colors.js";
+
+// ---------------------------------------------------------------------------
+// Public types
+// ---------------------------------------------------------------------------
+
+export interface TraceSummary {
+  traceId: string;
+  rootSpanName: string;
+  serviceName: string;
+  durationMs: number;
+  statusCode: string;
+  timestampMs: number;
+  spanCount: number;
+  services: { name: string; count: number; hasError: boolean }[];
+  errorCount: number;
+}
+
+export interface TraceSearchFilters {
+  operation?: string;
+  lookbackMs?: number;
+  minDuration?: string;
+  maxDuration?: string;
+  limit: number;
+}
+
+export interface TraceSearchProps {
+  service: string;
+  traces: TraceSummary[];
+  operations?: string[];
+  isLoading?: boolean;
+  error?: Error;
+  onSelectTrace: (traceId: string) => void;
+  onBack: () => void;
+  onSearch?: (filters: TraceSearchFilters) => void;
+}
+
+// ---------------------------------------------------------------------------
+// Lookback presets
+// ---------------------------------------------------------------------------
+
+const LOOKBACK_OPTIONS = [
+  { label: "Last 5 Minutes", ms: 5 * 60_000 },
+  { label: "Last 15 Minutes", ms: 15 * 60_000 },
+  { label: "Last 30 Minutes", ms: 30 * 60_000 },
+  { label: "Last 1 Hour", ms: 60 * 60_000 },
+  { label: "Last 2 Hours", ms: 2 * 60 * 60_000 },
+  { label: "Last 6 Hours", ms: 6 * 60 * 60_000 },
+  { label: "Last 12 Hours", ms: 12 * 60 * 60_000 },
+  { label: "Last 24 Hours", ms: 24 * 60 * 60_000 },
+] as const;
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+export function TraceSearch({
+  service,
+  traces,
+  operations = [],
+  isLoading,
+  error,
+  onSelectTrace,
+  onBack,
+  onSearch,
+}: TraceSearchProps) {
+  const [operation, setOperation] = useState("all");
+  const [lookbackIdx, setLookbackIdx] = useState<number>(-1);
+  const [minDuration, setMinDuration] = useState("");
+  const [maxDuration, setMaxDuration] = useState("");
+  const [limit, setLimit] = useState(20);
+  const [filtersOpen, setFiltersOpen] = useState(true);
+
+  const handleFindTraces = () => {
+    onSearch?.({
+      operation: operation !== "all" ? operation : undefined,
+      lookbackMs:
+        lookbackIdx >= 0 ? LOOKBACK_OPTIONS[lookbackIdx]!.ms : undefined,
+      minDuration: minDuration || undefined,
+      maxDuration: maxDuration || undefined,
+      limit,
+    });
+  };
+
+  return (
+    <div>
+      {/* Breadcrumb */}
+      <div className="flex items-center gap-1.5 text-sm text-muted-foreground mb-4">
+        <button
+          onClick={onBack}
+          className="hover:text-foreground transition-colors"
+        >
+          Services
+        </button>
+        <span>/</span>
+        <span className="text-foreground">{service}</span>
+      </div>
+
+      {/* Filter panel */}
+      {onSearch && (
+        <div className="border border-border rounded-lg mb-4">
+          <button
+            onClick={() => setFiltersOpen((v) => !v)}
+            className="w-full flex items-center justify-between px-4 py-2.5 text-sm font-medium text-foreground hover:bg-muted/30 transition-colors"
+          >
+            <span>Filters</span>
+            <span className="text-muted-foreground text-xs">
+              {filtersOpen ? "▲" : "▼"}
+            </span>
+          </button>
+          {filtersOpen && (
+            <div className="px-4 pb-4 pt-1 border-t border-border space-y-3">
+              <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
+                {/* Operation */}
+                <label className="space-y-1">
+                  <span className="text-xs text-muted-foreground">
+                    Operation
+                  </span>
+                  <select
+                    value={operation}
+                    onChange={(e) => setOperation(e.target.value)}
+                    className="w-full bg-muted/50 border border-border rounded px-2 py-1.5 text-sm text-foreground"
+                  >
+                    <option value="all">All</option>
+                    {operations.map((op) => (
+                      <option key={op} value={op}>
+                        {op}
+                      </option>
+                    ))}
+                  </select>
+                </label>
+
+                {/* Lookback */}
+                <label className="space-y-1">
+                  <span className="text-xs text-muted-foreground">
+                    Lookback
+                  </span>
+                  <select
+                    value={lookbackIdx}
+                    onChange={(e) => setLookbackIdx(Number(e.target.value))}
+                    className="w-full bg-muted/50 border border-border rounded px-2 py-1.5 text-sm text-foreground"
+                  >
+                    <option value={-1}>All time</option>
+                    {LOOKBACK_OPTIONS.map((opt, i) => (
+                      <option key={i} value={i}>
+                        {opt.label}
+                      </option>
+                    ))}
+                  </select>
+                </label>
+
+                {/* Limit */}
+                <label className="space-y-1">
+                  <span className="text-xs text-muted-foreground">Limit</span>
+                  <input
+                    type="number"
+                    min={1}
+                    max={1000}
+                    value={limit}
+                    onChange={(e) => {
+                      const n = Number(e.target.value);
+                      setLimit(
+                        Number.isNaN(n) ? 20 : Math.max(1, Math.min(1000, n))
+                      );
+                    }}
+                    className="w-full bg-muted/50 border border-border rounded px-2 py-1.5 text-sm text-foreground"
+                  />
+                </label>
+
+                {/* Min Duration */}
+                <label className="space-y-1">
+                  <span className="text-xs text-muted-foreground">
+                    Min Duration
+                  </span>
+                  <input
+                    type="text"
+                    placeholder="e.g. 100ms"
+                    value={minDuration}
+                    onChange={(e) => setMinDuration(e.target.value)}
+                    className="w-full bg-muted/50 border border-border rounded px-2 py-1.5 text-sm text-foreground placeholder:text-muted-foreground/50"
+                  />
+                </label>
+
+                {/* Max Duration */}
+                <label className="space-y-1">
+                  <span className="text-xs text-muted-foreground">
+                    Max Duration
+                  </span>
+                  <input
+                    type="text"
+                    placeholder="e.g. 5s"
+                    value={maxDuration}
+                    onChange={(e) => setMaxDuration(e.target.value)}
+                    className="w-full bg-muted/50 border border-border rounded px-2 py-1.5 text-sm text-foreground placeholder:text-muted-foreground/50"
+                  />
+                </label>
+              </div>
+
+              <button
+                onClick={handleFindTraces}
+                className="px-4 py-1.5 text-sm font-medium bg-foreground text-background rounded hover:bg-foreground/90 transition-colors"
+              >
+                Find Traces
+              </button>
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Results */}
+      {isLoading && (
+        <div className="flex items-center gap-2 text-muted-foreground py-8">
+          <div className="w-4 h-4 border-2 border-muted-foreground border-t-transparent rounded-full animate-spin" />
+          Loading traces...
+        </div>
+      )}
+
+      {error && (
+        <div className="text-red-400 py-4">
+          Error loading traces: {error.message}
+        </div>
+      )}
+
+      {!isLoading && !error && traces.length === 0 && (
+        <div className="text-muted-foreground py-8">
+          No traces found for {service}
+        </div>
+      )}
+
+      {traces.length > 0 && (
+        <div className="space-y-2">
+          {traces.map((t) => (
+            <div
+              key={t.traceId}
+              onClick={() => onSelectTrace(t.traceId)}
+              className="border border-border rounded-lg px-4 py-3 hover:border-foreground/30 hover:bg-muted/30 cursor-pointer transition-colors"
+            >
+              {/* Title line */}
+              <div className="flex items-baseline justify-between gap-2">
+                <div className="flex items-baseline gap-1.5 min-w-0">
+                  <span className="font-medium text-foreground truncate">
+                    {t.serviceName}: {t.rootSpanName}
+                  </span>
+                  <span className="text-xs font-mono text-muted-foreground shrink-0">
+                    {t.traceId.slice(0, 7)}
+                  </span>
+                </div>
+                <span className="text-sm text-foreground/80 shrink-0">
+                  {formatDuration(t.durationMs)}
+                </span>
+              </div>
+
+              {/* Tags line */}
+              <div className="flex items-center flex-wrap gap-1.5 mt-1.5">
+                <span className="text-xs px-1.5 py-0.5 rounded bg-muted text-muted-foreground">
+                  {t.spanCount} Span{t.spanCount !== 1 ? "s" : ""}
+                </span>
+                {t.errorCount > 0 && (
+                  <span className="text-xs px-1.5 py-0.5 rounded bg-red-500/20 text-red-400">
+                    {t.errorCount} Error{t.errorCount !== 1 ? "s" : ""}
+                  </span>
+                )}
+                {t.services.map((svc) => (
+                  <span
+                    key={svc.name}
+                    className="inline-flex items-center gap-1 text-xs px-1.5 py-0.5 rounded"
+                    style={{
+                      backgroundColor: `${getServiceColor(svc.name)}20`,
+                      color: getServiceColor(svc.name),
+                    }}
+                  >
+                    {svc.hasError && (
+                      <span className="w-1.5 h-1.5 rounded-full bg-red-500 shrink-0" />
+                    )}
+                    {svc.name} ({svc.count})
+                  </span>
+                ))}
+              </div>
+
+              {/* Timestamp */}
+              <div className="text-xs text-muted-foreground mt-1 text-right">
+                {formatTimestamp(t.timestampMs)}
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/observability/TraceTimeline/DetailPane/AttributesTab.tsx

@@ -0,0 +1,152 @@
+import { useMemo } from "react";
+import type { SpanNode } from "../../types.js";
+import {
+  formatAttributeValue,
+  isComplexValue,
+} from "../../utils/attributes.js";
+
+export interface AttributesTabProps {
+  span: SpanNode;
+}
+
+const HTTP_SEMANTIC_CONVENTIONS = new Set([
+  "http.method",
+  "http.url",
+  "http.status_code",
+  "http.target",
+  "http.host",
+  "http.scheme",
+  "http.route",
+  "http.user_agent",
+  "http.request_content_length",
+  "http.response_content_length",
+]);
+
+export function AttributesTab({ span }: AttributesTabProps) {
+  const { httpAttributes, otherAttributes, resourceAttributes } =
+    useMemo(() => {
+      const http: Array<[string, unknown]> = [];
+      const other: Array<[string, unknown]> = [];
+      const resource: Array<[string, unknown]> = [];
+
+      if (span.attributes) {
+        Object.entries(span.attributes).forEach(([key, value]) => {
+          if (HTTP_SEMANTIC_CONVENTIONS.has(key)) {
+            http.push([key, value]);
+          } else {
+            other.push([key, value]);
+          }
+        });
+      }
+
+      if (span.resourceAttributes) {
+        Object.entries(span.resourceAttributes).forEach(([key, value]) => {
+          resource.push([key, value]);
+        });
+      }
+
+      http.sort(([a], [b]) => a.localeCompare(b));
+      other.sort(([a], [b]) => a.localeCompare(b));
+      resource.sort(([a], [b]) => a.localeCompare(b));
+
+      return {
+        httpAttributes: http,
+        otherAttributes: other,
+        resourceAttributes: resource,
+      };
+    }, [span]);
+
+  const hasAttributes =
+    httpAttributes.length > 0 ||
+    otherAttributes.length > 0 ||
+    resourceAttributes.length > 0;
+
+  if (!hasAttributes) {
+    return (
+      <div className="text-sm text-muted-foreground text-center py-8">
+        No attributes available
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      {httpAttributes.length > 0 && (
+        <section>
+          <h3 className="text-sm font-semibold text-foreground mb-3 flex items-center">
+            <span className="w-2 h-2 bg-blue-500 rounded-full mr-2" />
+            HTTP Attributes
+          </h3>
+          <div className="space-y-2">
+            {httpAttributes.map(([key, value]) => (
+              <AttributeRow key={key} attrKey={key} value={value} highlighted />
+            ))}
+          </div>
+        </section>
+      )}
+
+      {otherAttributes.length > 0 && (
+        <section>
+          <h3 className="text-sm font-semibold text-foreground mb-3">
+            Span Attributes
+          </h3>
+          <div className="space-y-2">
+            {otherAttributes.map(([key, value]) => (
+              <AttributeRow key={key} attrKey={key} value={value} />
+            ))}
+          </div>
+        </section>
+      )}
+
+      {resourceAttributes.length > 0 && (
+        <section>
+          <h3 className="text-sm font-semibold text-foreground mb-3">
+            Resource Attributes
+          </h3>
+          <div className="space-y-2">
+            {resourceAttributes.map(([key, value]) => (
+              <AttributeRow key={key} attrKey={key} value={value} />
+            ))}
+          </div>
+        </section>
+      )}
+    </div>
+  );
+}
+
+interface AttributeRowProps {
+  attrKey: string;
+  value: unknown;
+  highlighted?: boolean;
+}
+
+function AttributeRow({ attrKey, value, highlighted }: AttributeRowProps) {
+  const isComplex = isComplexValue(value);
+  const formattedValue = formatAttributeValue(value);
+
+  return (
+    <div
+      className={`grid grid-cols-[minmax(150px,1fr)_2fr] gap-4 p-2 rounded text-sm ${
+        highlighted
+          ? "bg-blue-50 dark:bg-blue-950 border-l-2 border-blue-500"
+          : "bg-muted"
+      }`}
+    >
+      <div
+        className={`font-mono font-medium break-words ${highlighted ? "text-blue-700 dark:text-blue-300" : "text-foreground"}`}
+        title={attrKey}
+      >
+        {attrKey}
+      </div>
+      <div className="break-words">
+        {isComplex ? (
+          <pre className="text-xs text-foreground bg-background p-2 rounded border border-border overflow-x-auto">
+            {formattedValue}
+          </pre>
+        ) : (
+          <span className="text-foreground">{formattedValue}</span>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/observability/TraceTimeline/DetailPane/EventsTab.tsx

@@ -0,0 +1,128 @@
+import { useState } from "react";
+import type { SpanNode } from "../../types.js";
+import { formatDuration } from "../../utils/time.js";
+import { formatAttributeValue } from "../../utils/attributes.js";
+
+export interface EventsTabProps {
+  span: SpanNode;
+}
+
+function formatRelativeTime(eventTimeMs: number, spanStartMs: number): string {
+  const relativeMs = eventTimeMs - spanStartMs;
+  const prefix = relativeMs < 0 ? "-" : "+";
+  return `${prefix}${formatDuration(Math.abs(relativeMs))}`;
+}
+
+export function EventsTab({ span }: EventsTabProps) {
+  const [expandedEvents, setExpandedEvents] = useState<Set<number>>(new Set());
+
+  const toggleEventExpanded = (index: number) => {
+    setExpandedEvents((prev) => {
+      const next = new Set(prev);
+      if (next.has(index)) next.delete(index);
+      else next.add(index);
+      return next;
+    });
+  };
+
+  if (!span.events || span.events.length === 0) {
+    return (
+      <div className="text-sm text-muted-foreground text-center py-8">
+        No events available
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-3">
+      {span.events.map((event, index) => {
+        const isExpanded = expandedEvents.has(index);
+        const hasAttributes =
+          event.attributes && Object.keys(event.attributes).length > 0;
+        const relativeTime = formatRelativeTime(
+          event.timeUnixMs,
+          span.startTimeUnixMs
+        );
+
+        return (
+          <div
+            key={index}
+            className="border border-border rounded-lg overflow-hidden"
+          >
+            <div className="bg-muted p-3">
+              <div className="flex items-start justify-between gap-2">
+                <div className="flex-1 min-w-0">
+                  <div className="font-medium text-sm text-foreground truncate">
+                    {event.name}
+                  </div>
+                  <div className="text-xs text-muted-foreground mt-1 font-mono">
+                    {relativeTime} from span start
+                  </div>
+                </div>
+                {hasAttributes && (
+                  <button
+                    onClick={() => toggleEventExpanded(index)}
+                    className="p-1 hover:bg-muted/80 rounded transition-colors"
+                    aria-label={
+                      isExpanded ? "Collapse attributes" : "Expand attributes"
+                    }
+                    aria-expanded={isExpanded}
+                  >
+                    <svg
+                      className={`w-4 h-4 text-muted-foreground transition-transform ${isExpanded ? "rotate-180" : ""}`}
+                      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>
+            </div>
+
+            {hasAttributes && isExpanded && (
+              <div className="p-3 bg-background border-t border-border">
+                <div className="text-xs font-semibold text-foreground mb-2">
+                  Attributes
+                </div>
+                <div className="space-y-2">
+                  {Object.entries(event.attributes).map(([key, value]) => (
+                    <div
+                      key={key}
+                      className="grid grid-cols-[minmax(100px,1fr)_2fr] gap-3 text-xs"
+                    >
+                      <div className="font-mono font-medium text-foreground break-words">
+                        {key}
+                      </div>
+                      <div className="text-foreground break-words">
+                        {typeof value === "object" ? (
+                          <pre className="text-xs bg-muted p-2 rounded border border-border overflow-x-auto">
+                            {formatAttributeValue(value)}
+                          </pre>
+                        ) : (
+                          <span>{formatAttributeValue(value)}</span>
+                        )}
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {!hasAttributes && (
+              <div className="px-3 pb-3 text-xs text-muted-foreground italic">
+                No attributes
+              </div>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}