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
1.6 KiB
@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 { 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-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
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:
// postcss.config.mjs in your Next.js app
const config = {
plugins: ['@tailwindcss/postcss'],
};
export default config;