- Root README: add all 9 packages to table, update architecture diagram,
refresh CLI reference from uwf --help
- New READMEs for 8 packages (cli-workflow, workflow-protocol,
workflow-moderator, workflow-agent-kit, workflow-agent-hermes,
workflow-agent-builtin, workflow-agent-claude-code, workflow-dashboard)
- Updated workflow-util README to match current exports
- All API sections verified against src/index.ts exports
小橘 🍊(NEKO Team)
3.1 KiB
@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.