@workflow/web-shared 4.1.0-beta.65 → 4.1.0-beta.66

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

@@ -17,6 +17,7 @@ import {
 import { LoadMoreButton } from './ui/load-more-button';
 import { MenuDropdown } from './ui/menu-dropdown';
 import { Skeleton } from './ui/skeleton';
+import { TimestampTooltip } from './ui/timestamp-tooltip';
 
 /**
  * Event types whose eventData contains an error field with a StructuredError.
@@ -211,6 +212,15 @@ function buildDurationMap(events: Event[]): Map<string, DurationInfo> {
   return durations;
 }
 
+/** Check if a loaded eventData object contains any encrypted marker values. */
+function hasEncryptedValues(data: unknown): boolean {
+  if (!data || typeof data !== 'object') return false;
+  for (const val of Object.values(data as Record<string, unknown>)) {
+    if (isEncryptedMarker(val)) return true;
+  }
+  return false;
+}
+
 function isRunLevel(eventType: string): boolean {
   return (
     eventType === 'run_created' ||
@@ -602,21 +612,67 @@ const SORT_OPTIONS = [
 function RowsSkeleton() {
   return (
     <div className="flex-1 overflow-hidden">
-      {Array.from({ length: 8 }, (_, i) => (
-        <div
-          key={i}
-          className="flex items-center gap-3 px-4"
-          style={{ height: 40 }}
-        >
-          <Skeleton
-            className="h-2 w-2 flex-shrink-0"
-            style={{ borderRadius: '50%' }}
-          />
-          <Skeleton className="h-3" style={{ width: 90 }} />
-          <Skeleton className="h-3" style={{ width: 100 }} />
-          <Skeleton className="h-3" style={{ width: 80 }} />
-          <Skeleton className="h-3 flex-1" />
-          <Skeleton className="h-3 flex-1" />
+      {Array.from({ length: 16 }, (_, i) => (
+        <div key={i} className="flex items-center gap-0" style={{ height: 40 }}>
+          {/* Gutter area */}
+          <div
+            className="relative flex-shrink-0 self-stretch flex items-center"
+            style={{ width: GUTTER_WIDTH }}
+          >
+            {/* Vertical line skeleton */}
+            <div
+              style={{
+                position: 'absolute',
+                left: 8,
+                top: i === 0 ? '50%' : 0,
+                bottom: 0,
+                width: 2,
+              }}
+            >
+              <Skeleton className="w-full h-full" style={{ borderRadius: 1 }} />
+            </div>
+            {/* Dot skeleton */}
+            <Skeleton
+              className="flex-shrink-0"
+              style={{
+                width: i % 4 === 0 ? 8 : 6,
+                height: i % 4 === 0 ? 8 : 6,
+                borderRadius: '50%',
+                marginLeft: i % 4 === 0 ? 5 : 6,
+              }}
+            />
+          </div>
+          {/* Chevron placeholder */}
+          <div className="w-5 flex-shrink-0 flex items-center justify-center">
+            <Skeleton className="w-5 h-5" style={{ borderRadius: 4 }} />
+          </div>
+          {/* Time */}
+          <div className="min-w-0 px-4" style={{ flex: '2 1 0%' }}>
+            <Skeleton className="h-3" style={{ width: '70%' }} />
+          </div>
+          {/* Event Type */}
+          <div
+            className="min-w-0 px-4 flex items-center gap-1.5"
+            style={{ flex: '2 1 0%' }}
+          >
+            <Skeleton
+              className="flex-shrink-0"
+              style={{ width: 6, height: 6, borderRadius: '50%' }}
+            />
+            <Skeleton className="h-3" style={{ width: '60%' }} />
+          </div>
+          {/* Name */}
+          <div className="min-w-0 px-4" style={{ flex: '2 1 0%' }}>
+            <Skeleton className="h-3" style={{ width: '50%' }} />
+          </div>
+          {/* Correlation ID */}
+          <div className="min-w-0 px-4" style={{ flex: '3 1 0%' }}>
+            <Skeleton className="h-3" style={{ width: '75%' }} />
+          </div>
+          {/* Event ID */}
+          <div className="min-w-0 px-4" style={{ flex: '3 1 0%' }}>
+            <Skeleton className="h-3" style={{ width: '75%' }} />
+          </div>
         </div>
       ))}
     </div>
@@ -668,6 +724,7 @@ function EventRow({
   cachedEventData,
   onCacheEventData,
   encryptionKey,
+  onEncryptedDataDetected,
 }: {
   event: Event;
   index: number;
@@ -687,6 +744,7 @@ function EventRow({
   cachedEventData: unknown | null;
   onCacheEventData: (eventId: string, data: unknown) => void;
   encryptionKey?: Uint8Array;
+  onEncryptedDataDetected?: () => void;
 }) {
   const [isLoading, setIsLoading] = useState(false);
   const [loadedEventData, setLoadedEventData] = useState<unknown | null>(
@@ -697,6 +755,18 @@ function EventRow({
     cachedEventData !== null
   );
 
+  // Notify parent if cached data has encrypted markers on mount
+  useEffect(() => {
+    if (
+      cachedEventData !== null &&
+      !encryptionKey &&
+      hasEncryptedValues(cachedEventData)
+    ) {
+      onEncryptedDataDetected?.();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   const rowGroupKey = isRunLevel(event.eventType)
     ? '__run__'
     : (event.correlationId ?? undefined);
@@ -745,6 +815,9 @@ function EventRow({
       if (data !== null && data !== undefined) {
         setLoadedEventData(data);
         onCacheEventData(event.eventId, data);
+        if (!encryptionKey && hasEncryptedValues(data)) {
+          onEncryptedDataDetected?.();
+        }
       }
     } catch (err) {
       setLoadError(
@@ -760,6 +833,8 @@ function EventRow({
     hasExistingEventData,
     onLoadEventData,
     onCacheEventData,
+    encryptionKey,
+    onEncryptedDataDetected,
   ]);
 
   // Auto-load event data when remounting in expanded state without cached data
@@ -877,7 +952,9 @@ function EventRow({
             className="tabular-nums min-w-0 px-4"
             style={{ color: 'var(--ds-gray-900)', flex: '2 1 0%' }}
           >
-            {formatEventTime(createdAt)}
+            <TimestampTooltip date={createdAt}>
+              <span>{formatEventTime(createdAt)}</span>
+            </TimestampTooltip>
           </div>
 
           {/* Event Type */}
@@ -1079,22 +1156,26 @@ export function EventListView({
     );
   }, [events, effectiveSortOrder]);
 
-  // Detect encrypted fields across all loaded events.
-  // Only checks top-level eventData values (input, output, result, etc.) —
-  // the current data model guarantees encrypted markers appear at this level.
-  const hasEncryptedData = useMemo(() => {
+  // Detect encrypted fields across all loaded events (inline eventData).
+  const hasEncryptedInlineData = useMemo(() => {
     if (!events) return false;
     for (const event of events) {
       const ed = (event as Record<string, unknown>).eventData;
-      if (!ed || typeof ed !== 'object') continue;
-      const data = ed as Record<string, unknown>;
-      for (const val of Object.values(data)) {
-        if (isEncryptedMarker(val)) return true;
-      }
+      if (hasEncryptedValues(ed)) return true;
     }
     return false;
   }, [events]);
 
+  // Tracks whether any expanded row's lazy-loaded data contained encrypted markers.
+  // Set to true by EventRow via onEncryptedDataDetected; never reset (sticky).
+  const [foundEncryptedInLazyData, setFoundEncryptedInLazyData] =
+    useState(false);
+  const handleEncryptedDataDetected = useCallback(() => {
+    setFoundEncryptedInLazyData(true);
+  }, []);
+
+  const hasEncryptedData = hasEncryptedInlineData || foundEncryptedInLazyData;
+
   const { correlationNameMap, workflowName } = useMemo(
     () => buildNameMaps(events ?? null, run ?? null),
     [events, run]
@@ -1268,18 +1349,26 @@ export function EventListView({
         </div>
         {/* Skeleton header */}
         <div
-          className="flex items-center gap-0 h-10 border-b flex-shrink-0 px-4"
+          className="flex items-center gap-0 h-10 border-b flex-shrink-0"
           style={{ borderColor: 'var(--ds-gray-alpha-200)' }}
         >
-          <Skeleton className="h-3" style={{ width: 60 }} />
-          <div style={{ flex: 1 }} />
-          <Skeleton className="h-3" style={{ width: 80 }} />
-          <div style={{ flex: 1 }} />
-          <Skeleton className="h-3" style={{ width: 50 }} />
-          <div style={{ flex: 1 }} />
-          <Skeleton className="h-3" style={{ width: 90 }} />
-          <div style={{ flex: 1 }} />
-          <Skeleton className="h-3" style={{ width: 70 }} />
+          <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%' }}>
+            <Skeleton className="h-3" style={{ width: 40 }} />
+          </div>
+          <div className="min-w-0 px-4" style={{ flex: '2 1 0%' }}>
+            <Skeleton className="h-3" style={{ width: 72 }} />
+          </div>
+          <div className="min-w-0 px-4" style={{ flex: '2 1 0%' }}>
+            <Skeleton className="h-3" style={{ width: 44 }} />
+          </div>
+          <div className="min-w-0 px-4" style={{ flex: '3 1 0%' }}>
+            <Skeleton className="h-3" style={{ width: 92 }} />
+          </div>
+          <div className="min-w-0 px-4" style={{ flex: '3 1 0%' }}>
+            <Skeleton className="h-3" style={{ width: 60 }} />
+          </div>
         </div>
         <RowsSkeleton />
       </div>
@@ -1455,6 +1544,7 @@ export function EventListView({
                 }
                 onCacheEventData={cacheEventData}
                 encryptionKey={encryptionKey}
+                onEncryptedDataDetected={handleEncryptedDataDetected}
               />
             );
           }}

package/src/components/hook-actions.tsx

@@ -3,7 +3,7 @@
 import type { Hook, WorkflowRunStatus } from '@workflow/world';
 import { Send } from 'lucide-react';
 import { useCallback, useState } from 'react';
-import { toast } from 'sonner';
+import { useToast } from '../lib/toast';
 import { ResolveHookModal } from './sidebar/resolve-hook-modal';
 
 // ============================================================================
@@ -45,6 +45,7 @@ export function useHookActions({
   onResolve,
   callbacks,
 }: UseHookActionsOptions): UseHookActionsReturn {
+  const toast = useToast();
   const [isResolving, setIsResolving] = useState(false);
   const [selectedHook, setSelectedHook] = useState<Hook | null>(null);
 

package/src/components/sidebar/attribute-panel.tsx

@@ -6,10 +6,11 @@ import type { ModelMessage } from 'ai';
 import { Lock } from 'lucide-react';
 import type { KeyboardEvent, ReactNode } from 'react';
 import { useCallback, useMemo, useState } from 'react';
-import { toast } from 'sonner';
+import { useToast } from '../../lib/toast';
 import { isEncryptedMarker } from '../../lib/hydration';
 import { extractConversation, isDoStreamStep } from '../../lib/utils';
 import { StreamClickContext } from '../ui/data-inspector';
+import { TimestampTooltip } from '../ui/timestamp-tooltip';
 import { ErrorCard } from '../ui/error-card';
 import {
   ErrorStackBlock,
@@ -336,6 +337,16 @@ const localMillisecondTimeOrNull = (value: unknown): string | null => {
   return formatLocalMillisecondTime(date);
 };
 
+const timestampWithTooltipOrNull = (value: unknown): ReactNode | null => {
+  const date = parseDateValue(value);
+  if (!date) return null;
+  return (
+    <TimestampTooltip date={date}>
+      <span>{formatLocalMillisecondTime(date)}</span>
+    </TimestampTooltip>
+  );
+};
+
 interface DisplayContext {
   stepName?: string;
 }
@@ -375,15 +386,14 @@ const attributeToDisplayFn: Record<
   projectId: (_value: unknown) => null,
   environment: (_value: unknown) => null,
   executionContext: (_value: unknown) => null,
-  // Dates
-  // TODO: relative time with tooltips for ISO times
-  createdAt: localMillisecondTimeOrNull,
-  startedAt: localMillisecondTimeOrNull,
-  updatedAt: localMillisecondTimeOrNull,
-  completedAt: localMillisecondTimeOrNull,
-  expiredAt: localMillisecondTimeOrNull,
-  retryAfter: localMillisecondTimeOrNull,
-  resumeAt: localMillisecondTimeOrNull,
+  // Dates — wrapped with TimestampTooltip showing UTC/local + relative time
+  createdAt: timestampWithTooltipOrNull,
+  startedAt: timestampWithTooltipOrNull,
+  updatedAt: timestampWithTooltipOrNull,
+  completedAt: timestampWithTooltipOrNull,
+  expiredAt: timestampWithTooltipOrNull,
+  retryAfter: timestampWithTooltipOrNull,
+  resumeAt: timestampWithTooltipOrNull,
   // Resolved attributes, won't actually use this function
   metadata: (value: unknown) => {
     if (!hasDisplayContent(value)) return null;
@@ -580,12 +590,6 @@ export const AttributeBlock = ({
     attribute === 'output' ||
     attribute === 'eventData';
   if (isLoading && isExpandableLoadingTarget) {
-    const label =
-      attribute === 'eventData'
-        ? 'Event Data'
-        : attribute === 'output'
-          ? 'Output'
-          : 'Input';
     return (
       <div
         className={`my-2 flex flex-col ${attribute === 'input' || attribute === 'output' ? 'gap-2 my-3.5' : 'gap-0'}`}
@@ -596,19 +600,7 @@ export const AttributeBlock = ({
         >
           {attribute}
         </span>
-        <DetailCard
-          summary={label}
-          summaryClassName="text-base py-2"
-          disabled
-        />
-        <div
-          className="overflow-x-auto rounded-md border p-3"
-          style={{ borderColor: 'var(--ds-gray-300)' }}
-        >
-          <Skeleton className="h-4 w-[38%]" />
-          <Skeleton className="mt-2 h-4 w-[88%]" />
-          <Skeleton className="mt-2 h-4 w-[72%]" />
-        </div>
+        <Skeleton className="h-9 w-full rounded-md" />
       </div>
     );
   }
@@ -674,6 +666,7 @@ export const AttributePanel = ({
   error,
   expiredAt,
   onStreamClick,
+  resource,
 }: {
   data: Record<string, unknown>;
   moduleSpecifier?: string;
@@ -682,7 +675,10 @@ export const AttributePanel = ({
   expiredAt?: string | Date;
   /** Callback when a stream reference is clicked */
   onStreamClick?: (streamId: string) => void;
+  /** Resource type of the selected span — used to show targeted loading skeletons. */
+  resource?: string;
 }) => {
+  const toast = useToast();
   // Extract workflowCoreVersion from executionContext for display
   const displayData = useMemo(() => {
     const result = { ...data };
@@ -705,9 +701,23 @@ export const AttributePanel = ({
   const basicAttributes = Object.keys(displayData)
     .filter((key) => !resolvableAttributes.includes(key))
     .sort(sortByAttributeOrder);
-  const resolvedAttributes = Object.keys(displayData)
-    .filter((key) => resolvableAttributes.includes(key))
-    .sort(sortByAttributeOrder);
+  const resolvedAttributes = useMemo(() => {
+    const present = Object.keys(displayData)
+      .filter((key) => resolvableAttributes.includes(key))
+      .sort(sortByAttributeOrder);
+
+    if (!isLoading) return present;
+
+    // During loading, ensure input/output appear so their skeletons render
+    // in the correct position (above the events section).
+    const loadingDefaults = ['input', 'output'];
+    for (const key of loadingDefaults) {
+      if (!present.includes(key)) {
+        present.push(key);
+      }
+    }
+    return present.sort(sortByAttributeOrder);
+  }, [displayData, isLoading]);
 
   // Filter out attributes that return null
   const visibleBasicAttributes = basicAttributes.filter((attribute) => {
@@ -784,7 +794,11 @@ export const AttributePanel = ({
                   ? displayValue
                   : String(displayValue ?? displayData.moduleSpecifier ?? '');
               const shouldCapitalizeLabel = attribute !== 'workflowCoreVersion';
-              const showDivider = index < orderedBasicAttributes.length - 1;
+              const showResumeAtSkeleton =
+                isLoading && resource === 'sleep' && !displayData.resumeAt;
+              const showDivider =
+                index < orderedBasicAttributes.length - 1 ||
+                showResumeAtSkeleton;
 
               return (
                 <div key={attribute} className="py-1">
@@ -834,6 +848,19 @@ export const AttributePanel = ({
                 </div>
               );
             })}
+            {isLoading && resource === 'sleep' && !displayData.resumeAt && (
+              <div className="py-1">
+                <div className="flex min-h-[32px] items-center justify-between gap-4 rounded-sm px-2.5 py-1">
+                  <span
+                    className="text-[14px] first-letter:uppercase"
+                    style={{ color: 'var(--ds-gray-700)' }}
+                  >
+                    resumeAt
+                  </span>
+                  <Skeleton className="h-4 w-[55%]" />
+                </div>
+              </div>
+            )}
           </div>
         )}
         {error ? (

package/src/components/sidebar/copyable-data-block.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { Copy } from 'lucide-react';
-import { toast } from 'sonner';
+import { useToast } from '../../lib/toast';
 import { DataInspector } from '../ui/data-inspector';
 
 const serializeForClipboard = (value: unknown): string => {
@@ -21,6 +21,7 @@ const serializeForClipboard = (value: unknown): string => {
 };
 
 export function CopyableDataBlock({ data }: { data: unknown }) {
+  const toast = useToast();
   return (
     <div
       className="relative overflow-x-auto rounded-md border p-3 pt-9"

package/src/components/sidebar/entity-detail-panel.tsx

@@ -3,8 +3,8 @@
 import type { Event, Hook, Step, WorkflowRun } from '@workflow/world';
 import clsx from 'clsx';
 import { Send, Zap } from 'lucide-react';
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { toast } from 'sonner';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useToast } from '../../lib/toast';
 import { isEncryptedMarker } from '../../lib/hydration';
 import { DecryptButton } from '../ui/decrypt-button';
 import { AttributePanel } from './attribute-panel';
@@ -104,6 +104,7 @@ export function EntityDetailPanel({
   /** Info about the currently selected span from the trace viewer */
   selectedSpan: SelectedSpanInfo | null;
 }): React.JSX.Element | null {
+  const toast = useToast();
   const [stoppingSleep, setStoppingSleep] = useState(false);
   const [showResolveHookModal, setShowResolveHookModal] = useState(false);
   const [resolvingHook, setResolvingHook] = useState(false);
@@ -144,20 +145,26 @@ export function EntityDetailPanel({
     return { resource: undefined, resourceId: undefined, runId: undefined };
   }, [selectedSpan, data]);
 
-  // Notify parent when span selection changes
+  // Notify parent when span selection changes.
+  // Use a ref for the callback so the effect only fires when the actual
+  // selection values change, not when the callback identity changes due to
+  // parent re-renders from polling.
+  const onSpanSelectRef = useRef(onSpanSelect);
+  onSpanSelectRef.current = onSpanSelect;
+
   useEffect(() => {
     if (
       resource &&
       resourceId &&
       ['run', 'step', 'hook', 'sleep'].includes(resource)
     ) {
-      onSpanSelect({
+      onSpanSelectRef.current({
         resource: resource as 'run' | 'step' | 'hook' | 'sleep',
         resourceId,
         runId,
       });
     }
-  }, [resource, resourceId, runId, onSpanSelect]);
+  }, [resource, resourceId, runId]);
 
   // Check if this sleep is still pending and can be woken up
   const canWakeUp = useMemo(() => {
@@ -474,6 +481,7 @@ export function EntityDetailPanel({
               isLoading={loading}
               error={error ?? undefined}
               onStreamClick={onStreamClick}
+              resource={resource}
             />
           </section>
 

package/src/components/sidebar/events-list.tsx

@@ -2,6 +2,7 @@
 
 import type { Event } from '@workflow/world';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { ErrorCard } from '../ui/error-card';
 import {
   ErrorStackBlock,
   isStructuredErrorWithStack,
@@ -23,10 +24,14 @@ const DATA_EVENT_TYPES = new Set([
   'step_created',
   'step_completed',
   'step_failed',
+  'step_retrying',
   'hook_created',
   'hook_received',
   'run_created',
   'run_completed',
+  'run_failed',
+  'wait_created',
+  'wait_completed',
 ]);
 
 /**
@@ -175,15 +180,11 @@ function EventItem({
 
       {/* Error state */}
       {loadError && (
-        <div
-          className="mt-2 rounded-md border p-2 text-sm"
-          style={{
-            borderColor: 'var(--ds-red-300)',
-            color: 'var(--ds-red-700)',
-          }}
-        >
-          {loadError}
-        </div>
+        <ErrorCard
+          title="Failed to load event data"
+          details={loadError}
+          className="mt-2"
+        />
       )}
 
       {/* Event data */}
@@ -269,10 +270,10 @@ export function EventsList({
         Events {!isLoading && `(${sortedEvents.length})`}
       </h3>
       {isLoading ? (
-        <div className="flex flex-col gap-3">
-          <Skeleton className="h-[48px] w-full rounded-lg border" />
-          <Skeleton className="h-[48px] w-full rounded-lg border" />
-          <Skeleton className="h-[48px] w-full rounded-lg border" />
+        <div className="flex flex-col gap-4">
+          <Skeleton className="h-9 w-full rounded-md" />
+          <Skeleton className="h-9 w-full rounded-md" />
+          <Skeleton className="h-9 w-full rounded-md" />
         </div>
       ) : null}
       {!isLoading && !error && sortedEvents.length === 0 && (

package/src/components/trace-viewer/components/span-segments.ts

@@ -341,6 +341,26 @@ function computeRunSegments(node: SpanNode): Segment[] {
 
   if (duration <= 0) return segments;
 
+  // V1 runs (specVersion 1) don't emit run lifecycle events (run_created,
+  // run_started, run_completed). Detect this by checking for the absence of
+  // run_created — it's always the first event for v2 runs and is always
+  // loaded in the first page, so its absence reliably signals a v1 run.
+  // For v1, fall back to the run entity's status from span.attributes.data.
+  const hasRunCreated = events.some((e) => e.event.name === 'run_created');
+
+  if (!hasRunCreated) {
+    const runData = node.span.attributes?.data as
+      | Record<string, unknown>
+      | undefined;
+    const runStatus = runData?.status as string | undefined;
+    return computeV1RunSegments(
+      startTime,
+      duration,
+      activeStartTime,
+      runStatus
+    );
+  }
+
   const failedEvent = events.find((e) => e.event.name === 'run_failed');
   const completedEvent = events.find((e) => e.event.name === 'run_completed');
 
@@ -396,7 +416,56 @@ function computeRunSegments(node: SpanNode): Segment[] {
       status: 'succeeded',
     });
   } else {
-    // Running to completion
+    // Running to completion (or terminal events haven't loaded yet)
+    segments.push({
+      startFraction: cursor,
+      endFraction: 1,
+      status: 'running',
+    });
+  }
+
+  return segments;
+}
+
+/**
+ * Compute segments for a v1 run using only the run entity's status and
+ * activeStartTime (derived from run.startedAt). V1 runs have no run
+ * lifecycle events, so we infer the visual segments from entity fields.
+ */
+function computeV1RunSegments(
+  startTime: number,
+  duration: number,
+  activeStartTime: number | undefined,
+  runStatus: string | undefined
+): Segment[] {
+  const segments: Segment[] = [];
+
+  let cursor = 0;
+  if (activeStartTime && activeStartTime > startTime) {
+    const queuedFraction = timeToFraction(activeStartTime, startTime, duration);
+    if (queuedFraction > 0.001) {
+      segments.push({
+        startFraction: 0,
+        endFraction: queuedFraction,
+        status: 'queued',
+      });
+      cursor = queuedFraction;
+    }
+  }
+
+  if (runStatus === 'failed') {
+    segments.push({
+      startFraction: cursor,
+      endFraction: 1,
+      status: 'failed',
+    });
+  } else if (runStatus === 'completed' || runStatus === 'cancelled') {
+    segments.push({
+      startFraction: cursor,
+      endFraction: 1,
+      status: 'succeeded',
+    });
+  } else {
     segments.push({
       startFraction: cursor,
       endFraction: 1,

package/src/components/ui/error-stack-block.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { AlertCircle, Copy } from 'lucide-react';
-import { toast } from 'sonner';
+import { useToast } from '../../lib/toast';
 
 /**
  * Check whether `value` looks like a structured error object with a `stack`
@@ -28,6 +28,7 @@ export function ErrorStackBlock({
 }: {
   value: Record<string, unknown> & { stack: string };
 }) {
+  const toast = useToast();
   const stack = value.stack;
   const message = typeof value.message === 'string' ? value.message : undefined;
   const copyText = message ? `${message}\n\n${stack}` : stack;