mirror of
https://github.com/vercel/workflow.git
synced 2026-09-14 19:59:43 +08:00
Nathan Rajlich
e1e64e3de3
* docs: apply Vercel technical writing standards Audit the complete documentation corpus, package READMEs, skills, and source TSDoc/comments against the vercel-technical-writing skill and style-rules.md. Normalize sentence-case headings without changing published anchors, remove prose em dashes and filler wording, improve active voice and self-contained phrasing, standardize product/brand capitalization, American English, list punctuation, units, and code fence languages, and preserve exact runtime strings/table placeholders. All executable code is unchanged. Modified skills have their metadata versions bumped. * docs: extend writing audit to repository Markdown Apply the same technical-writing rules to design documents, compiler specifications, workbench guides, package changelogs, and the remaining tracked Markdown outside the deployed docs corpus. Preserve historical meaning, commands, output literals, table placeholders, and heading anchors. * docs: exclude generated package changelogs from audit
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
|
|
|
|
To detect Tailwind CSS classes correctly, you might need to configure your Next.js app
|
|
to use the correct CSS processor. For example, with PostCSS and Tailwind CSS:
|
|
|
|
```tsx
|
|
// postcss.config.mjs in your Next.js app
|
|
const config = {
|
|
plugins: ['@tailwindcss/postcss'],
|
|
};
|
|
|
|
export default config;
|
|
```
|