@workflow/web-shared 5.0.0-beta.4 → 5.0.0-beta.41

package/src/components/new-trace-viewer/context.tsx

@@ -1,92 +0,0 @@
-'use client';
-
-import {
-  createContext,
-  type ReactNode,
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useState,
-} from 'react';
-import type { Span } from '../trace-viewer/types';
-
-interface ActiveSpanContextValue {
-  activeSpanId: string | null;
-  activeSpan: Span | null;
-  setActiveSpan: (spanId: string) => void;
-  clearActiveSpan: () => void;
-}
-
-const ActiveSpanContext = createContext<ActiveSpanContextValue | null>(null);
-ActiveSpanContext.displayName = 'ActiveSpanContext';
-
-export function ActiveSpanProvider({
-  spans,
-  children,
-}: {
-  spans: Span[];
-  children: ReactNode;
-}) {
-  const [activeSpanId, setActiveSpanId] = useState<string | null>(
-    spans[0]?.spanId ?? null
-  );
-
-  useEffect(() => {
-    setActiveSpanId((currentSpanId) => {
-      if (!currentSpanId) {
-        return null;
-      }
-
-      const hasCurrentSpan = spans.some(
-        (span) => span.spanId === currentSpanId
-      );
-      if (hasCurrentSpan) {
-        return currentSpanId;
-      }
-
-      return null;
-    });
-  }, [spans]);
-
-  const activeSpan = useMemo(() => {
-    if (!activeSpanId) {
-      return null;
-    }
-
-    return spans.find((span) => span.spanId === activeSpanId) ?? null;
-  }, [activeSpanId, spans]);
-
-  const setActiveSpan = useCallback((spanId: string) => {
-    setActiveSpanId(spanId);
-  }, []);
-
-  const clearActiveSpan = useCallback(() => {
-    setActiveSpanId(null);
-  }, []);
-
-  const value = useMemo<ActiveSpanContextValue>(
-    () => ({
-      activeSpanId,
-      activeSpan,
-      setActiveSpan,
-      clearActiveSpan,
-    }),
-    [activeSpanId, activeSpan, setActiveSpan, clearActiveSpan]
-  );
-
-  return (
-    <ActiveSpanContext.Provider value={value}>
-      {children}
-    </ActiveSpanContext.Provider>
-  );
-}
-
-export const useActiveSpan = (): ActiveSpanContextValue => {
-  const context = useContext(ActiveSpanContext);
-  if (!context) {
-    throw new Error('useActiveSpan must be used within ActiveSpanProvider');
-  }
-
-  return context;
-};

package/src/components/new-trace-viewer/detail-panel.tsx

@@ -1,58 +0,0 @@
-'use client';
-
-import { X } from 'lucide-react';
-import type { ReactNode } from 'react';
-import type { Span } from '../trace-viewer/types';
-import { formatDuration, getHighResInMs } from '../trace-viewer/util/timing';
-import { getSpanDurationMs } from './utils';
-
-interface DetailPanelProps {
-  span: Span;
-  rootStart: number;
-  onClose: () => void;
-}
-
-export function DetailPanel({
-  span,
-  rootStart,
-  onClose,
-}: DetailPanelProps): ReactNode {
-  const startMs = getHighResInMs(span.startTime);
-  const durationMs = getSpanDurationMs(span);
-  const offsetMs = startMs - rootStart;
-
-  return (
-    <aside className="grid h-full max-h-full grid-rows-[2.5rem_1fr] bg-background-200">
-      <div className="flex items-center justify-between px-3 border-b border-gray-alpha-400">
-        <span className="text-sm font-medium text-gray-1000 truncate">
-          {span.name}
-        </span>
-        <button
-          type="button"
-          className="p-1 rounded-md text-gray-900 hover:text-gray-1000 hover:bg-gray-alpha-200 transition-colors"
-          onClick={onClose}
-        >
-          <X className="w-4 h-4" />
-        </button>
-      </div>
-      <div className="overflow-y-auto p-3 space-y-3">
-        <dl className="grid grid-cols-[auto_1fr] gap-x-3 gap-y-1.5 text-sm">
-          <dt className="text-gray-900">Resource</dt>
-          <dd className="text-gray-1000 font-mono">{span.resource}</dd>
-          <dt className="text-gray-900">Duration</dt>
-          <dd className="text-gray-1000 tabular-nums font-mono">
-            {formatDuration(durationMs)}
-          </dd>
-          <dt className="text-gray-900">Offset</dt>
-          <dd className="text-gray-1000 tabular-nums font-mono">
-            +{formatDuration(offsetMs)}
-          </dd>
-          <dt className="text-gray-900">Status</dt>
-          <dd className="text-gray-1000 font-mono">
-            {span.status.code === 2 ? 'Error' : 'OK'}
-          </dd>
-        </dl>
-      </div>
-    </aside>
-  );
-}