xingyue
5dc2352ac5
Per CLAUDE.md convention, use `string | null` instead of `?:` in the isFirstConditionalSibling helper function parameter types. Co-Authored-By: Claude Sonnet 4 <noreply@anthropic.com>
@uncaged/workflow-dashboard
Web graph editor for visualizing and editing workflow YAML definitions.
Overview
A private alpha web app (not part of the runtime engine stack). Provides a React + @xyflow/react canvas for editing workflow roles, conditions, and graph transitions. Uses @uncaged/workflow-protocol types for validation and YAML round-tripping.
Planned integration: local uwf connect over WebSocket to sync YAML between CLI and the browser editor. The REST API and Elysia backend are currently stubs for development.
Dependencies: @uncaged/workflow-protocol, @xyflow/react, React 19, react-router v7, Vite 8, Tailwind CSS v4, Elysia
Installation
Monorepo-only ( "private": true ). Not published to npm.
cd packages/workflow-dashboard
bun install --no-cache
CLI Usage
Start the Vite dev server (port 3000):
cd packages/workflow-dashboard
bun run dev
Build for production:
bun run build
Open http://localhost:3000 in a browser.
Internal Structure
workflow-dashboard/
├── server.ts Vite dev server entry (port 3000)
├── vite.config.ts Vite + React + Tailwind + Elysia plugin
├── vite-dev.ts Custom Vite plugin
├── index.html
├── components.json shadcn configuration
├── server/
│ ├── api.ts Elysia REST API (health + workflow CRUD stub)
│ └── workflow.ts Workflow file read/write + format conversion
└── src/
├── main.tsx React DOM entry
├── app.tsx Root layout
├── router.tsx Hash-mode routes
├── index.css
├── lib/utils.ts Tailwind cn() helper
├── components/ui/ shadcn components (button, card, dialog, input, …)
├── pages/
│ ├── home.tsx Workflow list
│ ├── detail.tsx Workflow detail view
│ └── editor.tsx Full editor page
└── editor/ Core graph editor
├── flow.tsx FlowEditor component
├── context.tsx State (useSyncExternalStore + Immer)
├── injection.ts DI container
├── type.ts Internal editor types
├── model/ Node/edge state model
├── nodes/ Start, role, end node components
├── edges/ Conditional edge rendering
├── panel/ Toolbar, add/edit panels
├── trans/ YAML ↔ graph conversion (trans-in, trans-out, validate)
├── layout/ Auto-layout
└── utils/ Event helpers, click-outside hook
Configuration
| Setting | Default | Notes |
|---|---|---|
| Dev server port | 3000 |
Set in server.ts |
| Workflow storage (dev) | tmp/workflow/ |
YAML files during development |
| Path alias | @/ → src/ |
Configured in vite.config.ts |
No library API — this package is an application, not importable as a module.