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

package/dist/lib/utils.js

@@ -66,6 +66,54 @@ export function formatDuration(ms, compact = false) {
     parts.push(`${seconds}s`);
     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) {
+    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 = [];
+    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
@@ -124,4 +172,4 @@ export function identifyStreamSteps(steps) {
         };
     });
 }
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidXRpbHMuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi9zcmMvbGliL3V0aWxzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVBLE9BQU8sRUFBbUIsSUFBSSxFQUFFLE1BQU0sTUFBTSxDQUFDO0FBQzdDLE9BQU8sRUFBRSxPQUFPLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUV6QyxNQUFNLFVBQVUsRUFBRSxDQUFDLEdBQUcsTUFBb0I7SUFDeEMsT0FBTyxPQUFPLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUM7QUFDL0IsQ0FBQztBQUVELE1BQU0sWUFBWSxHQUFHLElBQUksQ0FBQztBQUMxQixNQUFNLFlBQVksR0FBRyxFQUFFLEdBQUcsWUFBWSxDQUFDO0FBQ3ZDLE1BQU0sVUFBVSxHQUFHLEVBQUUsR0FBRyxZQUFZLENBQUM7QUFDckMsTUFBTSxTQUFTLEdBQUcsRUFBRSxHQUFHLFVBQVUsQ0FBQztBQUVsQzs7Ozs7Ozs7Ozs7Ozs7Ozs7R0FpQkc7QUFDSCxNQUFNLFVBQVUsY0FBYyxDQUFDLEVBQVUsRUFBRSxPQUFPLEdBQUcsS0FBSztJQUN4RCxJQUFJLEVBQUUsS0FBSyxDQUFDLEVBQUUsQ0FBQztRQUNiLE9BQU8sSUFBSSxDQUFDO0lBQ2QsQ0FBQztJQUVELElBQUksRUFBRSxHQUFHLFlBQVksRUFBRSxDQUFDO1FBQ3RCLE1BQU0sU0FBUyxHQUFHLElBQUksQ0FBQyxLQUFLLENBQUMsRUFBRSxDQUFDLENBQUM7UUFDakMsT0FBTyxTQUFTLEdBQUcsWUFBWSxDQUFDLENBQUMsQ0FBQyxHQUFHLFNBQVMsSUFBSSxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUM7SUFDNUQsQ0FBQztJQUVELE1BQU0sU0FBUyxHQUFHLElBQUksQ0FBQyxLQUFLLENBQUMsRUFBRSxHQUFHLFlBQVksQ0FBQyxHQUFHLFlBQVksQ0FBQztJQUUvRCxJQUFJLFNBQVMsR0FBRyxZQUFZLEVBQUUsQ0FBQztRQUM3QixPQUFPLEdBQUcsSUFB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O0lBQ0osQ0FBQyxDQUFDLENBQUM7QUFDUCxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHR5cGUgeyBTdGVwIH0gZnJvbSAnQHdvcmtmbG93L3dvcmxkJztcbmltcG9ydCB0eXBlIHsgTW9kZWxNZXNzYWdlIH0gZnJvbSAnYWknO1xuaW1wb3J0IHsgdHlwZSBDbGFzc1ZhbHVlLCBjbHN4IH0gZnJvbSAnY2xzeCc7XG5pbXBvcnQgeyB0d01lcmdlIH0gZnJvbSAndGFpbHdpbmQtbWVyZ2UnO1xuXG5leHBvcnQgZnVuY3Rpb24gY24oLi4uaW5wdXRzOiBDbGFzc1ZhbHVlW10pIHtcbiAgcmV0dXJuIHR3TWVyZ2UoY2xzeChpbnB1dHMpKTtcbn1cblxuY29uc3QgTVNfSU5fU0VDT05EID0gMTAwMDtcbmNvbnN0IE1TX0lOX01JTlVURSA9IDYwICogTVNfSU5fU0VDT05EO1xuY29uc3QgTVNfSU5fSE9VUiA9IDYwICogTVNfSU5fTUlOVVRFO1xuY29uc3QgTVNfSU5fREFZID0gMjQgKiBNU19JTl9IT1VSO1xuXG4vKipcbiAqIEZvcm1hdHMgYSBkdXJhdGlvbiBpbiBtaWxsaXNlY29uZHMgdG8gYSBodW1hbi1yZWFkYWJsZSBzdHJpbmcuXG4gKlxuICogQHBhcmFtIG1zIC0gRHVyYXRpb24gaW4gbWlsbGlzZWNvbmRzXG4gKiBAcGFyYW0gY29tcGFjdCAtIElmIHRydWUsIHJldHVybnMgYSBjb21wYWN0IGZvcm1hdCAoZS5nLiwgXCIzODBtc1wiLCBcIjJtIDMwc1wiKS5cbiAqICAgICAgICAgICAgICAgICAgSWYgZmFsc2UgKGRlZmF1bHQpLCByZXR1cm5zIG11bHRpLXBhcnQgZm9ybWF0IChlLmcuLCBcIjFtIDEzc1wiLCBcIjJkIDVoIDNtIDEyc1wiKS5cbiAqXG4gKiBDb21wYWN0IGZvcm1hdCAodGltZWxpbmUgbWFya2Vycyk6XG4gKiAtIDwgMXM6IHNob3dzIG1pbGxpc2Vjb25kcyAoZS5nLiwgXCIzODBtc1wiKVxuICogLSA8IDFtOiBzaG93cyBzZWNvbmRzIChlLmcuLCBcIjQ1c1wiKVxuICogLSA8IDFoOiBzaG93cyBtaW51dGVzIGFuZCBzZWNvbmRzIChlLmcuLCBcIjJtIDMwc1wiKVxuICogLSA+PSAxaDogc2hvd3MgaG91cnMgYW5kIG1pbnV0ZXMgKGUuZy4sIFwiMmggMzBtXCIpXG4gKlxuICogRnVsbCBmb3JtYXQ6XG4gKiAtIDwgMXM6IHNob3dzIG1pbGxpc2Vjb25kcyAoZS5nLiwgXCIzODBtc1wiKVxuICogLSA8IDFtOiBzaG93cyBzZWNvbmRzIChlLmcuLCBcIjQ1c1wiKVxuICogLSA+PSAxbTogc2hvd3MgZGVjb21wb3NlZCBmb3JtYXQgd2l0aCB3aG9sZSBzZWNvbmRzIChlLmcuLCBcIjFtIDEzc1wiLCBcIjJtIDEzc1wiKVxuICovXG5leHBvcnQgZnVuY3Rpb24gZm9ybWF0RHVyYXRpb24obXM6IG51bWJlciwgY29tcGFjdCA9IGZhbHNlKTogc3RyaW5nIHtcbiAgaWYgKG1zID09PSAwKSB7XG4gICAgcmV0dXJuICcwcyc7XG4gIH1cblxuICBpZiAobXMgPCBNU19JTl9TRUNPTkQpIHtcbiAgICBjb25zdCByb3VuZGVkTXMgPSBNYXRoLnJvdW5kKG1zKTtcbiAgICByZXR1cm4gcm91bmRlZE1zIDwgTVNfSU5fU0VDT05EID8gYCR7cm91bmRlZE1zfW1zYCA6ICcxcyc7XG4gIH1cblxuICBjb25zdCByb3VuZGVkTXMgPSBNYXRoLnJvdW5kKG1zIC8gTVNfSU5fU0VDT05EKSAqIE1TX0lOX1NFQ09ORDtcblxuICBpZiAocm91bmRlZE1zIDwgTVNfSU5fTUlOVVRFKSB7XG4gICAgcmV0dXJuIGAke01hdGguZmxvb3Iocm91bmRlZE1zIC8gTVNfSU5fU0VDT05EKX1zYDtcbiAgfVxuXG4gIC8vIENvbXBhY3QgZm9ybWF0OiBtdWx0aS11bml0IHdpdGhvdXQgZGVjaW1hbHMgKGUuZy4gXCI4bSAyMHNcIiwgXCIyaCAzMG1cIilcbiAgaWYgKGNvbXBhY3QpIHtcbiAgICBpZiAocm91bmRlZE1zIDwgTVNfSU5fSE9VUikge1xuICAgICAgY29uc3QgbSA9IE1hdGguZmxvb3Iocm91bmRlZE1zIC8gTVNfSU5fTUlOVVRFKTtcbiAgICAgIGNvbnN0IHMgPSBNYXRoLmZsb29yKChyb3VuZGVkTXMgJSBNU19JTl9NSU5VVEUpIC8gTVNfSU5fU0VDT05EKTtcbiAgICAgIHJldHVybiBzID4gMCA/IGAke219bSAke3N9c2AgOiBgJHttfW1gO1xuICAgIH1cbiAgICBjb25zdCBoID0gTWF0aC5mbG9vcihyb3VuZGVkTXMgLyBNU19JTl9IT1VSKTtcbiAgICBjb25zdCBtID0gTWF0aC5mbG9vcigocm91bmRlZE1zICUgTVNfSU5fSE9VUikgLyBNU19JTl9NSU5VVEUpO1xuICAgIHJldHVybiBtID4gMCA/IGAke2h9aCAke219bWAgOiBgJHtofWhgO1xuICB9XG5cbiAgLy8gRnVsbCBmb3JtYXQ6IGRlY29tcG9zZSBpbnRvIGxhcmdlciB1bml0cyArIHdob2xlIHNlY29uZHMuXG4gIGNvbnN0IGRheXMgPSBNYXRoLmZsb29yKHJvdW5kZWRNcyAvIE1TX0lOX0RBWSk7XG4gIGNvbnN0IGhvdXJzID0gTWF0aC5mbG9vcigocm91bmRlZE1zICUgTVNfSU5fREFZKSAvIE1TX0lOX0hPVVIpO1xuICBjb25zdCBtaW51dGVzID0gTWF0aC5mbG9vcigocm91bmRlZE1zICUgTVNfSU5fSE9VUikgLyBNU19JTl9NSU5VVEUpO1xuICBjb25zdCBzZWNvbmRzID0gTWF0aC5mbG9vcigocm91bmRlZE1zICUgTVNfSU5fTUlOVVRFKSAvIE1TX0lOX1NFQ09ORCk7XG5cbiAgY29uc3QgcGFydHM6IHN0cmluZ1tdID0gW107XG5cbiAgaWYgKGRheXMgPiAwKSB7XG4gICAgcGFydHMucHVzaChgJHtkYXlzfWRgKTtcbiAgfVxuICBpZiAoaG91cnMgPiAwKSB7XG4gICAgcGFydHMucHVzaChgJHtob3Vyc31oYCk7XG4gIH1cbiAgaWYgKG1pbnV0ZXMgPiAwKSB7XG4gICAgcGFydHMucHVzaChgJHttaW51dGVzfW1gKTtcbiAgfVxuICBwYXJ0cy5wdXNoKGAke3NlY29uZHN9c2ApO1xuXG4gIHJldHVybiBwYXJ0cy5qb2luKCcgJyk7XG59XG5cbi8qKlxuICogUmV0dXJucyBhIGZvcm1hdHRlZCBwYWdpbmF0aW9uIGRpc3BsYXkgc3RyaW5nXG4gKiBAcGFyYW0gY3VycmVudFBhZ2UgLSBUaGUgY3VycmVudCBwYWdlIG51bWJlclxuICogQHBhcmFtIHRvdGFsUGFnZXMgLSBUaGUgdG90YWwgbnVtYmVyIG9mIHBhZ2VzIHZpc2l0ZWQgc28gZmFyXG4gKiBAcGFyYW0gaGFzTW9yZSAtIFdoZXRoZXIgdGhlcmUgYXJlIG1vcmUgcGFnZXMgYXZhaWxhYmxlXG4gKiBAcmV0dXJucyBGb3JtYXR0ZWQgc3RyaW5nIGxpa2UgXCJQYWdlIDEgb2YgMytcIiBvciBcIlBhZ2UgMiBvZiAyXCJcbiAqL1xuZXhwb3J0IGZ1bmN0aW9uIGdldFBhZ2luYXRpb25EaXNwbGF5KFxuICBjdXJyZW50UGFnZTogbnVtYmVyLFxuICB0b3RhbFBhZ2VzOiBudW1iZXIsXG4gIGhhc01vcmU6IGJvb2xlYW5cbik6IHN0cmluZyB7XG4gIGlmIChoYXNNb3JlKSB7XG4gICAgcmV0dXJuIGBQYWdlICR7Y3VycmVudFBhZ2V9IG9mICR7dG90YWxQYWdlc30rYDtcbiAgfVxuICByZXR1cm4gYFBhZ2UgJHtjdXJyZW50UGFnZX0gb2YgJHt0b3RhbFBhZ2VzfWA7XG59XG5cbi8vID09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT1cbi8vIER1cmFibGUgQWdlbnQgVXRpbGl0aWVzXG4vLyA9PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09XG5cbi8qKlxuICogQ2hlY2sgaWYgYSBzdGVwIGlzIGEgZG9TdHJlYW1TdGVwIChMTE0gY2FsbCB3aXRoIGNvbnZlcnNhdGlvbiBpbnB1dClcbiAqL1xuZXhwb3J0IGZ1bmN0aW9uIGlzRG9TdHJlYW1TdGVwKHN0ZXBOYW1lOiBzdHJpbmcpOiBib29sZWFuIHtcbiAgcmV0dXJuIHN0ZXBOYW1lLmVuZHNXaXRoKCcvL2RvU3RyZWFtU3RlcCcpO1xufVxuXG4vKipcbiAqIEV4dHJhY3QgdGhlIGNvbnZlcnNhdGlvbiBmcm9tIGEgaHlkcmF0ZWQgZG9TdHJlYW1TdGVwIGlucHV0LlxuICogZG9TdHJlYW1TdGVwIHNpZ25hdHVyZTogKGNvbnZlcnNhdGlvblByb21wdCwgbW9kZWwsIHdyaXRhYmxlLCB0b29scywgb3B0aW9ucylcbiAqIFNvIGlucHV0WzBdIGlzIHRoZSBjb252ZXJzYXRpb24uXG4gKi9cbmV4cG9ydCBmdW5jdGlvbiBleHRyYWN0Q29udmVyc2F0aW9uKHN0ZXBJbnB1dDogdW5rbm93bik6IE1vZGVsTWVzc2FnZVtdIHwgbnVsbCB7XG4gIGlmICghQXJyYXkuaXNBcnJheShzdGVwSW5wdXQpIHx8IHN0ZXBJbnB1dC5sZW5ndGggPT09IDApIHtcbiAgICByZXR1cm4gbnVsbDtcbiAgfVxuXG4gIGNvbnN0IGZpcnN0QXJnID0gc3RlcElucHV0WzBdO1xuXG4gIGlmICghQXJyYXkuaXNBcnJheShmaXJzdEFyZykpIHtcbiAgICByZXR1cm4gbnVsbDtcbiAgfVxuXG4gIC8vIFZhbGlkYXRlIGl0IGxvb2tzIGxpa2UgTW9kZWxNZXNzYWdlW11cbiAgaWYgKFxuICAgICFmaXJzdEFyZy5ldmVyeSgobXNnKSA9PiBtc2cgJiYgdHlwZW9mIG1zZyA9PT0gJ29iamVjdCcgJiYgJ3JvbGUnIGluIG1zZylcbiAgKSB7XG4gICAgcmV0dXJuIG51bGw7XG4gIH1cblxuICByZXR1cm4gZmlyc3RBcmcgYXMgTW9kZWxNZXNzYWdlW107XG59XG5cbi8qKlxuICogQSBkb1N0cmVhbVN0ZXAgd2l0aCBpdHMgY29udmVyc2F0aW9uIGlucHV0IGV4dHJhY3RlZFxuICovXG5leHBvcnQgaW50ZXJmYWNlIFN0cmVhbVN0ZXAge1xuICBzdGVwSWQ6IHN0cmluZztcbiAgc3RlcE5hbWU6IHN0cmluZztcbiAgZGlzcGxheU5hbWU6IHN0cmluZztcbiAgY29udmVyc2F0aW9uOiBNb2RlbE1lc3NhZ2VbXTtcbn1cblxuLyoqXG4gKiBJZGVudGlmaWVzIGFsbCBzdHJlYW0gc3RlcHMgKGRvU3RyZWFtU3RlcCkgaW4gYSBydW4gYW5kIGV4dHJhY3RzIHRoZWlyIGNvbnZlcnNhdGlvbnMuXG4gKi9cbmV4cG9ydCBmdW5jdGlvbiBpZGVudGlmeVN0cmVhbVN0ZXBzKHN0ZXBzOiBTdGVwW10pOiBTdHJlYW1TdGVwW10ge1xuICByZXR1cm4gc3RlcHNcbiAgICAuZmlsdGVyKChzdGVwKSA9PiBpc0RvU3RyZWFtU3RlcChzdGVwLnN0ZXBOYW1lKSlcbiAgICAubWFwKChzdGVwKSA9PiB7XG4gICAgICBjb25zdCBmdW5jdGlvbk5hbWUgPSBzdGVwLnN0ZXBOYW1lLnNwbGl0KCcvLycpLnBvcCgpID8/ICd1bmtub3duJztcbiAgICAgIGNvbnN0IGNvbnZlcnNhdGlvbiA9IGV4dHJhY3RDb252ZXJzYXRpb24oc3RlcC5pbnB1dCkgPz8gW107XG5cbiAgICAgIHJldHVybiB7XG4gICAgICAgIHN0ZXBJZDogc3RlcC5zdGVwSWQsXG4gICAgICAgIHN0ZXBOYW1lOiBzdGVwLnN0ZXBOYW1lLFxuICAgICAgICBkaXNwbGF5TmFtZTogZnVuY3Rpb25OYW1lLFxuICAgICAgICBjb252ZXJzYXRpb24sXG4gICAgICB9O1xuICAgIH0pO1xufVxuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidXRpbHMuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi9zcmMvbGliL3V0aWxzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVBLE9BQU8sRUFBbUIsSUFBSSxFQUFFLE1BQU0sTUFBTSxDQUFDO0FBQzdDLE9BQU8sRUFBRSxPQUFPLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUV6QyxNQUFNLFVBQVUsRUFBRSxDQUFDLEdBQUcsTUFBb0I7SUFDeEMsT0FBTyxPQUFPLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUM7QUFDL0IsQ0FBQztBQUVELE1BQU0sWUFBWSxHQUFHLElBQUksQ0FBQztBQUMxQixNQUFNLFlBQVksR0FBRyxFQUFFLEdBQUcsWUFBWSxDQUFDO0FBQ3ZDLE1BQU0sVUFBVSxHQUFHLEVBQUUsR0FBRyxZQUFZLENBQUM7QUFDckMsTUFBTSxTQUFTLEdBQUcsRUFBRSxHQUFHLFVBQVUsQ0FBQztBQUVsQzs7Ozs7Ozs7Ozs7Ozs7Ozs7R0FpQkc7QUFDSCxNQUFNLFVBQVUsY0FBYyxDQUFDLEVBQVUsRUFBRSxPQUFPLEdBQUcsS0FBSztJQUN4RCxJQUFJLEVBQUUsS0FBSyxDQUFDLEVBQUUsQ0FBQztRQUNiLE9BQU8sSUFBSSxDQUFDO0lBQ2QsQ0FBQztJQUVELElBQUksRUFBRSxHQUFHLFlBQVksRUFBRSxDQUFDO1FBQ3RCLE1BQU0sU0FBUyxHQUFHLElBQUksQ0FBQyxLQUFLLENBQUMsRUFBRSxDQUFDLENBQUM7UUFDakMsT0FBTyxTQUFTLEdBQUcsWUFBWSxDQUFDLENBQUMsQ0FBQyxHQUFHLFNBQVMsSUFBSSxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUM7SUFDNUQsQ0FBQztJQUVELE1BQU0sU0FBUyxHQUFHLElBQUksQ0FBQyxLQUFLLENBQUMsRUFBRSxHQUFHLFlBQVksQ0FBQyxHQUFHLFlBQVksQ0FBQztJQUUvRCxJQUFJLFNBQVMsR0FBRyxZQUFZLEVBQUUsQ0FBQztRQUM3QixPQUFPLEdBQUcsSUFB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QU8sSUFBSSxDQUFDO0lBQ2QsQ0FBQztJQUVELE9BQU8sUUFBMEIsQ0FBQztBQUNwQyxDQUFDO0FBWUQ7O0dBRUc7QUFDSCxNQUFNLFVBQVUsbUJBQW1CLENBQUMsS0FBYTtJQUMvQyxPQUFPLEtBQUs7U0FDVCxNQUFNLENBQUMsQ0FBQyxJQUFJLEVBQUUsRUFBRSxDQUFDLGNBQWMsQ0FBQyxJQUFJLENBQUMsUUFBUSxDQUFDLENBQUM7U0FDL0MsR0FBRyxDQUFDLENBQUMsSUFBSSxFQUFFLEVBQUU7UUFDWixNQUFNLFlBQVksR0FBRyxJQUFJLENBQUMsUUFBUSxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsQ0FBQyxHQUFHLEVBQUUsSUFBSSxTQUFTLENBQUM7UUFDbEUsTUFBTSxZQUFZLEdBQUcsbUJBQW1CLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLEVBQUUsQ0FBQztRQUUzRCxPQUFPO1lBQ0wsTUFBTSxFQUFFLElBQUksQ0FBQyxNQUFNO1lBQ25CLFFBQVEsRUFBRSxJQUFJLENBQUMsUUFBUTtZQUN2QixXQUFXLEVBQUUsWUFBWTtZQUN6QixZQUFZO1NBQ2IsQ0FBQztJQUNKLENBQUMsQ0FBQyxDQUFDO0FBQ1AsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB0eXBlIHsgU3RlcCB9IGZyb20gJ0B3b3JrZmxvdy93b3JsZCc7XG5pbXBvcnQgdHlwZSB7IE1vZGVsTWVzc2FnZSB9IGZyb20gJ2FpJztcbmltcG9ydCB7IHR5cGUgQ2xhc3NWYWx1ZSwgY2xzeCB9IGZyb20gJ2Nsc3gnO1xuaW1wb3J0IHsgdHdNZXJnZSB9IGZyb20gJ3RhaWx3aW5kLW1lcmdlJztcblxuZXhwb3J0IGZ1bmN0aW9uIGNuKC4uLmlucHV0czogQ2xhc3NWYWx1ZVtdKSB7XG4gIHJldHVybiB0d01lcmdlKGNsc3goaW5wdXRzKSk7XG59XG5cbmNvbnN0IE1TX0lOX1NFQ09ORCA9IDEwMDA7XG5jb25zdCBNU19JTl9NSU5VVEUgPSA2MCAqIE1TX0lOX1NFQ09ORDtcbmNvbnN0IE1TX0lOX0hPVVIgPSA2MCAqIE1TX0lOX01JTlVURTtcbmNvbnN0IE1TX0lOX0RBWSA9IDI0ICogTVNfSU5fSE9VUjtcblxuLyoqXG4gKiBGb3JtYXRzIGEgZHVyYXRpb24gaW4gbWlsbGlzZWNvbmRzIHRvIGEgaHVtYW4tcmVhZGFibGUgc3RyaW5nLlxuICpcbiAqIEBwYXJhbSBtcyAtIER1cmF0aW9uIGluIG1pbGxpc2Vjb25kc1xuICogQHBhcmFtIGNvbXBhY3QgLSBJZiB0cnVlLCByZXR1cm5zIGEgY29tcGFjdCBmb3JtYXQgKGUuZy4sIFwiMzgwbXNcIiwgXCIybSAzMHNcIikuXG4gKiAgICAgICAgICAgICAgICAgIElmIGZhbHNlIChkZWZhdWx0KSwgcmV0dXJucyBtdWx0aS1wYXJ0IGZvcm1hdCAoZS5nLiwgXCIxbSAxM3NcIiwgXCIyZCA1aCAzbSAxMnNcIikuXG4gKlxuICogQ29tcGFjdCBmb3JtYXQgKHRpbWVsaW5lIG1hcmtlcnMpOlxuICogLSA8IDFzOiBzaG93cyBtaWxsaXNlY29uZHMgKGUuZy4sIFwiMzgwbXNcIilcbiAqIC0gPCAxbTogc2hvd3Mgc2Vjb25kcyAoZS5nLiwgXCI0NXNcIilcbiAqIC0gPCAxaDogc2hvd3MgbWludXRlcyBhbmQgc2Vjb25kcyAoZS5nLiwgXCIybSAzMHNcIilcbiAqIC0gPj0gMWg6IHNob3dzIGhvdXJzIGFuZCBtaW51dGVzIChlLmcuLCBcIjJoIDMwbVwiKVxuICpcbiAqIEZ1bGwgZm9ybWF0OlxuICogLSA8IDFzOiBzaG93cyBtaWxsaXNlY29uZHMgKGUuZy4sIFwiMzgwbXNcIilcbiAqIC0gPCAxbTogc2hvd3Mgc2Vjb25kcyAoZS5nLiwgXCI0NXNcIilcbiAqIC0gPj0gMW06IHNob3dzIGRlY29tcG9zZWQgZm9ybWF0IHdpdGggd2hvbGUgc2Vjb25kcyAoZS5nLiwgXCIxbSAxM3NcIiwgXCIybSAxM3NcIilcbiAqL1xuZXhwb3J0IGZ1bmN0aW9uIGZvcm1hdER1cmF0aW9uKG1zOiBudW1iZXIsIGNvbXBhY3QgPSBmYWxzZSk6IHN0cmluZyB7XG4gIGlmIChtcyA9PT0gMCkge1xuICAgIHJldHVybiAnMHMnO1xuICB9XG5cbiAgaWYgKG1zIDwgTVNfSU5fU0VDT05EKSB7XG4gICAgY29uc3Qgcm91bmRlZE1zID0gTWF0aC5yb3VuZChtcyk7XG4gICAgcmV0dXJuIHJvdW5kZWRNcyA8IE1TX0lOX1NFQ09ORCA/IGAke3JvdW5kZWRNc31tc2AgOiAnMXMnO1xuICB9XG5cbiAgY29uc3Qgcm91bmRlZE1zID0gTWF0aC5yb3VuZChtcyAvIE1TX0lOX1NFQ09ORCkgKiBNU19JTl9TRUNPTkQ7XG5cbiAgaWYgKHJvdW5kZWRNcyA8IE1TX0lOX01JTlVURSkge1xuICAgIHJldHVybiBgJHtNYXRoLmZsb29yKHJvdW5kZWRNcyAvIE1TX0lOX1NFQ09ORCl9c2A7XG4gIH1cblxuICAvLyBDb21wYWN0IGZvcm1hdDogbXVsdGktdW5pdCB3aXRob3V0IGRlY2ltYWxzIChlLmcuIFwiOG0gMjBzXCIsIFwiMmggMzBtXCIpXG4gIGlmIChjb21wYWN0KSB7XG4gICAgaWYgKHJvdW5kZWRNcyA8IE1TX0lOX0hPVVIpIHtcbiAgICAgIGNvbnN0IG0gPSBNYXRoLmZsb29yKHJvdW5kZWRNcyAvIE1TX0lOX01JTlVURSk7XG4gICAgICBjb25zdCBzID0gTWF0aC5mbG9vcigocm91bmRlZE1zICUgTVNfSU5fTUlOVVRFKSAvIE1TX0lOX1NFQ09ORCk7XG4gICAgICByZXR1cm4gcyA+IDAgPyBgJHttfW0gJHtzfXNgIDogYCR7bX1tYDtcbiAgICB9XG4gICAgY29uc3QgaCA9IE1hdGguZmxvb3Iocm91bmRlZE1zIC8gTVNfSU5fSE9VUik7XG4gICAgY29uc3QgbSA9IE1hdGguZmxvb3IoKHJvdW5kZWRNcyAlIE1TX0lOX0hPVVIpIC8gTVNfSU5fTUlOVVRFKTtcbiAgICByZXR1cm4gbSA+IDAgPyBgJHtofWggJHttfW1gIDogYCR7aH1oYDtcbiAgfVxuXG4gIC8vIEZ1bGwgZm9ybWF0OiBkZWNvbXBvc2UgaW50byBsYXJnZXIgdW5pdHMgKyB3aG9sZSBzZWNvbmRzLlxuICBjb25zdCBkYXlzID0gTWF0aC5mbG9vcihyb3VuZGVkTXMgLyBNU19JTl9EQVkpO1xuICBjb25zdCBob3VycyA9IE1hdGguZmxvb3IoKHJvdW5kZWRNcyAlIE1TX0lOX0RBWSkgLyBNU19JTl9IT1VSKTtcbiAgY29uc3QgbWludXRlcyA9IE1hdGguZmxvb3IoKHJvdW5kZWRNcyAlIE1TX0lOX0hPVVIpIC8gTVNfSU5fTUlOVVRFKTtcbiAgY29uc3Qgc2Vjb25kcyA9IE1hdGguZmxvb3IoKHJvdW5kZWRNcyAlIE1TX0lOX01JTlVURSkgLyBNU19JTl9TRUNPTkQpO1xuXG4gIGNvbnN0IHBhcnRzOiBzdHJpbmdbXSA9IFtdO1xuXG4gIGlmIChkYXlzID4gMCkge1xuICAgIHBhcnRzLnB1c2goYCR7ZGF5c31kYCk7XG4gIH1cbiAgaWYgKGhvdXJzID4gMCkge1xuICAgIHBhcnRzLnB1c2goYCR7aG91cnN9aGApO1xuICB9XG4gIGlmIChtaW51dGVzID4gMCkge1xuICAgIHBhcnRzLnB1c2goYCR7bWludXRlc31tYCk7XG4gIH1cbiAgcGFydHMucHVzaChgJHtzZWNvbmRzfXNgKTtcblxuICByZXR1cm4gcGFydHMuam9pbignICcpO1xufVxuXG4vLyBMb2NhbGUtYXdhcmUgZm9ybWF0dGVyIHRoYXQgYWx3YXlzIHJlbmRlcnMgZXhhY3RseSB0d28gZnJhY3Rpb24gZGlnaXRzLlxuLy8gVXNlZCBmb3IgdGhlIHNlY29uZHMgY29tcG9uZW50IG9mIHByZWNpc2UgZHVyYXRpb25zIHNvIHZhbHVlcyBhcmUgbmV2ZXJcbi8vIHNuYXBwZWQgdG8gYSB3aG9sZSBzZWNvbmQgKGFuZCB0aG91c2FuZHMgc2VwYXJhdG9ycyBzdGF5IGNvcnJlY3QpLlxuY29uc3QgcHJlY2lzZVNlY29uZHNGb3JtYXR0ZXIgPSBuZXcgSW50bC5OdW1iZXJGb3JtYXQodW5kZWZpbmVkLCB7XG4gIG1pbmltdW1GcmFjdGlvbkRpZ2l0czogMixcbiAgbWF4aW11bUZyYWN0aW9uRGlnaXRzOiAyLFxufSk7XG5cbi8qKlxuICogRm9ybWF0cyBhIGR1cmF0aW9uIGluIG1pbGxpc2Vjb25kcyB3aXRob3V0IHNuYXBwaW5nIHRvIHdob2xlIHNlY29uZHMuXG4gKlxuICogVW5saWtlIHtAbGluayBmb3JtYXREdXJhdGlvbn0sIHRoaXMgbmV2ZXIgcm91bmRzIGEgc3ViLW1pbnV0ZSB2YWx1ZSB1cCB0b1xuICogdGhlIG5leHQgd2hvbGUgc2Vjb25kIChlLmcuIDE2MjZtcyByZW5kZXJzIGFzIFwiMS42M3NcIiwgbm90IFwiMnNcIikuXG4gKlxuICogLSA8IDFzOiBzaG93cyB3aG9sZSBtaWxsaXNlY29uZHMgKGUuZy4gXCI2MjZtc1wiKVxuICogLSAxcyDigJMgMW06IHNob3dzIHNlY29uZHMgd2l0aCB0d28gZGVjaW1hbHMgKGUuZy4gXCIxLjYzc1wiLCBcIjQ1LjIwc1wiKVxuICogLSA+PSAxbTogZGVjb21wb3NlcyBpbnRvIGQvaC9tIHdpdGggdHdvLWRlY2ltYWwgc2Vjb25kcyAoZS5nLiBcIjFtIDEzLjQ1c1wiKVxuICovXG5leHBvcnQgZnVuY3Rpb24gZm9ybWF0RHVyYXRpb25QcmVjaXNlKG1zOiBudW1iZXIpOiBzdHJpbmcge1xuICBpZiAobXMgPT09IDApIHtcbiAgICByZXR1cm4gJzBzJztcbiAgfVxuXG4gIGlmIChtcyA8IE1TX0lOX1NFQ09ORCkge1xuICAgIGNvbnN0IHJvdW5kZWRNcyA9IE1hdGgucm91bmQobXMpO1xuICAgIGlmIChyb3VuZGVkTXMgPCBNU19JTl9TRUNPTkQpIHtcbiAgICAgIHJldHVybiBgJHtyb3VuZGVkTXN9bXNgO1xuICAgIH1cbiAgfVxuXG4gIGNvbnN0IG5vcm1hbGl6ZWRNcyA9IE1hdGgucm91bmQobXMgLyAxMCkgKiAxMDtcblxuICBpZiAobm9ybWFsaXplZE1zIDwgTVNfSU5fTUlOVVRFKSB7XG4gICAgcmV0dXJuIGAke3ByZWNpc2VTZWNvbmRzRm9ybWF0dGVyLmZvcm1hdChub3JtYWxpemVkTXMgLyBNU19JTl9TRUNPTkQpfXNgO1xuICB9XG5cbiAgY29uc3QgZGF5cyA9IE1hdGguZmxvb3Iobm9ybWFsaXplZE1zIC8gTVNfSU5fREFZKTtcbiAgY29uc3QgaG91cnMgPSBNYXRoLmZsb29yKChub3JtYWxpemVkTXMgJSBNU19JTl9EQVkpIC8gTVNfSU5fSE9VUik7XG4gIGNvbnN0IG1pbnV0ZXMgPSBNYXRoLmZsb29yKChub3JtYWxpemVkTXMgJSBNU19JTl9IT1VSKSAvIE1TX0lOX01JTlVURSk7XG4gIGNvbnN0IHNlY29uZHMgPSAobm9ybWFsaXplZE1zICUgTVNfSU5fTUlOVVRFKSAvIE1TX0lOX1NFQ09ORDtcblxuICBjb25zdCBwYXJ0czogc3RyaW5nW10gPSBbXTtcblxuICBpZiAoZGF5cyA+IDApIHtcbiAgICBwYXJ0cy5wdXNoKGAke2RheXN9ZGApO1xuICB9XG4gIGlmIChob3VycyA+IDApIHtcbiAgICBwYXJ0cy5wdXNoKGAke2hvdXJzfWhgKTtcbiAgfVxuICBpZiAobWludXRlcyA+IDApIHtcbiAgICBwYXJ0cy5wdXNoKGAke21pbnV0ZXN9bWApO1xuICB9XG4gIHBhcnRzLnB1c2goYCR7cHJlY2lzZVNlY29uZHNGb3JtYXR0ZXIuZm9ybWF0KHNlY29uZHMpfXNgKTtcblxuICByZXR1cm4gcGFydHMuam9pbignICcpO1xufVxuXG4vKipcbiAqIFJldHVybnMgYSBmb3JtYXR0ZWQgcGFnaW5hdGlvbiBkaXNwbGF5IHN0cmluZ1xuICogQHBhcmFtIGN1cnJlbnRQYWdlIC0gVGhlIGN1cnJlbnQgcGFnZSBudW1iZXJcbiAqIEBwYXJhbSB0b3RhbFBhZ2VzIC0gVGhlIHRvdGFsIG51bWJlciBvZiBwYWdlcyB2aXNpdGVkIHNvIGZhclxuICogQHBhcmFtIGhhc01vcmUgLSBXaGV0aGVyIHRoZXJlIGFyZSBtb3JlIHBhZ2VzIGF2YWlsYWJsZVxuICogQHJldHVybnMgRm9ybWF0dGVkIHN0cmluZyBsaWtlIFwiUGFnZSAxIG9mIDMrXCIgb3IgXCJQYWdlIDIgb2YgMlwiXG4gKi9cbmV4cG9ydCBmdW5jdGlvbiBnZXRQYWdpbmF0aW9uRGlzcGxheShcbiAgY3VycmVudFBhZ2U6IG51bWJlcixcbiAgdG90YWxQYWdlczogbnVtYmVyLFxuICBoYXNNb3JlOiBib29sZWFuXG4pOiBzdHJpbmcge1xuICBpZiAoaGFzTW9yZSkge1xuICAgIHJldHVybiBgUGFnZSAke2N1cnJlbnRQYWdlfSBvZiAke3RvdGFsUGFnZXN9K2A7XG4gIH1cbiAgcmV0dXJuIGBQYWdlICR7Y3VycmVudFBhZ2V9IG9mICR7dG90YWxQYWdlc31gO1xufVxuXG4vLyA9PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09XG4vLyBEdXJhYmxlIEFnZW50IFV0aWxpdGllc1xuLy8gPT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PVxuXG4vKipcbiAqIENoZWNrIGlmIGEgc3RlcCBpcyBhIGRvU3RyZWFtU3RlcCAoTExNIGNhbGwgd2l0aCBjb252ZXJzYXRpb24gaW5wdXQpXG4gKi9cbmV4cG9ydCBmdW5jdGlvbiBpc0RvU3RyZWFtU3RlcChzdGVwTmFtZTogc3RyaW5nKTogYm9vbGVhbiB7XG4gIHJldHVybiBzdGVwTmFtZS5lbmRzV2l0aCgnLy9kb1N0cmVhbVN0ZXAnKTtcbn1cblxuLyoqXG4gKiBFeHRyYWN0IHRoZSBjb252ZXJzYXRpb24gZnJvbSBhIGh5ZHJhdGVkIGRvU3RyZWFtU3RlcCBpbnB1dC5cbiAqIGRvU3RyZWFtU3RlcCBzaWduYXR1cmU6IChjb252ZXJzYXRpb25Qcm9tcHQsIG1vZGVsLCB3cml0YWJsZSwgdG9vbHMsIG9wdGlvbnMpXG4gKiBTbyBpbnB1dFswXSBpcyB0aGUgY29udmVyc2F0aW9uLlxuICovXG5leHBvcnQgZnVuY3Rpb24gZXh0cmFjdENvbnZlcnNhdGlvbihzdGVwSW5wdXQ6IHVua25vd24pOiBNb2RlbE1lc3NhZ2VbXSB8IG51bGwge1xuICBpZiAoIUFycmF5LmlzQXJyYXkoc3RlcElucHV0KSB8fCBzdGVwSW5wdXQubGVuZ3RoID09PSAwKSB7XG4gICAgcmV0dXJuIG51bGw7XG4gIH1cblxuICBjb25zdCBmaXJzdEFyZyA9IHN0ZXBJbnB1dFswXTtcblxuICBpZiAoIUFycmF5LmlzQXJyYXkoZmlyc3RBcmcpKSB7XG4gICAgcmV0dXJuIG51bGw7XG4gIH1cblxuICAvLyBWYWxpZGF0ZSBpdCBsb29rcyBsaWtlIE1vZGVsTWVzc2FnZVtdXG4gIGlmIChcbiAgICAhZmlyc3RBcmcuZXZlcnkoKG1zZykgPT4gbXNnICYmIHR5cGVvZiBtc2cgPT09ICdvYmplY3QnICYmICdyb2xlJyBpbiBtc2cpXG4gICkge1xuICAgIHJldHVybiBudWxsO1xuICB9XG5cbiAgcmV0dXJuIGZpcnN0QXJnIGFzIE1vZGVsTWVzc2FnZVtdO1xufVxuXG4vKipcbiAqIEEgZG9TdHJlYW1TdGVwIHdpdGggaXRzIGNvbnZlcnNhdGlvbiBpbnB1dCBleHRyYWN0ZWRcbiAqL1xuZXhwb3J0IGludGVyZmFjZSBTdHJlYW1TdGVwIHtcbiAgc3RlcElkOiBzdHJpbmc7XG4gIHN0ZXBOYW1lOiBzdHJpbmc7XG4gIGRpc3BsYXlOYW1lOiBzdHJpbmc7XG4gIGNvbnZlcnNhdGlvbjogTW9kZWxNZXNzYWdlW107XG59XG5cbi8qKlxuICogSWRlbnRpZmllcyBhbGwgc3RyZWFtIHN0ZXBzIChkb1N0cmVhbVN0ZXApIGluIGEgcnVuIGFuZCBleHRyYWN0cyB0aGVpciBjb252ZXJzYXRpb25zLlxuICovXG5leHBvcnQgZnVuY3Rpb24gaWRlbnRpZnlTdHJlYW1TdGVwcyhzdGVwczogU3RlcFtdKTogU3RyZWFtU3RlcFtdIHtcbiAgcmV0dXJuIHN0ZXBzXG4gICAgLmZpbHRlcigoc3RlcCkgPT4gaXNEb1N0cmVhbVN0ZXAoc3RlcC5zdGVwTmFtZSkpXG4gICAgLm1hcCgoc3RlcCkgPT4ge1xuICAgICAgY29uc3QgZnVuY3Rpb25OYW1lID0gc3RlcC5zdGVwTmFtZS5zcGxpdCgnLy8nKS5wb3AoKSA/PyAndW5rbm93bic7XG4gICAgICBjb25zdCBjb252ZXJzYXRpb24gPSBleHRyYWN0Q29udmVyc2F0aW9uKHN0ZXAuaW5wdXQpID8/IFtdO1xuXG4gICAgICByZXR1cm4ge1xuICAgICAgICBzdGVwSWQ6IHN0ZXAuc3RlcElkLFxuICAgICAgICBzdGVwTmFtZTogc3RlcC5zdGVwTmFtZSxcbiAgICAgICAgZGlzcGxheU5hbWU6IGZ1bmN0aW9uTmFtZSxcbiAgICAgICAgY29udmVyc2F0aW9uLFxuICAgICAgfTtcbiAgICB9KTtcbn1cbiJdfQ==

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@workflow/web-shared",
   "description": "Shared components for Workflow Observability UI",
-  "version": "5.0.0-beta.13",
+  "version": "5.0.0-beta.15",
   "private": false,
   "files": [
     "dist",
@@ -53,9 +53,9 @@
     "streamdown": "2.3.0",
     "tailwind-merge": "3.5.0",
     "tailwindcss": "4",
-    "@workflow/core": "5.0.0-beta.13",
+    "@workflow/core": "5.0.0-beta.15",
     "@workflow/utils": "5.0.0-beta.3",
-    "@workflow/world": "5.0.0-beta.7"
+    "@workflow/world": "5.0.0-beta.9"
   },
   "devDependencies": {
     "@biomejs/biome": "^2.4.4",
@@ -69,7 +69,7 @@
     "@workflow/tsconfig": "5.0.0-beta.0"
   },
   "scripts": {
-    "build": "tsc && cp -r src/components/trace-viewer/*.css dist/components/trace-viewer/ && cp src/styles.css dist/styles.css",
+    "build": "tsc && cp -r src/components/trace-viewer/*.css dist/components/trace-viewer/ && cp src/components/new-trace-viewer/components/*.module.css dist/components/new-trace-viewer/components/ && cp src/styles.css dist/styles.css",
     "dev": "tsc --watch",
     "clean": "tsc --build --clean && rm -r dist ||:",
     "test": "vitest run",

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

@@ -2,7 +2,7 @@ import { Circle } from 'lucide-react';
 import { useRef } from 'react';
 import { cn } from '../../../lib/utils';
 import type { Span } from '../types';
-import { formatDuration } from '../../trace-viewer/util/timing';
+import { formatDurationPrecise } from '../../trace-viewer/util/timing';
 import {
   SleepIcon,
   StepForwardIcon,
@@ -86,7 +86,7 @@ const EventRow = ({
           </div>
           <div className="ml-2 shrink-0">
             <span className="text-label-14 text-gray-900 tabular-nums">
-              {formatDuration(durationMs)}
+              {formatDurationPrecise(durationMs)}
             </span>
           </div>
         </div>

package/src/components/new-trace-viewer/components/timeline.module.css

@@ -0,0 +1,31 @@
+.runningStripes {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  border-radius: 0.25rem;
+  opacity: 0.5;
+  background-image: repeating-linear-gradient(
+    45deg,
+    var(--ds-blue-500) 0,
+    var(--ds-blue-500) 1.5px,
+    transparent 1.5px,
+    transparent 8px
+  );
+  background-size: 11.314px 11.314px;
+  animation: running-stripes 0.6s linear infinite;
+}
+
+@keyframes running-stripes {
+  from {
+    background-position: 0 0;
+  }
+  to {
+    background-position: 11.314px 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .runningStripes {
+    animation: none;
+  }
+}

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

@@ -5,7 +5,11 @@ import type { CSSProperties, ReactNode } from 'react';
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { cn } from '../../../lib/utils';
 import type { Span } from '../types';
-import { formatDuration, getHighResInMs } from '../../trace-viewer/util/timing';
+import {
+  formatDuration,
+  formatDurationPrecise,
+  getHighResInMs,
+} from '../../trace-viewer/util/timing';
 import { isSpanDimmedBySearch, type SpanSearchResult } from '../search';
 import type { Segment, SegmentStatus, TimeMarker } from '../utils';
 import {
@@ -15,6 +19,7 @@ import {
   getSpanDurationMs,
 } from '../utils';
 import { ROW_HEIGHT_PX, useRowWindow } from './use-row-window';
+import styles from './timeline.module.css';
 
 // ---------------------------------------------------------------------------
 // Constants
@@ -29,6 +34,7 @@ const SEGMENT_CLASSES: Record<SegmentStatus, string> = {
   retrying: 'bg-gray-400 border border-gray-500',
   waiting: 'bg-gray-400 border border-gray-500',
   running: 'bg-blue-200 border border-blue-500',
+  completed: 'bg-blue-200 border border-blue-500',
   failed: 'bg-red-200 border border-red-500',
   succeeded: 'bg-green-200 border border-green-500',
   sleeping: 'bg-gray-400 border border-gray-500',
@@ -40,6 +46,15 @@ const TIMELINE_INSET_STYLE: CSSProperties = {
   right: TIMELINE_PADDING_PX,
 };
 
+const ACTIVE_SEGMENT_STATUSES: ReadonlySet<SegmentStatus> = new Set([
+  'running',
+  'received',
+]);
+
+function RunningStripes(): ReactNode {
+  return <div aria-hidden className={styles.runningStripes} />;
+}
+
 // ---------------------------------------------------------------------------
 // Bar geometry
 // ---------------------------------------------------------------------------
@@ -218,25 +233,57 @@ function PlainBar({
   );
 }
 
+function LeadInConnector({
+  leftPct,
+  widthPct,
+  label,
+}: {
+  leftPct: number;
+  widthPct: number;
+  label: string | null;
+}): ReactNode {
+  return (
+    <div
+      className="absolute top-1/2 h-6 -translate-y-1/2"
+      style={{
+        left: `calc(${leftPct}% + 0.5px)`,
+        width: `calc(${widthPct}% - 1px)`,
+      }}
+    >
+      <div className="absolute left-0 top-1/2 h-4 w-px -translate-y-1/2 bg-gray-500" />
+      <div className="absolute inset-x-0 top-1/2 h-px -translate-y-1/2 bg-gray-500" />
+      {label ? <DurationLabel label={label} /> : null}
+    </div>
+  );
+}
+
 function SegmentBar({ segments }: { segments: VisibleSegment[] }): ReactNode {
   return (
     <div className="relative h-6 w-full">
       {segments.map((seg, i) => {
-        const label = formatDuration(seg.fullDurationMs);
+        if (seg.status === 'queued') {
+          const leadInLabel = formatDurationPrecise(seg.fullDurationMs);
+          const showLeadInLabel =
+            seg.pixelWidth >= Math.max(40, leadInLabel.length * 6 + 12);
+          return (
+            <LeadInConnector
+              key={i}
+              leftPct={seg.leftPct}
+              widthPct={seg.widthPct}
+              label={showLeadInLabel ? leadInLabel : null}
+            />
+          );
+        }
+
+        const label = formatDurationPrecise(seg.fullDurationMs);
         // Only render the label when there's enough room for it without clipping.
         const showLabel = seg.pixelWidth >= Math.max(40, label.length * 6 + 12);
-        // Beef up the queued segment when it's too narrow to read.
-        const isNarrowQueued = seg.status === 'queued' && seg.pixelWidth < 20;
-        const overrideBg = isNarrowQueued ? 'var(--ds-gray-400)' : undefined;
-        const overrideBorder = isNarrowQueued
-          ? 'var(--ds-gray-500)'
-          : undefined;
 
         return (
           <div
             key={i}
             className={cn(
-              'absolute h-full rounded-[0.25rem]',
+              'absolute h-full overflow-hidden rounded-[0.25rem]',
               SEGMENT_CLASSES[seg.status]
             )}
             style={{
@@ -244,10 +291,11 @@ function SegmentBar({ segments }: { segments: VisibleSegment[] }): ReactNode {
               left: `calc(${seg.leftPct}% + 0.5px)`,
               width: `calc(${seg.widthPct}% - 1px)`,
               minWidth: 1,
-              background: overrideBg,
-              borderColor: overrideBorder,
             }}
           >
+            {ACTIVE_SEGMENT_STATUSES.has(seg.status) ? (
+              <RunningStripes />
+            ) : null}
             {showLabel ? <DurationLabel label={label} /> : null}
           </div>
         );
@@ -313,7 +361,7 @@ const TimelineBar = memo(function TimelineBar({
     ? (colors.errorBorder ?? 'var(--ds-red-500)')
     : colors.border;
 
-  const totalLabel = formatDuration(totalDurationMs);
+  const totalLabel = formatDurationPrecise(totalDurationMs);
   const showTotalLabel =
     geometry.visiblePixelWidth >= Math.max(40, totalLabel.length * 6 + 12);
 

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

@@ -185,6 +185,7 @@ export function getResourceColor(resource: string): {
 export type SegmentStatus =
   | 'queued'
   | 'running'
+  | 'completed'
   | 'failed'
   | 'retrying'
   | 'succeeded'
@@ -373,6 +374,12 @@ function computeSleepSegmentsFromSpan(
   return [{ startFraction: 0, endFraction: 1, status: 'sleeping' }];
 }
 
+function runSegmentStatus(runStatus: string | undefined): SegmentStatus {
+  if (runStatus === 'failed') return 'failed';
+  if (runStatus === 'running' || runStatus === 'pending') return 'running';
+  return 'completed';
+}
+
 function computeRunSegmentsFromSpan(
   startMs: number,
   duration: number,
@@ -387,11 +394,12 @@ function computeRunSegmentsFromSpan(
     .map((e) => ({ name: e.name, time: getHighResInMs(e.timestamp) }))
     .sort((a, b) => a.time - b.time);
 
+  const runData = attributes?.data as Record<string, unknown> | undefined;
+  const runStatus = runData?.status as string | undefined;
+
   const hasRunCreated = sorted.some((e) => e.name === 'run_created');
 
   if (!hasRunCreated) {
-    const runData = attributes?.data as Record<string, unknown> | undefined;
-    const runStatus = runData?.status as string | undefined;
     return computeV1RunSegments(startMs, duration, activeStartMs, runStatus);
   }
 
@@ -413,7 +421,7 @@ function computeRunSegmentsFromSpan(
   segments.push({
     startFraction: cursor,
     endFraction: 1,
-    status: failedEvent ? 'failed' : 'running',
+    status: failedEvent ? 'failed' : runSegmentStatus(runStatus),
   });
 
   return segments;
@@ -443,7 +451,7 @@ function computeV1RunSegments(
   segments.push({
     startFraction: cursor,
     endFraction: 1,
-    status: runStatus === 'failed' ? 'failed' : 'running',
+    status: runSegmentStatus(runStatus),
   });
 
   return segments;

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

@@ -261,6 +261,7 @@ const attributeOrder: AttributeKey[] = [
   'eventData',
   'input',
   'output',
+  'attributes',
   'resumeAt',
 ];
 
@@ -284,6 +285,7 @@ const attributeDisplayNames: Partial<Record<AttributeKey, string>> = {
   runId: 'Run ID',
   token: 'Token',
   eventType: 'Event Type',
+  errorCode: 'Error Code',
   correlationId: 'Correlation ID',
   deploymentId: 'Deployment ID',
   specVersion: 'Spec Version',
@@ -415,11 +417,11 @@ const attributeToDisplayFn: Record<
   environment: (_value: unknown) => null,
   executionContext: (_value: unknown) => null,
   // Attributes MVP — string-string metadata attached to the run.
-  // Rendered as a JSON block; if empty/missing, hidden by the
-  // hasDisplayContent gate above.
+  // Rendered in its own collapsible DetailCard; if empty/missing, hidden
+  // by the hasDisplayContent gate.
   attributes: (value: unknown) => {
     if (!hasDisplayContent(value)) return null;
-    return JsonBlock(value);
+    return <DetailCard summary="Attributes">{JsonBlock(value)}</DetailCard>;
   },
   // Dates — wrapped with TimestampTooltip showing UTC/local + relative time
   createdAt: timestampWithTooltipOrNull,
@@ -588,6 +590,7 @@ const resolvableAttributes = [
   'output',
   'error',
   'metadata',
+  'attributes',
   'eventData',
 ];
 
@@ -597,6 +600,7 @@ const selfHeaderedAttributes = new Set([
   'input',
   'output',
   'error',
+  'attributes',
   'eventData',
 ]);
 

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

@@ -10,6 +10,10 @@ import { AttributePanel } from './attribute-panel';
 import { EventsList } from './events-list';
 import { ResolveHookModal } from './resolve-hook-modal';
 import { useSidebarDataOptional } from './sidebar-data-context';
+import {
+  mergeSpanDetail,
+  spanDetailMatchesSelection,
+} from './span-detail-merge';
 
 // Type guards for runtime validation of span attribute data
 function isStep(data: unknown): data is Step {
@@ -215,19 +219,27 @@ export function EntityDetailPanel({
   const error = spanDetailError ?? undefined;
   const loading = spanDetailLoading ?? false;
 
+  const matchedSpanDetailData = useMemo(
+    () =>
+      spanDetailMatchesSelection(spanDetailData, resource, resourceId)
+        ? spanDetailData
+        : null,
+    [spanDetailData, resource, resourceId]
+  );
+
   // Get the hook token for resolving (prefer fetched data, then hooks array fallback)
   const hookToken = useMemo(() => {
     if (resource !== 'hook' || !resourceId) return undefined;
     // 1. Try the externally-fetched detail data first
-    if (isHook(spanDetailData) && spanDetailData.token) {
-      return spanDetailData.token;
+    if (isHook(matchedSpanDetailData) && matchedSpanDetailData.token) {
+      return matchedSpanDetailData.token;
     }
     // 2. Try the span's inline data (reconstructed from hook_created event)
     if (isHook(data) && (data as Hook).token) {
       return (data as Hook).token;
     }
     return undefined;
-  }, [resource, resourceId, spanDetailData, data]);
+  }, [resource, resourceId, matchedSpanDetailData, data]);
 
   useEffect(() => {
     if (error && selectedSpan && resource) {
@@ -289,7 +301,7 @@ export function EntityDetailPanel({
 
       try {
         setResolvingHook(true);
-        const candidate = spanDetailData ?? data;
+        const candidate = matchedSpanDetailData ?? data;
         const hook = isHook(candidate) ? candidate : undefined;
         await onResolveHook(hookToken, payload, hook);
         toast.success('Hook resolved', {
@@ -310,17 +322,18 @@ export function EntityDetailPanel({
         setResolvingHook(false);
       }
     },
-    [onResolveHook, hookToken, resolvingHook, spanDetailData, data]
+    [onResolveHook, hookToken, resolvingHook, matchedSpanDetailData, data]
   );
 
-  // Prefer externally-fetched details when available. For sleep spans, the
-  // host fetches full correlated events (withData=true) and materializes a wait
-  // entity, so this includes resumeAt/completedAt without bloating trace payloads.
-  const displayData = (spanDetailData ?? data) as
-    | WorkflowRun
-    | Step
-    | Hook
-    | Event;
+  const displayData = useMemo(
+    () =>
+      mergeSpanDetail(data, matchedSpanDetailData) as
+        | WorkflowRun
+        | Step
+        | Hook
+        | Event,
+    [data, matchedSpanDetailData]
+  );
 
   const moduleSpecifier = useMemo(() => {
     const displayRecord = displayData as Record<string, unknown>;
@@ -435,6 +448,8 @@ export function EntityDetailPanel({
             <EventsList
               events={rawEvents}
               onLoadEventData={onLoadEventData}
+              onStreamClick={onStreamClick}
+              onRunClick={onRunClick}
               encryptionKey={encryptionKey}
             />
           )}

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

@@ -3,6 +3,7 @@
 import { EVENT_DATA_REF_FIELDS, type Event } from '@workflow/world';
 import { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { hasEncryptedFields, isExpiredMarker } from '../../lib/hydration';
+import { RunClickContext, StreamClickContext } from '../ui/data-inspector';
 import { ErrorCard } from '../ui/error-card';
 import { ErrorStackBlock, isStructuredError } from '../ui/error-stack-block';
 import { Skeleton } from '../ui/skeleton';
@@ -256,6 +257,8 @@ export function EventsList({
   isLoading = false,
   error,
   onLoadEventData,
+  onStreamClick,
+  onRunClick,
   encryptionKey,
 }: {
   events: Event[];
@@ -265,6 +268,8 @@ export function EventsList({
     correlationId: string,
     eventId: string
   ) => Promise<unknown | null>;
+  onStreamClick?: (streamId: string) => void;
+  onRunClick?: (runId: string) => void;
   /** When provided, signals that decryption is active (triggers re-load of expanded events) */
   encryptionKey?: Uint8Array;
 }) {
@@ -285,31 +290,35 @@ export function EventsList({
   }
 
   return (
-    <DetailCard summary="Events" contentClassName="mb-0" defaultOpen>
-      {isLoading ? (
-        <div className="flex flex-col -mx-4">
-          {[0, 1, 2].map((i) => (
-            <div
-              key={i}
-              className="flex items-center justify-between gap-3 bg-background-200 px-4 py-2"
-            >
-              <Skeleton className="h-4 w-32 rounded" />
-              <Skeleton className="h-3 w-16 rounded" />
+    <RunClickContext.Provider value={onRunClick}>
+      <StreamClickContext.Provider value={onStreamClick}>
+        <DetailCard summary="Events" contentClassName="mb-0" defaultOpen>
+          {isLoading ? (
+            <div className="flex flex-col -mx-4">
+              {[0, 1, 2].map((i) => (
+                <div
+                  key={i}
+                  className="flex items-center justify-between gap-3 bg-background-200 px-4 py-2"
+                >
+                  <Skeleton className="h-4 w-32 rounded" />
+                  <Skeleton className="h-3 w-16 rounded" />
+                </div>
+              ))}
             </div>
-          ))}
-        </div>
-      ) : (
-        <div className="flex flex-col -mx-4">
-          {sortedEvents.map((event) => (
-            <EventItem
-              key={event.eventId}
-              event={event}
-              onLoadEventData={onLoadEventData}
-              encryptionKey={encryptionKey}
-            />
-          ))}
-        </div>
-      )}
-    </DetailCard>
+          ) : (
+            <div className="flex flex-col -mx-4">
+              {sortedEvents.map((event) => (
+                <EventItem
+                  key={event.eventId}
+                  event={event}
+                  onLoadEventData={onLoadEventData}
+                  encryptionKey={encryptionKey}
+                />
+              ))}
+            </div>
+          )}
+        </DetailCard>
+      </StreamClickContext.Provider>
+    </RunClickContext.Provider>
   );
 }