@workflow/web-shared 5.0.0-beta.13 → 5.0.0-beta.15

package/src/components/sidebar/span-detail-merge.ts

@@ -0,0 +1,65 @@
+const hasField = (
+  value: object,
+  key: string
+): value is Record<string, unknown> => key in value;
+
+/**
+ * Returns true when the fetched `detail` belongs to the current selection.
+ * The fetch lags selection, so it can briefly hold a previously selected span
+ * (even a different resource type); reject it before merging or its fields
+ * union into the wrong panel. Steps/hooks/waits carry their parent `runId`, so
+ * a `run` selection excludes objects identifiable as a child resource.
+ */
+export function spanDetailMatchesSelection(
+  detail: unknown,
+  resource: string | undefined,
+  resourceId: string | undefined
+): boolean {
+  if (!detail || typeof detail !== 'object' || !resource || !resourceId) {
+    return false;
+  }
+  switch (resource) {
+    case 'step':
+      return hasField(detail, 'stepId') && detail.stepId === resourceId;
+    case 'hook':
+      return hasField(detail, 'hookId') && detail.hookId === resourceId;
+    case 'sleep':
+      return hasField(detail, 'waitId') && detail.waitId === resourceId;
+    case 'run':
+      return (
+        hasField(detail, 'runId') &&
+        !('stepId' in detail) &&
+        !('hookId' in detail) &&
+        !('waitId' in detail) &&
+        detail.runId === resourceId
+      );
+    default:
+      return false;
+  }
+}
+
+/**
+ * Merges fetched `detail` over the span's own data. The detail supplies the
+ * heavy fields the trace strips (input/output/error/metadata, sleep resumeAt);
+ * the span's identity, status, and event-derived timestamps stay authoritative
+ * so they don't flicker to the backend row's millisecond-different values.
+ */
+export function mergeSpanDetail(spanData: unknown, detail: unknown): unknown {
+  if (!detail || typeof detail !== 'object') {
+    return spanData;
+  }
+  if (!spanData || typeof spanData !== 'object') {
+    return detail;
+  }
+  // Skip `undefined` span fields so they don't clobber a value the detail
+  // legitimately provides (e.g. a step's optional startedAt).
+  const merged: Record<string, unknown> = { ...detail };
+  for (const [key, value] of Object.entries(
+    spanData as Record<string, unknown>
+  )) {
+    if (value !== undefined) {
+      merged[key] = value;
+    }
+  }
+  return merged;
+}

package/src/components/trace-viewer/util/timing.ts

@@ -1,6 +1,6 @@
-import { formatDuration } from '../../../lib/utils';
+import { formatDuration, formatDurationPrecise } from '../../../lib/utils';
 
-export { formatDuration };
+export { formatDuration, formatDurationPrecise };
 
 export function getHighResInMs([seconds, nanoseconds]: [
   number,

package/src/index.ts

@@ -64,6 +64,7 @@ export type { StreamStep } from './lib/utils';
 export {
   extractConversation,
   formatDuration,
+  formatDurationPrecise,
   identifyStreamSteps,
   isDoStreamStep,
 } from './lib/utils';

package/src/lib/utils.ts

@@ -80,6 +80,63 @@ 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").
+ *
+ * - < 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")
+ */
+export function formatDurationPrecise(ms: number): string {
+  if (ms === 0) {
+    return '0s';
+  }
+
+  if (ms < MS_IN_SECOND) {
+    const roundedMs = Math.round(ms);
+    if (roundedMs < MS_IN_SECOND) {
+      return `${roundedMs}ms`;
+    }
+  }
+
+  const normalizedMs = Math.round(ms / 10) * 10;
+
+  if (normalizedMs < MS_IN_MINUTE) {
+    return `${preciseSecondsFormatter.format(normalizedMs / MS_IN_SECOND)}s`;
+  }
+
+  const days = Math.floor(normalizedMs / MS_IN_DAY);
+  const hours = Math.floor((normalizedMs % MS_IN_DAY) / MS_IN_HOUR);
+  const minutes = Math.floor((normalizedMs % MS_IN_HOUR) / MS_IN_MINUTE);
+  const seconds = (normalizedMs % MS_IN_MINUTE) / MS_IN_SECOND;
+
+  const parts: string[] = [];
+
+  if (days > 0) {
+    parts.push(`${days}d`);
+  }
+  if (hours > 0) {
+    parts.push(`${hours}h`);
+  }
+  if (minutes > 0) {
+    parts.push(`${minutes}m`);
+  }
+  parts.push(`${preciseSecondsFormatter.format(seconds)}s`);
+
+  return parts.join(' ');
+}
+
 /**
  * Returns a formatted pagination display string
  * @param currentPage - The current page number