@kopai/ui 0.0.5 → 0.2.0

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

@@ -0,0 +1,210 @@
+import { useState } from "react";
+import type { SpanNode } from "../../types.js";
+import { formatAttributeValue } from "../../utils/attributes.js";
+
+export interface LinksTabProps {
+  span: SpanNode;
+  onLinkClick?: (traceId: string, spanId: string) => void;
+}
+
+function truncateId(id: string): string {
+  return id.length > 8 ? `${id.substring(0, 8)}...` : id;
+}
+
+export function LinksTab({ span, onLinkClick }: LinksTabProps) {
+  const [expandedLinks, setExpandedLinks] = useState<Set<number>>(new Set());
+  const [copiedId, setCopiedId] = useState<string | null>(null);
+
+  const toggleLinkExpanded = (index: number) => {
+    setExpandedLinks((prev) => {
+      const next = new Set(prev);
+      if (next.has(index)) next.delete(index);
+      else next.add(index);
+      return next;
+    });
+  };
+
+  const copyToClipboard = async (text: string, type: string, index: number) => {
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopiedId(`${type}-${index}-${text}`);
+      setTimeout(() => setCopiedId(null), 2000);
+    } catch (err) {
+      console.error("Failed to copy:", err);
+    }
+  };
+
+  if (!span.links || span.links.length === 0) {
+    return (
+      <div className="text-sm text-muted-foreground text-center py-8">
+        No links available
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-3">
+      {span.links.map((link, index) => {
+        const isExpanded = expandedLinks.has(index);
+        const hasAttributes =
+          link.attributes && Object.keys(link.attributes).length > 0;
+
+        return (
+          <div
+            key={index}
+            className="border border-border rounded-lg overflow-hidden"
+          >
+            <div className="bg-muted p-3">
+              <div className="mb-2">
+                <div className="text-xs font-semibold text-muted-foreground mb-1">
+                  Trace ID
+                </div>
+                <div className="flex items-center gap-2">
+                  <code
+                    className="text-xs font-mono text-foreground bg-background px-2 py-1 rounded border border-border flex-1 truncate"
+                    title={link.traceId}
+                  >
+                    {truncateId(link.traceId)}
+                  </code>
+                  <button
+                    onClick={() =>
+                      copyToClipboard(link.traceId, "trace", index)
+                    }
+                    className="p-1 hover:bg-muted/80 rounded transition-colors"
+                    aria-label="Copy trace ID"
+                  >
+                    <svg
+                      className={`w-4 h-4 ${copiedId === `trace-${index}-${link.traceId}` ? "text-green-600" : "text-muted-foreground"}`}
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
+                    >
+                      {copiedId === `trace-${index}-${link.traceId}` ? (
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth={2}
+                          d="M5 13l4 4L19 7"
+                        />
+                      ) : (
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth={2}
+                          d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
+                        />
+                      )}
+                    </svg>
+                  </button>
+                </div>
+              </div>
+
+              <div className="mb-2">
+                <div className="text-xs font-semibold text-muted-foreground mb-1">
+                  Span ID
+                </div>
+                <div className="flex items-center gap-2">
+                  <code
+                    className="text-xs font-mono text-foreground bg-background px-2 py-1 rounded border border-border flex-1 truncate"
+                    title={link.spanId}
+                  >
+                    {truncateId(link.spanId)}
+                  </code>
+                  <button
+                    onClick={() => copyToClipboard(link.spanId, "span", index)}
+                    className="p-1 hover:bg-muted/80 rounded transition-colors"
+                    aria-label="Copy span ID"
+                  >
+                    <svg
+                      className={`w-4 h-4 ${copiedId === `span-${index}-${link.spanId}` ? "text-green-600" : "text-muted-foreground"}`}
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
+                    >
+                      {copiedId === `span-${index}-${link.spanId}` ? (
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth={2}
+                          d="M5 13l4 4L19 7"
+                        />
+                      ) : (
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth={2}
+                          d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
+                        />
+                      )}
+                    </svg>
+                  </button>
+                </div>
+              </div>
+
+              {onLinkClick && (
+                <button
+                  onClick={() => onLinkClick(link.traceId, link.spanId)}
+                  className="w-full mt-2 px-3 py-2 bg-primary text-primary-foreground text-sm font-medium rounded hover:bg-primary/90 transition-colors"
+                >
+                  Navigate to Span
+                </button>
+              )}
+
+              {hasAttributes && (
+                <button
+                  onClick={() => toggleLinkExpanded(index)}
+                  className="w-full mt-2 px-3 py-1.5 text-xs text-foreground bg-background border border-border rounded hover:bg-muted transition-colors flex items-center justify-center gap-1"
+                  aria-expanded={isExpanded}
+                >
+                  <span>
+                    {isExpanded ? "Hide" : "Show"} Attributes (
+                    {Object.keys(link.attributes).length})
+                  </span>
+                  <svg
+                    className={`w-3 h-3 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>
+
+            {hasAttributes && isExpanded && (
+              <div className="p-3 bg-background border-t border-border">
+                <div className="space-y-2">
+                  {Object.entries(link.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>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}

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

@@ -0,0 +1,174 @@
+import { useState, useCallback } from "react";
+import type { SpanNode } from "../../types.js";
+import { AttributesTab } from "./AttributesTab.js";
+import { EventsTab } from "./EventsTab.js";
+import { LinksTab } from "./LinksTab.js";
+
+export interface DetailPaneProps {
+  span: SpanNode;
+  onClose: () => void;
+  onLinkClick?: (traceId: string, spanId: string) => void;
+  initialTab?: "attributes" | "events" | "links";
+}
+
+type TabType = "attributes" | "events" | "links";
+
+export function DetailPane({
+  span,
+  onClose,
+  onLinkClick,
+  initialTab = "attributes",
+}: DetailPaneProps) {
+  const [activeTab, setActiveTab] = useState<TabType>(initialTab);
+  const [copiedId, setCopiedId] = useState(false);
+
+  const handleTabChange = useCallback((tab: TabType) => {
+    setActiveTab(tab);
+  }, []);
+
+  const handleCopySpanId = useCallback(async () => {
+    try {
+      await navigator.clipboard.writeText(span.spanId);
+      setCopiedId(true);
+      setTimeout(() => setCopiedId(false), 2000);
+    } catch (err) {
+      console.error("Failed to copy span ID:", err);
+    }
+  }, [span.spanId]);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    },
+    [onClose]
+  );
+
+  return (
+    <div
+      className="flex flex-col h-full bg-background border-l border-border"
+      onKeyDown={handleKeyDown}
+      tabIndex={-1}
+      role="complementary"
+      aria-label="Span details"
+    >
+      {/* Header */}
+      <div className="p-4 border-b border-border">
+        <div className="flex items-center justify-between mb-3">
+          <h2 className="text-lg font-semibold text-foreground truncate">
+            Span Details
+          </h2>
+          <button
+            onClick={onClose}
+            className="p-1 hover:bg-muted rounded transition-colors"
+            aria-label="Close detail pane"
+            title="Close (Esc)"
+          >
+            <svg
+              className="w-5 h-5 text-muted-foreground"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M6 18L18 6M6 6l12 12"
+              />
+            </svg>
+          </button>
+        </div>
+        <div className="mb-2">
+          <div
+            className="text-sm font-medium text-foreground truncate"
+            title={span.name}
+          >
+            {span.name}
+          </div>
+        </div>
+        <div className="flex items-center gap-2">
+          <span className="text-xs text-muted-foreground">Span ID:</span>
+          <code
+            className="text-xs font-mono text-foreground bg-muted px-2 py-1 rounded flex-1 truncate"
+            title={span.spanId}
+          >
+            {span.spanId}
+          </code>
+          <button
+            onClick={handleCopySpanId}
+            className="p-1 hover:bg-muted rounded transition-colors"
+            aria-label="Copy span ID"
+          >
+            <svg
+              className={`w-4 h-4 ${copiedId ? "text-green-600 dark:text-green-400" : "text-muted-foreground"}`}
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              {copiedId ? (
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M5 13l4 4L19 7"
+                />
+              ) : (
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
+                />
+              )}
+            </svg>
+          </button>
+        </div>
+      </div>
+
+      {/* Tabs */}
+      <div
+        className="flex border-b border-border"
+        role="tablist"
+        aria-label="Span detail tabs"
+      >
+        {(["attributes", "events", "links"] as const).map((tab) => {
+          const count =
+            tab === "attributes"
+              ? Object.keys(span.attributes).length
+              : tab === "events"
+                ? span.events.length
+                : span.links.length;
+          return (
+            <button
+              key={tab}
+              role="tab"
+              aria-selected={activeTab === tab}
+              onClick={() => handleTabChange(tab)}
+              className={`px-4 py-2 text-sm font-medium transition-colors ${
+                activeTab === tab
+                  ? "text-blue-600 dark:text-blue-400 border-b-2 border-blue-600 dark:border-blue-400"
+                  : "text-muted-foreground hover:text-foreground"
+              }`}
+            >
+              {tab.charAt(0).toUpperCase() + tab.slice(1)}
+              {count > 0 && (
+                <span className="ml-1 text-xs text-muted-foreground">
+                  ({count})
+                </span>
+              )}
+            </button>
+          );
+        })}
+      </div>
+
+      {/* Content */}
+      <div className="flex-1 overflow-auto p-4">
+        {activeTab === "attributes" && <AttributesTab span={span} />}
+        {activeTab === "events" && <EventsTab span={span} />}
+        {activeTab === "links" && (
+          <LinksTab span={span} onLinkClick={onLinkClick} />
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,173 @@
+import { memo } from "react";
+import type { SpanNode } from "../types.js";
+import { TimelineBar } from "./TimelineBar.js";
+import { formatDuration } from "../utils/time.js";
+
+export interface SpanRowProps {
+  span: SpanNode;
+  level: number;
+  isCollapsed: boolean;
+  isSelected: boolean;
+  isHovered?: boolean;
+  isParentOfHovered?: boolean;
+  relativeStart: number;
+  relativeDuration: number;
+  onClick: () => void;
+  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(" ");
+}
+
+export const SpanRow = memo(function SpanRow({
+  span,
+  level,
+  isCollapsed,
+  isSelected,
+  isParentOfHovered = false,
+  relativeStart,
+  relativeDuration,
+  onClick,
+  onToggleCollapse,
+  onMouseEnter,
+  onMouseLeave,
+}: SpanRowProps) {
+  const hasChildren = span.children.length > 0;
+  const isError = span.status === "ERROR";
+  const httpContext = getHttpContext(span);
+
+  return (
+    <div
+      className={`flex h-8 border-b border-border hover:bg-muted cursor-pointer ${
+        isSelected
+          ? "bg-blue-100 dark:bg-blue-900/30 hover:bg-blue-100 dark:hover:bg-blue-900/30"
+          : ""
+      }`}
+      onClick={onClick}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+      role="treeitem"
+      aria-expanded={hasChildren ? !isCollapsed : undefined}
+      aria-selected={isSelected}
+      aria-label={`${span.name}, ${span.serviceName}, ${formatDuration(span.durationMs)}${isError ? ", error" : ""}`}
+      aria-level={level + 1}
+    >
+      {/* Left side: Service name + span name with indentation */}
+      <div className="flex items-center min-w-0 flex-shrink-0 w-96 px-2 relative z-10">
+        {Array.from({ length: level }).map((_, i) => (
+          <div
+            key={i}
+            className={`w-4 h-full border-l flex-shrink-0 ${
+              isParentOfHovered ? "border-blue-500 border-l-2" : "border-border"
+            }`}
+          />
+        ))}
+
+        {hasChildren ? (
+          <button
+            className="w-4 h-4 flex items-center justify-center flex-shrink-0 text-muted-foreground hover:text-foreground"
+            onClick={(e) => {
+              e.stopPropagation();
+              onToggleCollapse();
+            }}
+            aria-label={isCollapsed ? "Expand" : "Collapse"}
+          >
+            {isCollapsed ? (
+              <svg
+                className="w-3 h-3"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M9 5l7 7-7 7"
+                />
+              </svg>
+            ) : (
+              <svg
+                className="w-3 h-3"
+                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 className="w-4 flex-shrink-0" />
+        )}
+
+        {isError && (
+          <svg
+            className="w-4 h-4 text-red-500 flex-shrink-0 mr-1"
+            fill="currentColor"
+            viewBox="0 0 20 20"
+          >
+            <path
+              fillRule="evenodd"
+              d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
+              clipRule="evenodd"
+            />
+          </svg>
+        )}
+
+        <span className="text-xs text-muted-foreground flex-shrink-0 mr-2">
+          {span.serviceName}
+        </span>
+
+        <span className="text-sm font-medium truncate flex-1 min-w-0 text-foreground">
+          {span.name}
+        </span>
+
+        {hasChildren && (
+          <span className="text-xs text-muted-foreground flex-shrink-0 ml-1">
+            ({span.children.length})
+          </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>
+      </div>
+
+      {/* Right side: Timeline bar */}
+      <div className="flex-1 min-w-0 px-2">
+        <TimelineBar
+          span={span}
+          relativeStart={relativeStart}
+          relativeDuration={relativeDuration}
+        />
+      </div>
+    </div>
+  );
+});

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

@@ -0,0 +1,41 @@
+import type { SpanNode } from "../types.js";
+import { getSpanBarColor } from "../utils/colors.js";
+import { formatDuration } from "../utils/time.js";
+import { Tooltip } from "./Tooltip.js";
+
+export interface TimelineBarProps {
+  span: SpanNode;
+  relativeStart: number;
+  relativeDuration: number;
+}
+
+export function TimelineBar({
+  span,
+  relativeStart,
+  relativeDuration,
+}: TimelineBarProps) {
+  const isError = span.status === "ERROR";
+  const barColor = getSpanBarColor(span.serviceName, isError);
+
+  const leftPercent = relativeStart * 100;
+  const widthPercent = Math.max(0.2, relativeDuration * 100);
+
+  const tooltipText = `${span.name}\n${formatDuration(span.durationMs)}\nStatus: ${isError ? "ERROR" : "OK"}`;
+
+  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"
+            style={{
+              left: `${leftPercent}%`,
+              width: `max(2px, ${widthPercent}%)`,
+              backgroundColor: barColor,
+            }}
+          />
+        </div>
+      </Tooltip>
+    </div>
+  );
+}

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

@@ -0,0 +1,42 @@
+import { useState } from "react";
+import { createPortal } from "react-dom";
+
+export interface TooltipProps {
+  content: string;
+  children: React.ReactNode;
+}
+
+export function Tooltip({ content, children }: TooltipProps) {
+  const [isVisible, setIsVisible] = useState(false);
+  const [position, setPosition] = useState({ x: 0, y: 0 });
+
+  const handleMouseMove = (e: React.MouseEvent) => {
+    setPosition({ x: e.clientX + 5, y: e.clientY + 5 });
+  };
+
+  return (
+    <>
+      <div
+        onMouseEnter={() => setIsVisible(true)}
+        onMouseLeave={() => setIsVisible(false)}
+        onMouseMove={handleMouseMove}
+        className="inline-block"
+      >
+        {children}
+      </div>
+      {isVisible &&
+        createPortal(
+          <div
+            className="fixed z-50 px-2 py-1 text-xs text-primary-foreground bg-primary rounded shadow-lg pointer-events-none whitespace-pre-line"
+            style={{
+              left: `${position.x}px`,
+              top: `${position.y}px`,
+            }}
+          >
+            {content}
+          </div>,
+          document.body
+        )}
+    </>
+  );
+}