@workflow/web-shared 5.0.0-beta.27 → 5.0.0-beta.29

package/src/components/new-trace-viewer/utils.ts

@@ -1,4 +1,8 @@
-import { formatDuration, getHighResInMs } from '../trace-viewer/util/timing';
+import {
+  formatDuration,
+  formatDurationPrecise,
+  getHighResInMs,
+} from '../trace-viewer/util/timing';
 import type { Span, SpanEvent } from './types';
 
 // ---------------------------------------------------------------------------
@@ -37,6 +41,64 @@ export function getSpanDurationMs(span: Span): number {
   );
 }
 
+export function isSpanErrored(span: Span): boolean {
+  const workflowStatus = (span.attributes.data as Record<string, unknown>)
+    ?.status as string | undefined;
+  return span.status.code === 2 || workflowStatus === 'failed';
+}
+
+// ---------------------------------------------------------------------------
+// Viewport
+// ---------------------------------------------------------------------------
+
+export interface ViewportRange {
+  start: number;
+  end: number;
+}
+
+/**
+ * Clamp a candidate viewport to the root extent. The requested duration is
+ * preserved where possible (clamped to [minDurationMs, root duration]), then
+ * the window is shifted back inside the root bounds.
+ */
+export function clampViewportToRoot(
+  next: ViewportRange,
+  rootStart: number,
+  rootEnd: number,
+  minDurationMs: number
+): ViewportRange {
+  const rootDuration = Math.max(rootEnd - rootStart, minDurationMs);
+  const duration = Math.min(
+    rootDuration,
+    Math.max(minDurationMs, next.end - next.start)
+  );
+  const maxStart = rootEnd - duration;
+  const start = Math.min(Math.max(next.start, rootStart), maxStart);
+  return { start, end: start + duration };
+}
+
+// ---------------------------------------------------------------------------
+// Wheel gestures — shared between the timeline and the minimap
+// ---------------------------------------------------------------------------
+
+/** Convert a wheel delta to pixel units (line-mode deltas arrive in lines). */
+export function wheelDeltaToPixels(delta: number, deltaMode: number): number {
+  return deltaMode === 1 ? delta * 16 : delta;
+}
+
+/**
+ * Exponential zoom factor for a wheel gesture. Coarse mouse-wheel steps are
+ * damped harder than trackpad pinches so both feel similar.
+ */
+export function wheelZoomScaleFactor(event: {
+  deltaY: number;
+  deltaMode: number;
+}): number {
+  const dy = wheelDeltaToPixels(event.deltaY, event.deltaMode);
+  const isMouseWheel = event.deltaMode === 1 || Math.abs(event.deltaY) >= 50;
+  return 2 ** (dy / (isMouseWheel ? 200 : 60));
+}
+
 // ---------------------------------------------------------------------------
 // Time markers
 // ---------------------------------------------------------------------------
@@ -56,6 +118,8 @@ const NICE_INTERVALS = [
 
 const MAX_MARKERS = 8;
 
+const MS_IN_SECOND = 1000;
+
 function pickInterval(viewDuration: number, maxTicks: number): number {
   for (const interval of NICE_INTERVALS) {
     if (viewDuration / interval <= maxTicks) return interval;
@@ -72,6 +136,13 @@ export function computeTimeMarkers(
   const maxTicks = 6;
   const interval = pickInterval(viewDuration, maxTicks);
 
+  // Sub-second steps need fractional labels, or ticks past 1s collide as
+  // duplicate whole seconds ("…1s, 2s, 2s, 3s"). Scale decimals to the step.
+  const fractionDigits =
+    interval >= MS_IN_SECOND
+      ? 0
+      : Math.ceil(-Math.log10(interval / MS_IN_SECOND));
+
   const firstTick = Math.ceil(offset / interval) * interval;
   const markers: TimeMarker[] = [];
 
@@ -80,7 +151,10 @@ export function computeTimeMarkers(
     if (position < -0.01 || position > 1.01) continue;
     markers.push({
       position: Math.min(Math.max(position, 0), 1),
-      label: formatDuration(Math.abs(t), true),
+      label:
+        fractionDigits === 0
+          ? formatDuration(Math.abs(t), true)
+          : formatDurationPrecise(Math.abs(t), fractionDigits),
       value: t,
     });
     if (markers.length >= MAX_MARKERS) break;

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

@@ -5,7 +5,7 @@ import type { Event, Hook, Step, WorkflowRun } from '@workflow/world';
 import type { ModelMessage } from 'ai';
 import { format } from 'date-fns';
 import type { KeyboardEvent, ReactNode } from 'react';
-import { useCallback, useContext, useMemo, useState } from 'react';
+import { useCallback, useContext, useMemo, useRef, useState } from 'react';
 import { isEncryptedMarker, isExpiredMarker } from '../../lib/hydration';
 import { extractConversation, isDoStreamStep } from '../../lib/utils';
 import {
@@ -148,16 +148,24 @@ const conversationTabs = [
 function ConversationWithTabs({
   conversation,
   args,
+  defaultOpen,
+  onOpenChange,
 }: {
   conversation: ModelMessage[];
   args: unknown[];
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
 }) {
   const [activeTab, setActiveTab] = useState<'conversation' | 'json'>(
     'conversation'
   );
 
   return (
-    <Collapsible label="Input">
+    <Collapsible
+      label="Input"
+      defaultOpen={defaultOpen}
+      onOpenChange={onOpenChange}
+    >
       <TabbedContainer
         tabs={conversationTabs}
         activeTab={activeTab}
@@ -382,6 +390,8 @@ const timestampWithTooltipOrNull = (value: unknown): ReactNode | null => {
 
 interface DisplayContext {
   stepName?: string;
+  sectionOpen?: boolean;
+  onSectionOpenChange?: (open: boolean) => void;
 }
 
 const attributeToDisplayFn: Record<
@@ -457,7 +467,11 @@ const attributeToDisplayFn: Record<
   input: (value: unknown, context?: DisplayContext) => {
     if (isEncryptedMarker(value)) {
       return (
-        <Collapsible label="Input">
+        <Collapsible
+          label="Input"
+          defaultOpen={context?.sectionOpen}
+          onOpenChange={context?.onSectionOpenChange}
+        >
           <EncryptedFieldBlock />
         </Collapsible>
       );
@@ -480,7 +494,12 @@ const attributeToDisplayFn: Record<
         if (conversation && conversation.length > 0) {
           return (
             <>
-              <ConversationWithTabs conversation={conversation} args={args} />
+              <ConversationWithTabs
+                conversation={conversation}
+                args={args}
+                defaultOpen={context?.sectionOpen}
+                onOpenChange={context?.onSectionOpenChange}
+              />
               {hasClosureVars && (
                 <Collapsible label="Closure Variables">
                   {JsonBlock(closureVars)}
@@ -503,7 +522,11 @@ const attributeToDisplayFn: Record<
 
       return (
         <>
-          <Collapsible label="Input">
+          <Collapsible
+            label="Input"
+            defaultOpen={context?.sectionOpen}
+            onOpenChange={context?.onSectionOpenChange}
+          >
             {Array.isArray(args)
               ? args.map((v, i) => (
                   <div className="mt-2 first:mt-0" key={i}>
@@ -529,7 +552,11 @@ const attributeToDisplayFn: Record<
       return <Collapsible label="Input (no data)" disabled />;
     }
     return (
-      <Collapsible label="Input">
+      <Collapsible
+        label="Input"
+        defaultOpen={context?.sectionOpen}
+        onOpenChange={context?.onSectionOpenChange}
+      >
         {Array.isArray(value)
           ? value.map((v, i) => (
               <div className="mt-2 first:mt-0" key={i}>
@@ -540,17 +567,29 @@ const attributeToDisplayFn: Record<
       </Collapsible>
     );
   },
-  output: (value: unknown) => {
+  output: (value: unknown, context?: DisplayContext) => {
     if (isEncryptedMarker(value)) {
       return (
-        <Collapsible label="Output">
+        <Collapsible
+          label="Output"
+          defaultOpen={context?.sectionOpen}
+          onOpenChange={context?.onSectionOpenChange}
+        >
           <EncryptedFieldBlock />
         </Collapsible>
       );
     }
     if (!hasDisplayContent(value)) return null;
     if (isExpiredMarker(value)) return <ExpiredFieldBlock />;
-    return <Collapsible label="Output">{JsonBlock(value)}</Collapsible>;
+    return (
+      <Collapsible
+        label="Output"
+        defaultOpen={context?.sectionOpen}
+        onOpenChange={context?.onSectionOpenChange}
+      >
+        {JsonBlock(value)}
+      </Collapsible>
+    );
   },
   error: (value: unknown) => {
     if (isEncryptedMarker(value)) {
@@ -642,6 +681,12 @@ const copyableBasicAttributes = new Set<AttributeKey>([
   'moduleSpecifier',
 ]);
 
+const loadingSectionLabels: Partial<Record<AttributeKey, string>> = {
+  input: 'Input',
+  output: 'Output',
+  eventData: 'Event Data',
+};
+
 export const AttributeBlock = ({
   attribute,
   value,
@@ -656,20 +701,19 @@ export const AttributeBlock = ({
   context?: DisplayContext;
 }) => {
   const decryptCtx = useContext(DecryptClickContext);
-  const isExpandableLoadingTarget =
-    attribute === 'input' ||
-    attribute === 'output' ||
-    attribute === 'eventData';
-  if (isLoading && isExpandableLoadingTarget && !hasDisplayContent(value)) {
-    const label =
-      attribute === 'eventData'
-        ? 'Event Data'
-        : attribute === 'output'
-          ? 'Output'
-          : 'Input';
+  const sectionOpenRef = useRef(false);
+  const handleSectionOpenChange = useCallback((open: boolean) => {
+    sectionOpenRef.current = open;
+  }, []);
+  const label = loadingSectionLabels[attribute as AttributeKey];
+  if (isLoading && label && !hasDisplayContent(value)) {
     if (decryptCtx?.hasEncryptedData) {
       return (
-        <Collapsible label={label} defaultOpen={attribute === 'eventData'}>
+        <Collapsible
+          label={label}
+          defaultOpen={attribute === 'eventData' || sectionOpenRef.current}
+          onOpenChange={handleSectionOpenChange}
+        >
           <EncryptedFieldBlock />
         </Collapsible>
       );
@@ -682,7 +726,11 @@ export const AttributeBlock = ({
   if (!displayFn) {
     return null;
   }
-  const displayValue = displayFn(value, context);
+  const displayValue = displayFn(value, {
+    ...context,
+    sectionOpen: sectionOpenRef.current,
+    onSectionOpenChange: handleSectionOpenChange,
+  });
   if (!displayValue) {
     return null;
   }
@@ -732,6 +780,7 @@ export const AttributeBlock = ({
 export const AttributePanel = ({
   data,
   moduleSpecifier,
+  moduleSourceUrl,
   isLoading,
   error,
   expiredAt,
@@ -743,6 +792,7 @@ export const AttributePanel = ({
 }: {
   data: Record<string, unknown>;
   moduleSpecifier?: string;
+  moduleSourceUrl?: string;
   isLoading?: boolean;
   error?: Error;
   expiredAt?: string | Date;
@@ -877,6 +927,11 @@ export const AttributePanel = ({
                           copyText={
                             isCopyableBasicAttribute ? displayValue : undefined
                           }
+                          href={
+                            attribute === 'moduleSpecifier'
+                              ? moduleSourceUrl
+                              : undefined
+                          }
                         />
                       );
                     })}

package/src/components/sidebar/attributes-block.tsx

@@ -5,6 +5,7 @@ import {
   RESERVED_ATTRIBUTE_KEY_PREFIX,
 } from '@workflow/world';
 import { cva, type VariantProps } from 'class-variance-authority';
+import { ArrowUpRight } from 'lucide-react';
 import type { ReactNode } from 'react';
 import { cn } from '../../lib/cn';
 import { CopyButton } from '../new-trace-viewer/components/copy-button';
@@ -21,7 +22,7 @@ function isReservedAttributeKey(key: string): boolean {
 }
 
 const rowValueVariants = cva(
-  'max-w-[60%] truncate text-right text-copy-13 text-gray-1000',
+  'min-w-0 flex-1 truncate text-right text-copy-13 text-gray-1000',
   {
     variants: {
       variant: {
@@ -36,7 +37,7 @@ const rowValueVariants = cva(
 );
 
 const rowCopyValueVariants = cva(
-  'flex min-w-0 max-w-[60%] items-center justify-end gap-1 text-copy-13 text-gray-1000',
+  'flex min-w-0 flex-1 items-center justify-end gap-1 text-copy-13 text-gray-1000',
   {
     variants: {
       variant: {
@@ -54,6 +55,7 @@ type DetailKeyValueRowProps = {
   label: string;
   value?: ReactNode;
   copyText?: string;
+  href?: string;
   removed?: boolean;
 };
 
@@ -61,6 +63,7 @@ function DetailKeyValueRowBase({
   label,
   value,
   copyText,
+  href,
   removed = false,
   variant,
 }: DetailKeyValueRowProps & VariantProps<typeof rowValueVariants>) {
@@ -77,13 +80,32 @@ function DetailKeyValueRowBase({
         </span>
       ) : copyText ? (
         <div className={cn(rowCopyValueVariants({ variant }))} title={copyText}>
-          <MiddleTruncate
-            value={copyText}
-            className={cn(
-              rowValueVariants({ variant, className: 'text-right' })
-            )}
-            style={{ gridTemplateColumns: 'minmax(0, 1fr)' }}
-          />
+          {href ? (
+            <a
+              href={href}
+              target="_blank"
+              rel="noreferrer"
+              className={cn(
+                rowValueVariants({ variant }),
+                'flex min-w-0 items-center gap-0.5 hover:underline'
+              )}
+            >
+              <MiddleTruncate
+                value={copyText}
+                className="min-w-0 text-right"
+                style={{ gridTemplateColumns: 'minmax(0, 1fr)' }}
+              />
+              <ArrowUpRight aria-hidden className="h-3 w-3 shrink-0" />
+            </a>
+          ) : (
+            <MiddleTruncate
+              value={copyText}
+              className={cn(
+                rowValueVariants({ variant, className: 'text-right' })
+              )}
+              style={{ gridTemplateColumns: 'minmax(0, 1fr)' }}
+            />
+          )}
           <CopyButton
             copyText={copyText}
             ariaLabel={`Copy ${label}`}
@@ -92,7 +114,18 @@ function DetailKeyValueRowBase({
         </div>
       ) : (
         <span className={cn(rowValueVariants({ variant }))} title={stringValue}>
-          {value}
+          {href ? (
+            <a
+              href={href}
+              target="_blank"
+              rel="noreferrer"
+              className="hover:underline"
+            >
+              {value}
+            </a>
+          ) : (
+            value
+          )}
         </span>
       )}
     </div>

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

@@ -1,5 +1,6 @@
 'use client';
 
+import { parseStepName, parseWorkflowName } from '@workflow/utils/parse-name';
 import type { Event, Hook, WorkflowRun } from '@workflow/world';
 import clsx from 'clsx';
 import { Send, Zap } from 'lucide-react';
@@ -62,6 +63,7 @@ export function EntityDetailPanel({
   isDecrypting = false,
   selectedSpan,
   showSeparateEventOccurrenceTimestamps = false,
+  getModuleSourceUrl,
 }: {
   run: WorkflowRun;
   /** Callback when a stream reference is clicked */
@@ -95,6 +97,10 @@ export function EntityDetailPanel({
   selectedSpan: SelectedSpanInfo | null;
   /** Show occurredAt separately instead of folding it into the Created timestamp. */
   showSeparateEventOccurrenceTimestamps?: boolean;
+  getModuleSourceUrl?: (info: {
+    moduleSpecifier: string;
+    deploymentId: string;
+  }) => string | undefined;
 }): React.JSX.Element | null {
   const toast = useToast();
   const [stoppingSleep, setStoppingSleep] = useState(false);
@@ -277,6 +283,21 @@ export function EntityDetailPanel({
     return undefined;
   }, [displayData, run.workflowName]);
 
+  const moduleSourceUrl = useMemo(() => {
+    if (!getModuleSourceUrl || !moduleSpecifier) return undefined;
+    const parsed =
+      parseStepName(moduleSpecifier) ?? parseWorkflowName(moduleSpecifier);
+    if (!parsed) return undefined;
+    const dataDeploymentId = displayData.deploymentId;
+    return getModuleSourceUrl({
+      moduleSpecifier: parsed.moduleSpecifier,
+      deploymentId:
+        typeof dataDeploymentId === 'string'
+          ? dataDeploymentId
+          : run.deploymentId,
+    });
+  }, [getModuleSourceUrl, moduleSpecifier, displayData, run.deploymentId]);
+
   if (!selectedSpan || !resource || !resourceId) {
     return null;
   }
@@ -360,6 +381,7 @@ export function EntityDetailPanel({
           <AttributePanel
             data={displayData}
             moduleSpecifier={moduleSpecifier}
+            moduleSourceUrl={moduleSourceUrl}
             expiredAt={run.expiredAt}
             isLoading={loading}
             error={error ?? undefined}

package/src/components/sidebar/sidebar-data-context.tsx

@@ -29,6 +29,10 @@ export interface SidebarDataContextValue {
   hasEncryptedData?: boolean;
   /** Show occurredAt separately instead of folding it into the Created timestamp. */
   showSeparateEventOccurrenceTimestamps?: boolean;
+  getModuleSourceUrl?: (info: {
+    moduleSpecifier: string;
+    deploymentId: string;
+  }) => string | undefined;
 }
 
 const SidebarDataContext = createContext<SidebarDataContextValue | null>(null);

package/src/lib/utils.test.ts

@@ -0,0 +1,33 @@
+import { describe, expect, it } from 'vitest';
+import { formatDurationPrecise } from './utils';
+
+describe('formatDurationPrecise', () => {
+  it('shows whole milliseconds below 1s', () => {
+    expect(formatDurationPrecise(0)).toBe('0s');
+    expect(formatDurationPrecise(626)).toBe('626ms');
+  });
+
+  it('keeps sub-second precision instead of rounding up to a whole second', () => {
+    // The bug this guards: 1626ms must not read as "2s".
+    expect(formatDurationPrecise(1626)).toBe('1.63s');
+  });
+
+  it('trims trailing zeros so whole/half seconds read cleanly', () => {
+    expect(formatDurationPrecise(2000)).toBe('2s');
+    expect(formatDurationPrecise(1500)).toBe('1.5s');
+    expect(formatDurationPrecise(1600)).toBe('1.6s');
+    expect(formatDurationPrecise(45_000)).toBe('45s');
+  });
+
+  it('honors a custom fraction-digit count (used by the timeline ruler)', () => {
+    // Fewer digits also coarsen the rounding: 1 digit rounds to 100ms.
+    expect(formatDurationPrecise(1500, 1)).toBe('1.5s');
+    expect(formatDurationPrecise(1620, 1)).toBe('1.6s');
+    expect(formatDurationPrecise(2000, 1)).toBe('2s');
+  });
+
+  it('decomposes durations of a minute or more', () => {
+    expect(formatDurationPrecise(65_000)).toBe('1m 5s');
+    expect(formatDurationPrecise(63_450)).toBe('1m 3.45s');
+  });
+});

package/src/lib/utils.ts

@@ -74,25 +74,20 @@ export function formatDuration(ms: number, compact = false): string {
   return parts.join(' ');
 }
 
-// Locale-aware formatter that always renders exactly two fraction digits.
-// Used for the seconds component of precise durations so values are never
-// snapped to a whole second (and thousands separators stay correct).
-const preciseSecondsFormatter = new Intl.NumberFormat(undefined, {
-  minimumFractionDigits: 2,
-  maximumFractionDigits: 2,
-});
-
 /**
  * Formats a duration in milliseconds without snapping to whole seconds.
  *
- * Unlike {@link formatDuration}, this never rounds a sub-minute value up to
- * the next whole second (e.g. 1626ms renders as "1.63s", not "2s").
+ * Unlike {@link formatDuration}, this keeps sub-second detail, so 1626ms
+ * renders as "1.63s" rather than "2s". `fractionDigits` sets both the number of
+ * decimals on the seconds component (trailing zeros trimmed, so 2000ms is "2s"
+ * and 1500ms is "1.5s") and the rounding granularity — the default of 2 rounds
+ * to 10ms; the timeline ruler passes fewer digits to match its tick step.
  *
  * - < 1s: shows whole milliseconds (e.g. "626ms")
- * - 1s – 1m: shows seconds with two decimals (e.g. "1.63s", "45.20s")
- * - >= 1m: decomposes into d/h/m with two-decimal seconds (e.g. "1m 13.45s")
+ * - 1s – 1m: shows seconds with trimmed decimals (e.g. "1.63s", "1.5s", "45s")
+ * - >= 1m: decomposes into d/h/m with trimmed-decimal seconds (e.g. "1m 13.45s")
  */
-export function formatDurationPrecise(ms: number): string {
+export function formatDurationPrecise(ms: number, fractionDigits = 2): string {
   if (ms === 0) {
     return '0s';
   }
@@ -104,10 +99,11 @@ export function formatDurationPrecise(ms: number): string {
     }
   }
 
-  const normalizedMs = Math.round(ms / 10) * 10;
+  const granularityMs = MS_IN_SECOND / 10 ** fractionDigits;
+  const normalizedMs = Math.round(ms / granularityMs) * granularityMs;
 
   if (normalizedMs < MS_IN_MINUTE) {
-    return `${preciseSecondsFormatter.format(normalizedMs / MS_IN_SECOND)}s`;
+    return `${Number((normalizedMs / MS_IN_SECOND).toFixed(fractionDigits))}s`;
   }
 
   const days = Math.floor(normalizedMs / MS_IN_DAY);
@@ -126,7 +122,7 @@ export function formatDurationPrecise(ms: number): string {
   if (minutes > 0) {
     parts.push(`${minutes}m`);
   }
-  parts.push(`${preciseSecondsFormatter.format(seconds)}s`);
+  parts.push(`${Number(seconds.toFixed(fractionDigits))}s`);
 
   return parts.join(' ');
 }