[draft] testing rough new trace viewer

packages/web-shared/src/components/trace-2/detail-panel.tsx

@@ -0,0 +1,146 @@
+'use client';
+
+import { X } from 'lucide-react';
+import type { ReactNode } from 'react';
+import type { FlatSpan } from './types';
+import { formatDuration, RESOURCE_COLORS } from './utils';
+
+function DetailOverview({ span }: { span: FlatSpan }): ReactNode {
+  return (
+    <div className="flex flex-col gap-2">
+      <div className="font-sans text-[11px] font-medium leading-4 text-gray-900 uppercase tracking-[0.5px]">
+        Overview
+      </div>
+      <div className="flex items-start gap-3 text-[13px] leading-5">
+        <span className="font-sans text-gray-900 whitespace-nowrap min-w-20 shrink-0">
+          Type
+        </span>
+        <span className="font-mono text-xs text-gray-1000 break-all">
+          {span.resourceType}
+        </span>
+      </div>
+      <div className="flex items-start gap-3 text-[13px] leading-5">
+        <span className="font-sans text-gray-900 whitespace-nowrap min-w-20 shrink-0">
+          Duration
+        </span>
+        <span className="font-mono text-xs text-gray-1000 break-all">
+          {formatDuration(span.duration)}
+        </span>
+      </div>
+      <div className="flex items-start gap-3 text-[13px] leading-5">
+        <span className="font-sans text-gray-900 whitespace-nowrap min-w-20 shrink-0">
+          Status
+        </span>
+        <span className="font-mono text-xs text-gray-1000 break-all">
+          {span.isErrored ? 'Errored' : 'OK'}
+        </span>
+      </div>
+    </div>
+  );
+}
+
+function DetailEvents({
+  span,
+  rootStart,
+}: {
+  span: FlatSpan;
+  rootStart: number;
+}): ReactNode {
+  if (span.events.length === 0) return null;
+
+  const colors = RESOURCE_COLORS[span.resourceType];
+  const dotColor = span.isErrored ? 'var(--ds-red-700)' : colors.bar;
+
+  return (
+    <div className="flex flex-col gap-2">
+      <div className="font-sans text-[11px] font-medium leading-4 text-gray-900 uppercase tracking-[0.5px]">
+        Events
+      </div>
+      {span.events.map((event, i) => (
+        <div
+          key={i}
+          className="flex items-center gap-2 py-1.5 border-b border-gray-alpha-200 text-[13px] last:border-b-0"
+        >
+          <div
+            className="size-1.5 rounded-full shrink-0"
+            style={{ background: dotColor }}
+          />
+          <span className="font-sans text-gray-1000 flex-1">{event.name}</span>
+          <span className="font-mono text-xs text-gray-900 shrink-0">
+            {formatDuration(event.timestamp - rootStart)}
+          </span>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function DetailAttributes({ span }: { span: FlatSpan }): ReactNode {
+  const entries = Object.entries(span.attributes).filter(
+    ([key]) => key !== 'resource' && key !== 'data'
+  );
+  if (entries.length === 0) return null;
+
+  return (
+    <div className="flex flex-col gap-2">
+      <div className="font-sans text-[11px] font-medium leading-4 text-gray-900 uppercase tracking-[0.5px]">
+        Attributes
+      </div>
+      <div className="flex flex-col">
+        {entries.map(([key, value]) => (
+          <div
+            key={key}
+            className="grid grid-cols-[minmax(100px,auto)_1fr] gap-3 py-1 border-b border-gray-alpha-100 text-[13px] leading-5 last:border-b-0"
+          >
+            <span className="font-mono text-xs text-gray-900 break-all">
+              {key}
+            </span>
+            <span className="font-mono text-xs text-gray-1000 break-all">
+              {typeof value === 'string' ? value : JSON.stringify(value)}
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export function DetailPanel({
+  span,
+  rootStart,
+  onClose,
+}: {
+  span: FlatSpan;
+  rootStart: number;
+  onClose: () => void;
+}): ReactNode {
+  const colors = RESOURCE_COLORS[span.resourceType];
+  const iconBg = span.isErrored ? 'var(--ds-red-200)' : colors.bg;
+
+  return (
+    <div className="border-l border-gray-alpha-400 bg-background-100 flex flex-col min-h-0 overflow-y-auto">
+      <div className="flex items-center justify-between px-4 py-3 border-b border-gray-alpha-400 sticky top-0 bg-background-100 z-[2]">
+        <div className="font-sans text-sm font-medium leading-5 text-gray-1000 flex items-center gap-2 min-w-0 overflow-hidden">
+          <div
+            className="size-5 rounded-sm shrink-0"
+            style={{ background: iconBg }}
+          />
+          <span className="truncate">{span.name}</span>
+        </div>
+        <button
+          className="flex items-center justify-center size-7 border-none bg-transparent cursor-pointer rounded-md text-gray-900 shrink-0 hover:bg-gray-alpha-200 hover:text-gray-1000"
+          onClick={onClose}
+          type="button"
+          aria-label="Close panel"
+        >
+          <X size={16} />
+        </button>
+      </div>
+      <div className="p-4 flex flex-col gap-5">
+        <DetailOverview span={span} />
+        <DetailEvents span={span} rootStart={rootStart} />
+        <DetailAttributes span={span} />
+      </div>
+    </div>
+  );
+}

packages/web-shared/src/components/trace-2/event-list.tsx

@@ -0,0 +1,160 @@
+'use client';
+
+import { Code, Moon, Workflow, Webhook } from 'lucide-react';
+import type { ReactNode } from 'react';
+import { memo } from 'react';
+import { cn } from '../../lib/utils';
+import type { FlatSpan, ResourceType } from './types';
+import { formatDuration, RESOURCE_COLORS } from './utils';
+
+function ResourceIcon({
+  type,
+  isErrored,
+}: {
+  type: ResourceType;
+  isErrored: boolean;
+}): ReactNode {
+  const colors = RESOURCE_COLORS[type];
+  const bg = isErrored ? 'var(--ds-red-200)' : colors.bg;
+  const iconColor = isErrored ? 'var(--ds-red-900)' : colors.icon;
+
+  const iconProps = { size: 14, strokeWidth: 2, color: iconColor };
+
+  let icon: ReactNode;
+  switch (type) {
+    case 'run':
+      icon = <Workflow {...iconProps} />;
+      break;
+    case 'step':
+      icon = <Code {...iconProps} />;
+      break;
+    case 'sleep':
+      icon = <Moon {...iconProps} />;
+      break;
+    case 'hook':
+      icon = <Webhook {...iconProps} />;
+      break;
+    default:
+      icon = <Code {...iconProps} />;
+  }
+
+  return (
+    <div
+      className="flex items-center justify-center size-[22px] min-w-[22px] rounded-sm shrink-0"
+      style={{ background: bg }}
+    >
+      {icon}
+    </div>
+  );
+}
+
+function Connectors({ span }: { span: FlatSpan }): ReactNode {
+  if (span.depth === 0) return null;
+
+  const activeConnectorSet = new Set(
+    span.activeConnectors.filter(
+      (connectorDepth) => connectorDepth <= span.depth
+    )
+  );
+  const shouldRenderParentConnector = span.hasParentConnector;
+
+  const slots: ReactNode[] = [];
+
+  for (let depth = 1; depth <= span.depth; depth++) {
+    const isParentConnectorSlot =
+      shouldRenderParentConnector && depth === span.depth;
+    if (isParentConnectorSlot) {
+      slots.push(
+        <div key={depth} className="w-5 min-w-5 relative h-9">
+          <div
+            className={cn(
+              'absolute top-0 left-[10px] w-px bg-gray-400',
+              span.isLastChild ? 'h-1/2' : 'h-full'
+            )}
+          />
+          <div className="absolute top-1/2 left-[10px] w-[10px] h-px bg-gray-400" />
+        </div>
+      );
+      continue;
+    }
+
+    slots.push(
+      <div key={depth} className="w-5 min-w-5 relative h-9">
+        {activeConnectorSet.has(depth) && (
+          <div className="absolute top-0 left-[10px] w-px h-full bg-gray-400" />
+        )}
+      </div>
+    );
+  }
+
+  return <div className="flex items-stretch h-full shrink-0">{slots}</div>;
+}
+
+const EventRow = memo(function EventRow({
+  span,
+  isSelected,
+  onClick,
+}: {
+  span: FlatSpan;
+  isSelected: boolean;
+  onClick: () => void;
+}): ReactNode {
+  return (
+    <div
+      className={cn(
+        'flex items-center h-9 cursor-pointer select-none pr-3 relative transition-[background-color] duration-[120ms] ease-in-out',
+        isSelected ? 'bg-gray-alpha-200' : 'hover:bg-gray-alpha-100'
+      )}
+      onClick={onClick}
+    >
+      <Connectors span={span} />
+      <div className="flex items-center gap-2 flex-1 min-w-0">
+        <ResourceIcon type={span.resourceType} isErrored={span.isErrored} />
+        <span
+          className={cn(
+            'font-sans text-sm font-normal leading-5 truncate flex-1 min-w-0',
+            span.isErrored ? 'text-red-900' : 'text-gray-1000'
+          )}
+        >
+          {span.name}
+        </span>
+        <span
+          className={cn(
+            'font-mono text-xs font-normal leading-4 whitespace-nowrap shrink-0',
+            span.isErrored ? 'text-red-800' : 'text-gray-900'
+          )}
+        >
+          {formatDuration(span.duration)}
+        </span>
+      </div>
+    </div>
+  );
+});
+
+export function EventList({
+  spans,
+  selectedId,
+  onSelect,
+}: {
+  spans: FlatSpan[];
+  selectedId: string | null;
+  onSelect: (spanId: string) => void;
+}): ReactNode {
+  return (
+    <>
+      <div className="sticky top-0 z-[4] bg-background-100 border-b border-gray-alpha-400 h-8 min-h-8 flex items-center px-4" />
+      <div className="block">
+        {spans.map((span) => {
+          return (
+            <EventRow
+              key={span.spanId}
+              span={span}
+              isSelected={selectedId === span.spanId}
+              onClick={() => onSelect(span.spanId)}
+            />
+          );
+        })}
+      </div>
+    </>
+  );
+}

packages/web-shared/src/components/trace-2/index.ts

@@ -0,0 +1,3 @@
+export { TraceViewer2 } from './trace-viewer-2';
+export type { TraceViewer2Props } from './trace-viewer-2';
+export type { FlatSpan, ResourceType } from './types';