xiaoju
ffc31a8c19
- 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）
85 lines
3.1 KiB
Markdown
85 lines
3.1 KiB
Markdown
# @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.
|
|
|
|
```bash
|
|
cd packages/workflow-dashboard
|
|
bun install --no-cache
|
|
```
|
|
|
|
## CLI Usage
|
|
|
|
Start the Vite dev server (port 3000):
|
|
|
|
```bash
|
|
cd packages/workflow-dashboard
|
|
bun run dev
|
|
```
|
|
|
|
Build for production:
|
|
|
|
```bash
|
|
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.
|