@workflow/web-shared 5.0.0-beta.1 → 5.0.0-beta.3

package/src/components/event-list-view.tsx

@@ -9,7 +9,7 @@ import { Virtuoso, type VirtuosoHandle } from 'react-virtuoso';
 import { isEncryptedMarker } from '../lib/hydration';
 import { DecryptButton } from './ui/decrypt-button';
 import { formatDuration } from '../lib/utils';
-import { DataInspector } from './ui/data-inspector';
+import { DataInspector, DecryptClickContext } from './ui/data-inspector';
 import {
   ErrorStackBlock,
   isStructuredErrorWithStack,
@@ -703,6 +703,8 @@ interface EventsListProps {
   onDecrypt?: () => void;
   /** Whether the encryption key is currently being fetched. */
   isDecrypting?: boolean;
+  /** Run-level hint: the run contains encrypted data (from probe). */
+  hasEncryptedData?: boolean;
 }
 
 function EventRow({
@@ -1136,6 +1138,7 @@ export function EventListView({
   onSortOrderChange,
   onDecrypt,
   isDecrypting = false,
+  hasEncryptedData: hasEncryptedDataProp = false,
 }: EventsListProps) {
   const [internalSortOrder, setInternalSortOrder] = useState<'asc' | 'desc'>(
     'asc'
@@ -1180,7 +1183,8 @@ export function EventListView({
     setFoundEncryptedInLazyData(true);
   }, []);
 
-  const hasEncryptedData = hasEncryptedInlineData || foundEncryptedInLazyData;
+  const hasEncryptedData =
+    hasEncryptedDataProp || hasEncryptedInlineData || foundEncryptedInLazyData;
 
   const { correlationNameMap, workflowName } = useMemo(
     () => buildNameMaps(events ?? null, run ?? null),
@@ -1393,195 +1397,199 @@ export function EventListView({
   }
 
   return (
-    <div className="h-full flex flex-col overflow-hidden">
-      <style>{`@keyframes workflow-dot-pulse{0%{transform:scale(1);opacity:.7}70%,100%{transform:scale(2.2);opacity:0}}`}</style>
-      {/* Search bar + sort */}
-      <div
-        style={{
-          padding: 6,
-          backgroundColor: 'var(--ds-background-100)',
-          display: 'flex',
-          gap: 6,
-        }}
-      >
-        <label
+    <DecryptClickContext.Provider
+      value={onDecrypt ? { onDecrypt, isDecrypting } : undefined}
+    >
+      <div className="h-full flex flex-col overflow-hidden">
+        <style>{`@keyframes workflow-dot-pulse{0%{transform:scale(1);opacity:.7}70%,100%{transform:scale(2.2);opacity:0}}`}</style>
+        {/* Search bar + sort */}
+        <div
           style={{
+            padding: 6,
+            backgroundColor: 'var(--ds-background-100)',
             display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            borderRadius: 6,
-            boxShadow: '0 0 0 1px var(--ds-gray-alpha-400)',
-            background: 'var(--ds-background-100)',
-            height: 40,
-            flex: 1,
-            minWidth: 0,
+            gap: 6,
           }}
         >
-          <div
+          <label
             style={{
-              width: 40,
-              height: 40,
               display: 'flex',
               alignItems: 'center',
               justifyContent: 'center',
-              color: 'var(--ds-gray-800)',
-              flexShrink: 0,
+              borderRadius: 6,
+              boxShadow: '0 0 0 1px var(--ds-gray-alpha-400)',
+              background: 'var(--ds-background-100)',
+              height: 40,
+              flex: 1,
+              minWidth: 0,
             }}
           >
-            <svg
-              width={16}
-              height={16}
-              viewBox="0 0 16 16"
-              fill="none"
-              aria-hidden="true"
-              focusable="false"
+            <div
+              style={{
+                width: 40,
+                height: 40,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                color: 'var(--ds-gray-800)',
+                flexShrink: 0,
+              }}
             >
-              <circle
-                cx="7"
-                cy="7"
-                r="4.5"
-                stroke="currentColor"
-                strokeWidth="1.5"
-              />
-              <path
-                d="M11.5 11.5L14 14"
-                stroke="currentColor"
-                strokeWidth="1.5"
-                strokeLinecap="round"
-              />
-            </svg>
+              <svg
+                width={16}
+                height={16}
+                viewBox="0 0 16 16"
+                fill="none"
+                aria-hidden="true"
+                focusable="false"
+              >
+                <circle
+                  cx="7"
+                  cy="7"
+                  r="4.5"
+                  stroke="currentColor"
+                  strokeWidth="1.5"
+                />
+                <path
+                  d="M11.5 11.5L14 14"
+                  stroke="currentColor"
+                  strokeWidth="1.5"
+                  strokeLinecap="round"
+                />
+              </svg>
+            </div>
+            <input
+              type="search"
+              placeholder="Search by name, event type, or ID…"
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              style={{
+                marginLeft: -16,
+                paddingInline: 12,
+                fontFamily: 'inherit',
+                fontSize: 14,
+                background: 'transparent',
+                border: 'none',
+                outline: 'none',
+                height: 40,
+                width: '100%',
+              }}
+            />
+          </label>
+          <MenuDropdown
+            options={SORT_OPTIONS}
+            value={effectiveSortOrder}
+            onChange={handleSortOrderChange}
+          />
+          {(hasEncryptedData || encryptionKey) && onDecrypt && (
+            <DecryptButton
+              decrypted={!!encryptionKey}
+              loading={isDecrypting}
+              onClick={onDecrypt}
+            />
+          )}
+        </div>
+
+        {/* Header */}
+        <div
+          className="flex items-center gap-0 text-[13px] font-medium h-10 border-b flex-shrink-0"
+          style={{
+            borderColor: 'var(--ds-gray-alpha-200)',
+            color: 'var(--ds-gray-900)',
+            backgroundColor: 'var(--ds-background-100)',
+          }}
+        >
+          <div className="flex-shrink-0" style={{ width: GUTTER_WIDTH }} />
+          <div className="w-5 flex-shrink-0" />
+          <div className="min-w-0 px-4" style={{ flex: '2 1 0%' }}>
+            Time
           </div>
-          <input
-            type="search"
-            placeholder="Search by name, event type, or ID…"
-            value={searchQuery}
-            onChange={(e) => setSearchQuery(e.target.value)}
-            style={{
-              marginLeft: -16,
-              paddingInline: 12,
-              fontFamily: 'inherit',
-              fontSize: 14,
-              background: 'transparent',
-              border: 'none',
-              outline: 'none',
-              height: 40,
-              width: '100%',
+          <div className="min-w-0 px-4" style={{ flex: '2 1 0%' }}>
+            Event Type
+          </div>
+          <div className="min-w-0 px-4" style={{ flex: '2 1 0%' }}>
+            Name
+          </div>
+          <div className="min-w-0 px-4" style={{ flex: '3 1 0%' }}>
+            Correlation ID
+          </div>
+          <div className="min-w-0 px-4" style={{ flex: '3 1 0%' }}>
+            Event ID
+          </div>
+        </div>
+
+        {/* Virtualized event rows or refetching skeleton */}
+        {isRefetching ? (
+          <RowsSkeleton />
+        ) : (
+          <Virtuoso
+            ref={virtuosoRef}
+            totalCount={sortedEvents.length}
+            overscan={20}
+            defaultItemHeight={40}
+            endReached={() => {
+              if (!hasMoreEvents || isLoadingMoreEvents) {
+                return;
+              }
+              void onLoadMoreEvents?.();
             }}
-          />
-        </label>
-        <MenuDropdown
-          options={SORT_OPTIONS}
-          value={effectiveSortOrder}
-          onChange={handleSortOrderChange}
-        />
-        {(hasEncryptedData || encryptionKey) && onDecrypt && (
-          <DecryptButton
-            decrypted={!!encryptionKey}
-            loading={isDecrypting}
-            onClick={onDecrypt}
+            itemContent={(index: number) => {
+              const ev = sortedEvents[index];
+              return (
+                <EventRow
+                  event={ev}
+                  index={index}
+                  isFirst={index === 0}
+                  isLast={index === sortedEvents.length - 1}
+                  isExpanded={expandedEventIds.has(ev.eventId)}
+                  onToggleExpand={toggleEventExpanded}
+                  activeGroupKey={activeGroupKey}
+                  selectedGroupKey={selectedGroupKey}
+                  selectedGroupRange={selectedGroupRange}
+                  correlationNameMap={correlationNameMap}
+                  workflowName={workflowName}
+                  durationMap={durationMap}
+                  onSelectGroup={onSelectGroup}
+                  onHoverGroup={onHoverGroup}
+                  onLoadEventData={onLoadEventData}
+                  cachedEventData={
+                    eventDataCacheRef.current.get(ev.eventId) ?? null
+                  }
+                  onCacheEventData={cacheEventData}
+                  encryptionKey={encryptionKey}
+                  onEncryptedDataDetected={handleEncryptedDataDetected}
+                />
+              );
+            }}
+            style={{ flex: 1, minHeight: 0 }}
           />
         )}
-      </div>
-
-      {/* Header */}
-      <div
-        className="flex items-center gap-0 text-[13px] font-medium h-10 border-b flex-shrink-0"
-        style={{
-          borderColor: 'var(--ds-gray-alpha-200)',
-          color: 'var(--ds-gray-900)',
-          backgroundColor: 'var(--ds-background-100)',
-        }}
-      >
-        <div className="flex-shrink-0" style={{ width: GUTTER_WIDTH }} />
-        <div className="w-5 flex-shrink-0" />
-        <div className="min-w-0 px-4" style={{ flex: '2 1 0%' }}>
-          Time
-        </div>
-        <div className="min-w-0 px-4" style={{ flex: '2 1 0%' }}>
-          Event Type
-        </div>
-        <div className="min-w-0 px-4" style={{ flex: '2 1 0%' }}>
-          Name
-        </div>
-        <div className="min-w-0 px-4" style={{ flex: '3 1 0%' }}>
-          Correlation ID
-        </div>
-        <div className="min-w-0 px-4" style={{ flex: '3 1 0%' }}>
-          Event ID
-        </div>
-      </div>
 
-      {/* Virtualized event rows or refetching skeleton */}
-      {isRefetching ? (
-        <RowsSkeleton />
-      ) : (
-        <Virtuoso
-          ref={virtuosoRef}
-          totalCount={sortedEvents.length}
-          overscan={20}
-          defaultItemHeight={40}
-          endReached={() => {
-            if (!hasMoreEvents || isLoadingMoreEvents) {
-              return;
-            }
-            void onLoadMoreEvents?.();
-          }}
-          itemContent={(index: number) => {
-            const ev = sortedEvents[index];
-            return (
-              <EventRow
-                event={ev}
-                index={index}
-                isFirst={index === 0}
-                isLast={index === sortedEvents.length - 1}
-                isExpanded={expandedEventIds.has(ev.eventId)}
-                onToggleExpand={toggleEventExpanded}
-                activeGroupKey={activeGroupKey}
-                selectedGroupKey={selectedGroupKey}
-                selectedGroupRange={selectedGroupRange}
-                correlationNameMap={correlationNameMap}
-                workflowName={workflowName}
-                durationMap={durationMap}
-                onSelectGroup={onSelectGroup}
-                onHoverGroup={onHoverGroup}
-                onLoadEventData={onLoadEventData}
-                cachedEventData={
-                  eventDataCacheRef.current.get(ev.eventId) ?? null
-                }
-                onCacheEventData={cacheEventData}
-                encryptionKey={encryptionKey}
-                onEncryptedDataDetected={handleEncryptedDataDetected}
-              />
-            );
+        {/* Fixed footer — count + load more */}
+        <div
+          className="relative flex-shrink-0 flex items-center h-10 border-t px-4 text-xs"
+          style={{
+            borderColor: 'var(--ds-gray-alpha-200)',
+            color: 'var(--ds-gray-900)',
+            backgroundColor: 'var(--ds-background-100)',
           }}
-          style={{ flex: 1, minHeight: 0 }}
-        />
-      )}
-
-      {/* Fixed footer — count + load more */}
-      <div
-        className="relative flex-shrink-0 flex items-center h-10 border-t px-4 text-xs"
-        style={{
-          borderColor: 'var(--ds-gray-alpha-200)',
-          color: 'var(--ds-gray-900)',
-          backgroundColor: 'var(--ds-background-100)',
-        }}
-      >
-        <span>
-          {sortedEvents.length} event
-          {sortedEvents.length !== 1 ? 's' : ''} loaded
-        </span>
-        {hasMoreEvents && (
-          <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
-            <div className="pointer-events-auto">
-              <LoadMoreButton
-                loading={isLoadingMoreEvents}
-                onClick={() => void onLoadMoreEvents?.()}
-              />
+        >
+          <span>
+            {sortedEvents.length} event
+            {sortedEvents.length !== 1 ? 's' : ''} loaded
+          </span>
+          {hasMoreEvents && (
+            <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
+              <div className="pointer-events-auto">
+                <LoadMoreButton
+                  loading={isLoadingMoreEvents}
+                  onClick={() => void onLoadMoreEvents?.()}
+                />
+              </div>
             </div>
-          </div>
-        )}
+          )}
+        </div>
       </div>
-    </div>
+    </DecryptClickContext.Provider>
   );
 }

package/src/components/index.ts

@@ -15,15 +15,25 @@ export {
 } from './hook-actions';
 export { RunTraceView } from './run-trace-view';
 export { ConversationView } from './sidebar/conversation-view';
+export {
+  SidebarDataProvider,
+  type SidebarDataContextValue,
+} from './sidebar/sidebar-data-context';
 export type {
   SelectedSpanInfo,
   SpanSelectionInfo,
 } from './sidebar/entity-detail-panel';
 export { type StreamChunk, StreamViewer } from './stream-viewer';
 export type { Span, SpanEvent } from './trace-viewer/types';
-export { DataInspector, type DataInspectorProps } from './ui/data-inspector';
+export {
+  DataInspector,
+  type DataInspectorProps,
+  DecryptClickContext,
+  type DecryptClickContextValue,
+} from './ui/data-inspector';
 export { DecryptButton } from './ui/decrypt-button';
 export { LoadMoreButton } from './ui/load-more-button';
 export { MenuDropdown, type MenuDropdownOption } from './ui/menu-dropdown';
 export { Spinner } from './ui/spinner';
 export { WorkflowTraceViewer } from './workflow-trace-view';
+export { NewTraceViewer } from './trace-viewer-new';

package/src/components/new-trace-viewer/components/copy-button.tsx

@@ -0,0 +1,68 @@
+'use client';
+
+import { Check, Copy } from 'lucide-react';
+import { type JSX, useEffect, useRef, useState } from 'react';
+import { cn } from '../../../lib/utils';
+
+interface CopyButtonProps {
+  copyText: string;
+  ariaLabel: string;
+  className?: string;
+}
+
+export function CopyButton({
+  copyText,
+  ariaLabel,
+  className,
+}: CopyButtonProps): JSX.Element {
+  const [copied, setCopied] = useState(false);
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+
+  return (
+    <button
+      type="button"
+      aria-label={ariaLabel}
+      className={cn(
+        'cursor-pointer text-gray-800 hover:text-gray-1000 bg-transparent border-none p-1 m-0',
+        className
+      )}
+      onClick={(e) => {
+        e.stopPropagation();
+        if (timeoutRef.current) {
+          clearTimeout(timeoutRef.current);
+        }
+        void navigator.clipboard.writeText(copyText).then(() => {
+          setCopied(true);
+          timeoutRef.current = setTimeout(() => setCopied(false), 1000);
+        });
+      }}
+    >
+      <div className="relative w-3 h-3">
+        <div
+          className={cn(
+            'absolute inset-0 flex items-center justify-center transition-all duration-150 ease-out',
+            copied ? 'scale-100 opacity-100' : 'scale-0 opacity-0'
+          )}
+        >
+          <Check className="w-3 h-3" />
+        </div>
+        <div
+          className={cn(
+            'absolute inset-0 flex items-center justify-center transition-all duration-150 ease-out',
+            copied ? 'scale-0 opacity-0' : 'scale-100 opacity-100'
+          )}
+        >
+          <Copy className="w-3 h-3" />
+        </div>
+      </div>
+    </button>
+  );
+}

package/src/components/new-trace-viewer/components/event-list.tsx

@@ -0,0 +1,109 @@
+import { Circle } from 'lucide-react';
+import { cn } from '../../../lib/utils';
+import type { Span } from '../../trace-viewer/types';
+import { formatDuration, getHighResInMs } from '../../trace-viewer/util/timing';
+import {
+  WorkflowIcon,
+  WebhookIcon,
+  SleepIcon,
+  StepForwardIcon,
+} from '../icons';
+
+interface EventStyle {
+  icon: React.ComponentType<{ className?: string }>;
+  className: string;
+}
+
+const eventStyles: Record<string, EventStyle> = {
+  run: { icon: WorkflowIcon, className: 'text-blue-900' },
+  step: { icon: StepForwardIcon, className: 'text-green-900' },
+  hook: { icon: WebhookIcon, className: 'text-yellow-900' },
+  sleep: { icon: SleepIcon, className: 'text-gray-900' },
+};
+
+const defaultStyle: EventStyle = {
+  icon: Circle,
+  className: 'text-gray-900',
+};
+
+function getEventStyle(resource: string, isErrored: boolean): EventStyle {
+  const style = eventStyles[resource] ?? defaultStyle;
+  return {
+    icon: style.icon,
+    className: cn(isErrored ? 'text-red-900' : style.className),
+  };
+}
+
+const EventRow = ({
+  span,
+  isSelected,
+  onSelectSpan,
+}: {
+  span: Span;
+  isSelected: boolean;
+  onSelectSpan: (spanId: string) => void;
+}) => {
+  const durationMs = getHighResInMs(span.duration);
+  const isErrored =
+    (span.attributes.data as Record<string, unknown>).status === 'failed';
+  const { icon: Icon, className: tagClassName } = getEventStyle(
+    span.resource,
+    isErrored
+  );
+
+  return (
+    <li
+      className="overflow-clip group"
+      role="treeitem"
+      aria-selected={isSelected}
+      aria-expanded={isSelected}
+      aria-level={1}
+      onClick={() => onSelectSpan(span.spanId)}
+    >
+      <div className="hover:bg-gray-100 group-aria-selected:bg-gray-100 group-aria-selected:hover:bg-gray-200 hover:aria-selected:bg-gray-100 rounded-sm px-2 h-[34px] py-1.5 flex">
+        <div className="flex items-center gap-2">
+          <span className={tagClassName}>
+            <Icon className="w-4 h-4" />
+          </span>
+          <span className="text-label-14">{span.name}</span>
+        </div>
+        <div className="ml-auto">
+          <span className="text-label-14 text-gray-900 tabular-nums">
+            {formatDuration(durationMs)}
+          </span>
+        </div>
+      </div>
+    </li>
+  );
+};
+
+const EventList = ({
+  spans,
+  activeSpanId,
+  onSelectSpan,
+}: {
+  spans: Span[];
+  activeSpanId: string | null;
+  onSelectSpan: (spanId: string) => void;
+}) => {
+  return (
+    <ul
+      id="event-list"
+      role="tree"
+      className="block min-h-0 overflow-visible px-2 py-2"
+    >
+      {spans.map((span) => {
+        return (
+          <EventRow
+            key={span.spanId}
+            span={span}
+            isSelected={span.spanId === activeSpanId}
+            onSelectSpan={onSelectSpan}
+          />
+        );
+      })}
+    </ul>
+  );
+};
+
+export default EventList;