mirror of
https://github.com/vercel/workflow.git
synced 2026-09-14 19:59:43 +08:00
Mitul Shah
d06b55e641
* Rename new-trace-viewer to trace-viewer. Move the directory, rename NewTraceViewer to TraceViewer across web-shared and web, and update the build script and README. Signed-off-by: mitul-s <mitulxshah@gmail.com> Co-authored-by: Cursor <cursoragent@cursor.com> * Fix TraceViewer import ordering Signed-off-by: Cursor Agent <cursoragent@cursor.com> --------- Signed-off-by: mitul-s <mitulxshah@gmail.com> Signed-off-by: Cursor Agent <cursoragent@cursor.com> Co-authored-by: Cursor <cursoragent@cursor.com>
49 lines
1.6 KiB
Markdown
49 lines
1.6 KiB
Markdown
# @workflow/web-shared
|
|
|
|
Workflow Observability UI primitives. See [Workflow SDK](https://workflow-sdk.dev/docs/observability) 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`](../web/README.md) instead.
|
|
|
|
It comes with pre-styled UI components that accept data + callbacks:
|
|
|
|
```tsx
|
|
import { TraceViewer } from '@workflow/web-shared';
|
|
|
|
export default function MyRunDetailView({ run, events, fetchSpanDetail }) {
|
|
return (
|
|
<TraceViewer
|
|
run={run}
|
|
events={events}
|
|
sidebarData={{ run, events, fetchSpanDetail }}
|
|
/>
|
|
);
|
|
}
|
|
```
|
|
|
|
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-vercel` or similar backends,
|
|
> ensure that user-supplied IDs (runId, stepId, etc.) are validated before passing them to world functions.
|
|
> The server actions in `@workflow/web` do 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:
|
|
|
|
```tsx
|
|
// postcss.config.mjs in your NextJS app
|
|
const config = {
|
|
plugins: ['@tailwindcss/postcss'],
|
|
};
|
|
|
|
export default config;
|
|
```
|