Extract web UI API client and trace viewer into shared package

.changeset/pre.json

@@ -12,6 +12,7 @@
     "@workflow/tsconfig": "4.0.0",
     "@workflow/typescript-plugin": "4.0.0",
     "@workflow/web": "4.0.0",
+    "@workflow/web-shared": "4.0.0",
     "workflow": "4.0.0",
     "@workflow/world": "4.0.0",
     "@workflow/world-local": "4.0.0",

.changeset/warm-files-attack.md

@@ -0,0 +1,6 @@
+---
+"@workflow/web-shared": patch
+"@workflow/web": patch
+---
+
+Extract reusable web UI code into shared package

packages/nitro/src/builders.ts

@@ -71,11 +71,13 @@ export class LocalBuilder extends BaseBuilder {
 }
 
 export function getWorkflowDirs(nitro: Nitro) {
-  return unique([
-    ...(nitro.options.workflow?.dirs ?? []),
-    join(nitro.options.rootDir, 'workflows'),
-    ...nitro.options.scanDirs.map((dir) => join(dir, 'workflows')),
-  ].map((dir) => resolve(nitro.options.rootDir, dir))).sort();
+  return unique(
+    [
+      ...(nitro.options.workflow?.dirs ?? []),
+      join(nitro.options.rootDir, 'workflows'),
+      ...nitro.options.scanDirs.map((dir) => join(dir, 'workflows')),
+    ].map((dir) => resolve(nitro.options.rootDir, dir))
+  ).sort();
 }
 
 function unique<T>(array: T[]): T[] {

packages/nitro/src/types.ts

@@ -1,4 +1,4 @@
-  export interface ModuleOptions {
+export interface ModuleOptions {
   /**
    * Directories to scan for workflows and steps.
    *

packages/nitro/test/dirs.test.ts

@@ -3,14 +3,14 @@ import { describe, expect, test } from 'vitest';
 import { getWorkflowDirs } from '../src/builders.ts';
 
 const nitroMock = (dirs: string[]) => {
-  return ({
-        options: {
-          rootDir: '/root',
-          scanDirs: ['/root/server/'],
-          workflow: { dirs: dirs },
-        },
-    }) as unknown as Nitro;
-}
+  return {
+    options: {
+      rootDir: '/root',
+      scanDirs: ['/root/server/'],
+      workflow: { dirs: dirs },
+    },
+  } as unknown as Nitro;
+};
 
 describe('nitro:getWorkflowDirs', () => {
   test('default dirs', () => {
@@ -19,7 +19,9 @@ describe('nitro:getWorkflowDirs', () => {
   });
 
   test('custom dirs', () => {
-    const result = getWorkflowDirs(nitroMock(['./relative/dir1', '/custom/dir2']));
+    const result = getWorkflowDirs(
+      nitroMock(['./relative/dir1', '/custom/dir2'])
+    );
     expect(result).toEqual([
       '/custom/dir2',
       '/root/relative/dir1',

packages/web-shared/.gitignore

@@ -0,0 +1,42 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+.env*.local

packages/web-shared/LICENSE.md

@@ -0,0 +1 @@
+../../LICENSE.md

packages/web-shared/README.md

@@ -0,0 +1,74 @@
+# @workflow/web-shared
+
+Workflow Observability tools for NextJS. See [Workflow DevKit](https://useworkflow.dev/docs/observability) for more information.
+
+## Usage
+
+This package contains client and server code to interact with the Workflow API.
+You can use it like so to display your own runs list:
+
+```tsx
+import { useWorkflowRuns } from '@workflow/web-shared';
+
+export default function MyRunsList() {
+  const {
+    data,
+    error,
+    nextPage,
+    previousPage,
+    hasNextPage,
+    hasPreviousPage,
+    reload,
+    pageInfo,
+  } = useWorkflowRuns(env, {
+    sortOrder,
+    workflowName: workflowNameFilter === 'all' ? undefined : workflowNameFilter,
+    status: status === 'all' ? undefined : status,
+  });
+
+  // Shows an interactive trace viewer for the given run
+  return <div>{runs.map((run) => (
+    <div key={run.runId}>
+      {run.workflowName}
+      {run.status}
+      {run.startedAt}
+      {run.completedAt}
+    </div>
+  ))}</div>;
+}
+```
+
+It also comes with a pre-styled interactive trace viewer that you can use to display the trace for a given run:
+
+```tsx
+import { RunTraceView } from '@workflow/web-shared';
+
+export default function MyRunDetailView({ env, runId }: { env: EnvMap, runId: string }) {
+  // ... your other code
+
+  // Shows an interactive trace viewer for the given run
+  return <RunTraceView env={env} runId={runId} />;
+}
+```
+
+## Environment Variables
+
+For API calls to work, you'll need to pass the same environment variables that are used by the Workflow CLI.
+See `npx workflow inspect --help` for more information.
+
+If you're deploying this as part of your Vercel NextJS app, setting `WORKFLOW_TARGET_WORLD` to `vercel` is enough
+to infer your other project details from the Vercel environment variables.
+
+## 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;
+```

packages/web-shared/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@workflow/web-shared",
+  "description": "Shared components for Workflow Observability UI",
+  "version": "4.0.1-beta.4",
+  "private": false,
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "MIT",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./server": {
+      "types": "./dist/api/workflow-server-actions.d.ts",
+      "default": "./dist/api/workflow-server-actions.js"
+    }
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/vercel/workflow.git",
+    "directory": "packages/web-shared"
+  },
+  "scripts": {
+    "build": "tsc && cp -r src/trace-viewer/*.css dist/trace-viewer/",
+    "dev": "tsc --watch",
+    "clean": "tsc --build --clean && rm -r dist ||:",
+    "typecheck": "tsc --noEmit",
+    "lint": "biome check",
+    "format": "biome format --write"
+  },
+  "dependencies": {
+    "@tailwindcss/postcss": "^4",
+    "@workflow/core": "workspace:*",
+    "@workflow/world": "workspace:*",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "date-fns": "^4.1.0",
+    "lucide-react": "^0.469.0",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "sonner": "^2.0.7",
+    "swr": "^2.3.6",
+    "tailwind-merge": "^2.5.5",
+    "tailwindcss": "^4"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "catalog:",
+    "@types/node": "catalog:",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "typescript": "catalog:",
+    "@workflow/tsconfig": "workspace:*"
+  }
+}

packages/web-shared/postcss.config.mjs

@@ -0,0 +1,5 @@
+const config = {
+  plugins: ['@tailwindcss/postcss'],
+};
+
+export default config;

packages/web/src/workflow-trace-viewer/api/workflow-api-client.ts → packages/web-shared/src/api/workflow-api-client.ts

@@ -8,7 +8,7 @@ import type {
   WorkflowRunStatus,
 } from '@workflow/world';
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { getPaginationDisplay } from '@/lib/utils';
+import { getPaginationDisplay } from '../lib/utils';
 import type { EnvMap, ServerActionError } from './workflow-server-actions';
 import {
   cancelRun as cancelRunServerAction,

packages/web/src/workflow-trace-viewer/api/workflow-server-actions.ts → packages/web-shared/src/api/workflow-server-actions.ts

@@ -174,7 +174,9 @@ export async function fetchRun(
   try {
     const world = getWorldFromEnv(worldEnv);
     const run = await world.runs.get(runId, { resolveData });
-    return createResponse(hydrate(run as WorkflowRun));
+    const hydratedRun = hydrate(run as WorkflowRun);
+    console.log('hydratedRun', hydratedRun.input);
+    return createResponse(hydratedRun);
   } catch (error) {
     console.error('Failed to fetch run:', error);
     return {
@@ -416,11 +418,15 @@ export async function recreateRun(
   try {
     const world = getWorldFromEnv({ ...worldEnv });
     const run = await world.runs.get(runId);
-    const args = run.input;
+    const hydratedRun = hydrate(run as WorkflowRun);
     const deploymentId = run.deploymentId;
-    const newRun = await start({ workflowId: run.workflowName }, args, {
-      deploymentId,
-    });
+    const newRun = await start(
+      { workflowId: run.workflowName },
+      hydratedRun.input,
+      {
+        deploymentId,
+      }
+    );
     return createResponse(newRun.runId);
   } catch (error) {
     console.error('Failed to start run:', error);

packages/web-shared/src/components/ui/alert.tsx

@@ -0,0 +1,59 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+
+import { cn } from '../../lib/utils';
+
+const alertVariants = cva(
+  'relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',
+  {
+    variants: {
+      variant: {
+        default: 'bg-background text-foreground',
+        destructive:
+          'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+);
+
+const Alert = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
+  <div
+    ref={ref}
+    role="alert"
+    className={cn(alertVariants({ variant }), className)}
+    {...props}
+  />
+));
+Alert.displayName = 'Alert';
+
+const AlertTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h5
+    ref={ref}
+    className={cn('mb-1 font-medium leading-none tracking-tight', className)}
+    {...props}
+  />
+));
+AlertTitle.displayName = 'AlertTitle';
+
+const AlertDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn('text-sm [&_p]:leading-relaxed', className)}
+    {...props}
+  />
+));
+AlertDescription.displayName = 'AlertDescription';
+
+export { Alert, AlertTitle, AlertDescription };

packages/web/src/workflow-trace-viewer/index.ts → packages/web-shared/src/index.ts

@@ -5,5 +5,6 @@ export {
 
 export type { Event, Hook, Step, WorkflowRun } from '@workflow/world';
 export * from './api/workflow-api-client';
+export { RunTraceView } from './run-trace-view';
 export type { Span, SpanEvent } from './trace-viewer/types';
 export { WorkflowTraceViewer } from './workflow-trace-view';

packages/web-shared/src/lib/utils.ts

@@ -0,0 +1,24 @@
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+/**
+ * Returns a formatted pagination display string
+ * @param currentPage - The current page number
+ * @param totalPages - The total number of pages visited so far
+ * @param hasMore - Whether there are more pages available
+ * @returns Formatted string like "Page 1 of 3+" or "Page 2 of 2"
+ */
+export function getPaginationDisplay(
+  currentPage: number,
+  totalPages: number,
+  hasMore: boolean
+): string {
+  if (hasMore) {
+    return `Page ${currentPage} of ${totalPages}+`;
+  }
+  return `Page ${currentPage} of ${totalPages}`;
+}