mirror of
https://github.com/vercel/workflow.git
synced 2026-09-14 19:59:43 +08:00
Mitul Shah
53ecc57e4c
* fix(web-shared): align metadata panel styling with attributes section Render hook metadata as key-value rows inside a DetailCard, matching the Attributes section instead of a raw JSON block with a separate label. * fix(web-shared): align top detail panel rows with attributes styling Reuse DetailKeyValueRow for Module, Step ID, timestamps, etc. — same tighter spacing, typography, and no dividers as the Attributes section. * fix(web-shared): collapse top detail rows into Metadata with mono values Wrap Module, Step ID, timestamps, etc. in a Metadata DetailCard and render all values in monospace, including copyable paths and IDs. * fix(web-shared): use contained header style for Metadata section Add a contained DetailCard variant with rounded bg header and drop my-2 in favor of py-2 padding on the section wrapper. * refactor(web-shared): drop reserved badge and use cn for row classes Remove ReservedBadge and showReservedBadge; keep reserved-key sorting only. Use cn() for conditional mono font classes in DetailKeyValueRow. * refactor(web-shared): drop contained DetailCard variant Use the default section DetailCard for Metadata, matching Attributes. * feat(web-shared): extend cn with custom tailwind-merge class groups Add a dedicated cn module that understands text-heading, text-label, text-copy, text-button, and material utilities when merging classes. * chore: note cn tailwind-merge update in changeset * fix(web-shared): remove my-2 from DetailCard summary rows Move vertical spacing to py-2 on the section container instead. * fix(web-shared): scope Metadata spacing override Restore shared DetailCard summary spacing for Input, Output, Events, and Attributes while keeping Metadata tighter with a summaryClassName override. * refactor(web-shared): use CVA variants for detail row value styling Replace the mono boolean and one-off Metadata summary override with CVA-backed row variants and semantic mono row wrapper. * fix(web-shared): use section padding for DetailCard spacing Move spacing from summary margins to section padding and add content top spacing so collapsed and expanded detail cards both breathe consistently. * fix(web-shared): remove expanded Metadata content gap Keep DetailCard's default expanded content spacing for data panels, but let Metadata rows start directly below the title via contentClassName merge. * refactor(web-shared): use Tailwind classes for disabled detail card * refactor(web-shared): use DetailCard compound content * refactor(web-shared): rebuild DetailCard as a compound component Replace the monolithic DetailCard (summary/trailing/disabled props plus child-type reflection for content) with a context-driven compound API: DetailCard + DetailCard.Trigger + DetailCard.Content. Drop the dead trailing branch, expose data-slot/data-state, and migrate all call sites. * refactor(web-shared): rename DetailCard to Collapsible It's a generic collapsible section, not a card-specific component. Rename the component, its parts, data-slots, and the file accordingly. * refactor(web-shared): split Collapsible into all-in-one + parts Export a batteries-included <Collapsible label> for the common case so consumers don't recompose the trigger/content every time, plus CollapsibleRoot/CollapsibleTrigger/CollapsibleContent for the few call sites that need to override part styling. Drop the dot-notation namespace. * refactor(web-shared): move Collapsible into ui directory It's a generic UI primitive, not sidebar-specific. * refactor(web-shared): import cn from lib/cn directly Drop the cn re-export from lib/utils; consumers import it from its actual source instead of routing through utils. * refactor(web-shared): drop cn tailwind-merge changes from this PR Move the extended cn (lib/cn) work to a separate PR; this branch keeps using the existing cn from lib/utils. * ship it --------- Co-authored-by: Cursor Agent <cursoragent@cursor.com>
@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;