Files
united-workforce/packages/workflow-dashboard/README.md
T
xiaoju ffc31a8c19 docs: sync all README.md files with current codebase
- 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)
2026-05-23 15:00:05 +00:00

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.