Mitul Shah
eb2b8c988d
* [web-shared] Show precise durations in the new trace viewer The events list and timeline bar labels now render two-decimal seconds for durations over 1s instead of rounding to whole seconds. Co-authored-by: Cursor <cursoragent@cursor.com> * [web-shared] Fix duration rounding at unit boundaries formatDurationPrecise bucketed durations on the raw ms value but only rounded at display time, so inputs just below a unit boundary carried into the next unit without re-bucketing (e.g. 59999ms -> "60.00s"). Round to centisecond precision FIRST, then decompose in integer centisecond space so the seconds component stays in [0.00, 59.99] and carries re-bucket into the next unit (59999ms -> "1m 0.00s"). Co-authored-by: Cursor <cursoragent@cursor.com> * [web-shared] Simplify precise duration formatting Reuse the existing MS_IN_* constants instead of the centisecond decomposition; behavior is unchanged. Co-authored-by: Cursor <cursoragent@cursor.com> --------- Co-authored-by: Cursor <cursoragent@cursor.com>
@workflow/web-shared
Workflow Observability UI primitives. See Workflow SDK for more information.
Usage
This package contains:
- pre-styled, prop-driven UI components (no data fetching)
If you want a full observability experience with server actions already wired, take a look at
@workflow/web instead.
It comes with pre-styled UI components that accept data + callbacks:
import { WorkflowTraceViewer } from '@workflow/web-shared';
export default function MyRunDetailView({
run,
steps,
hooks,
events,
onSpanSelect,
}) {
return (
<WorkflowTraceViewer
run={run}
steps={steps}
hooks={hooks}
events={events}
onSpanSelect={onSpanSelect}
/>
);
}
Server actions and data fetching are intentionally not part of web-shared. Implement those in your app
and pass data + callbacks into these components. If you need world run helpers, use @workflow/core/runtime.
Security notice: If you implement server-side data fetching using
@workflow/world-vercelor similar backends, ensure that user-supplied IDs (runId, stepId, etc.) are validated before passing them to world functions. The server actions in@workflow/webdo not include authentication — see that package's README for details on securing self-hosted deployments.
Styling
In order for tailwind classes to be picked up correctly, you might need to configure your NextJS app to use the correct CSS processor. E.g. if you're using PostCSS with TailwindCSS, you can do the following:
// postcss.config.mjs in your NextJS app
const config = {
plugins: ['@tailwindcss/postcss'],
};
export default config;