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>
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 { 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-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;