mirror of
https://github.com/vercel/workflow.git
synced 2026-09-14 19:59:43 +08:00
Mitul Shah
8393716687
* Add selection-driven span-detail primitives Extract the run/step/hook/sleep fetch+hydrate core out of useWorkflowResourceData into a plain async fetchSpanDetailResource (no React state), and add a selection-driven state machine in web-shared: - deriveSpanDetailView / resourceNeedsFetchedDetail: pure view-model deriver whose status (idle/loading/ready/error) is a function of (selection, fetched detail), so it can never lag the selection. - useSelectedSpanDetail: fetches a selected span's detail directly with a request-token to drop stale/out-of-order responses. * Drive trace detail panel from the span-detail state machine Replace the cross-package selection round-trip (EntityDetailPanel useEffect -> onSpanSelect -> page spanSelection state -> useWorkflowResourceData -> context) with a single injected fetchSpanDetail capability: - EntityDetailPanel consumes useSelectedSpanDetail; its loading state now stays in phase with the selected span, so Input/Output no longer vanish and pop back in while navigating. - SidebarDataContext drops spanDetailData/Loading/Error + onSpanSelect for a single fetchSpanDetail; RunDetailView injects it and drops the duplicate spanSelection state. - WorkflowTraceViewer / RunTraceView take fetchSpanDetail too. * Test span-detail view-model transitions; add changeset Cover deriveSpanDetailView (idle/loading/ready/error, stale-detail rejection, hooks ready inline) and resourceNeedsFetchedDetail. * Trim redundant/narrative comments in span-detail state machine Comment-only cleanup: drop PR-narration and cross-file duplication from the deriveSpanDetailView / useSelectedSpanDetail / EntityDetailPanel / fetchSpanDetail doc comments, keeping the non-obvious intent (request-token, error scoping, decrypt closure). * delete pointless coments --------- Co-authored-by: Cursor Agent <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 { WorkflowTraceViewer } from '@workflow/web-shared';
|
|
|
|
export default function MyRunDetailView({ run, events, fetchSpanDetail }) {
|
|
return (
|
|
<WorkflowTraceViewer
|
|
run={run}
|
|
events={events}
|
|
fetchSpanDetail={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;
|
|
```
|