A project management web app that organizes projects using interactive hierarchical architecture diagrams with flow chart visualization.
- Flow Chart Visualization — Nodes arranged by dependency order with SVG arrow connections and zoom controls
- Hierarchical Node System — Unlimited depth with dot-notation IDs (
0,0.1,0.1.1...) and auto-incrementing iteration IDs - Click-to-Drill Overlays — Click any node to open an overlay with collapsible info panels (summary/input/output) and child flow chart or task list
- Iteration & Change Cascade — Non-leaf nodes auto-increment
iterationIdon every update; all changes bubble up to ALL ancestor nodes; downstream stale dependencies are auto-detected with acknowledge workflow - Dependency Management — Sibling-only dependencies with strict validation; blocked nodes show red status; stale dependencies show amber warning with version diff
- Strict Completion Rules — All leaf tasks done → leaf complete → parent complete (recursive bottom-up)
- Completion Evidence — Tasks require verifiable proof (commit hash, PR link, file path, test result) before marking as done
- Project Knowledge Base —
projectInfofield for global project info (URLs, environments);member.knowledgefor per-member reusable skills/frameworks - Markdown Support — Node description, inputContent, outputContent, projectInfo, and member knowledge all render as Markdown
- Team Member Colors — Each member gets a unique color (10 options), displayed on assigned leaf nodes
- 31 REST API Endpoints — Full CRUD for projects, nodes, tasks, members, dependencies, metrics, plus API discovery (
GET /api) - Real-time Sync — Frontend polls every 3 seconds; AI agents can operate via API while humans watch the dashboard
- Project Templates — 3 presets (Web Project, Mobile App, Microservices) + fully customizable
- API Guide Page — Built-in documentation with all endpoints, workflow examples, and AI agent tips
| Layer | Technology |
|---|---|
| Frontend | React 18 + TypeScript + TailwindCSS v4 + Zustand |
| Backend | Express (Node.js) + JSON file storage |
| Icons | lucide-react |
| DnD | @dnd-kit/core + @dnd-kit/sortable |
# Install dependencies
npm install
# Start backend API server (port 3001)
npm run server
# Start frontend dev server (port 5173) — in another terminal
npm run devThen open http://localhost:5173
| Resource | Endpoints | Methods |
|---|---|---|
| Projects | 6 | GET list, GET single, POST, PUT (name/description/projectInfo), DELETE, PUT import |
| Nodes | 5 | GET list, GET single, POST, PUT, DELETE (recursive) |
| Tasks | 6 | GET list, GET single, POST, PUT (completionEvidence required for done), DELETE, batch-update |
| Members | 5 | GET list, GET single (with tasks), POST (auto color), PUT (color/knowledge), DELETE |
| Dependencies & Iteration | 6 | GET list, POST (siblings only), DELETE, GET stale-check (node), GET stale-check (project), POST acknowledge |
| Metrics | 2 | Project metrics, Node metrics (recursive) |
| Discovery | 1 | GET /api — full schema + rules + quickStart |
Base URL: http://localhost:3001/api
See the built-in API Guide page in the app for full documentation.
TaskDashboard/
├── server/index.mjs # Express REST API (27 endpoints)
├── src/
│ ├── types/ # TypeScript interfaces
│ ├── store/ # Zustand stores (project, navigation, ui)
│ ├── lib/ # API client, metrics engine, templates, utils
│ ├── hooks/ # Custom React hooks
│ ├── components/
│ │ ├── diagram/ # FlowChart, FlowNode, DrillOverlay, arrows
│ │ ├── layout/ # TopBar, TeamBar, ProjectDashboard
│ │ ├── tasks/ # TaskPanel, TaskItem
│ │ ├── project/ # ProjectSelector, NodeEditorModal, ApiGuide
│ │ └── team/ # MemberEditorModal
│ └── data/templates/ # Predefined project templates
└── data/projects.json # Persisted project data (auto-created)
Layer 0 (root): #0, #1, #2
Layer 1: #0.1, #0.2, #1.1, #1.2
Layer 2: #0.1.1, #0.1.2, #0.2.1
...unlimited depth
Each node also has an @iterationId (global auto-increment) for tracking creation order.
Display format: #nodeId @iterationId (e.g., #0.1 @5)
- Non-leaf nodes:
iterationIdstarts at@0, auto-increments on every update - Bubble-up: any change (node attributes, task CRUD, dependency changes) propagates up to ALL ancestor nodes
- Stale detection: when upstream
@current > @recorded, downstream nodes show "stale" warnings - Acknowledge:
POST /acknowledge-dependencysyncs the recorded iterationId to current
git clone https://github.com/yingyangxu2026/TaskDashboard.git
cd TaskDashboard
npm install
npm run server # Terminal 1: API on http://localhost:3001
npm run dev # Terminal 2: UI on http://localhost:5173# Get complete API schema (31 endpoints + rules + quickStart guide)
curl http://localhost:3001/apiBelow is a prompt you can give to any AI agent to operate TaskDashboard:
You are managing a project using TaskDashboard (http://localhost:3001).
FIRST STEP — ALWAYS:
curl http://localhost:3001/api
This returns the complete API schema, all endpoints, parameters, rules, workflow guide,
content conventions, task mounting patterns, and known pitfalls.
Read it carefully before doing anything. It is your single source of truth.
THEN:
curl http://localhost:3001/api/projects
If your project exists, read its current state and continue. If not, create one.
YOUR RESPONSIBILITIES:
1. TEAM FIRST
Create team members before any tasks. Every task must be assigned to a member.
Use functional names: "Database & REST API", "QA & Testing", "UI & i18n" — NOT personal names.
You MUST have a dedicated QA & Testing member, separate from Dev roles.
2. ARCHITECTURE = TREE HIERARCHY (NOT flat)
Build a multi-level node tree. DO NOT create all nodes at root level.
Two mechanisms — do NOT confuse them:
- parentId: creates tree depth (L0 → L1 → L2). Controls drill-down and auto-completion.
- dependsOn: creates execution order between siblings (same parent). Controls blocked/stale.
Depth guide:
- L0 (root, parentId=null): functional domains — Auth, Web3, Marketplace, Admin, Deploy. Aim 5-8.
- L1 (parentId=L0): sub-domains within each L0 — Profile, Tags, Design, License, etc.
- L2 (parentId=L1): TDD phases — Test first, Impl, Verify. Or fine-grained splits.
TDD patterns (apply at L2):
- Pure backend: Test first → Impl → Verify (3 children, deps: Impl→Test, Verify→Impl)
- Backend + UI: Test first → Backend Impl → UI Impl → Verify (4 children)
- Simple leaf: no children needed if ≤3 tasks' worth of work
CRITICAL RULE: Tasks ONLY on leaf nodes (childIds=[]).
The API accepts tasks on non-leaf nodes, but UI ignores them and metrics skip them.
Always GET a node and verify childIds is empty before adding tasks.
3. NODE CONTENT — read `contentConventions` from GET /api
- description: HOW this module is implemented (tech choices, file structure)
- inputContent: specific artifacts this node RECEIVES from upstream deps
- outputContent: specific artifacts this node PRODUCES for downstream
- All support Markdown. Be specific — file paths, function names, API endpoints.
4. TASKS = SMALLEST EXECUTABLE UNITS
Tasks only go on leaf nodes. Each task should be independently completable.
All leaf tasks under the same parent can execute IN PARALLEL.
Every completion requires completionEvidence (≥20 chars) — commit hash, PR link, test result.
5. BEFORE MODIFYING ANY MODULE — MANDATORY CHECKLIST
a) Check the target node is NOT "blocked" (GET /nodes/:nid/metrics)
b) Read the node's description, inputContent, outputContent
c) Read dependency nodes' outputContent — understand what upstream provides
d) Create task on the correct LEAF node, set status "in_progress"
e) Only then start implementation
6. CHANGE CASCADE & STALE MANAGEMENT
Every change bubbles up to ALL ancestor nodes (iterationId++).
Downstream siblings with outdated recorded iterationId become "stale".
After EVERY change:
a) GET /api/projects/:pid/stale-dependencies — check what became stale
b) For each stale:
- If outputContent changed → POST /acknowledge-dependency (downstream must review)
- If only internal refactoring → POST /propagate-non-breaking (zero cascade)
c) Repeat until stale count is 0
Use GET /api/projects/:pid/health for a one-call summary of progress + stale + blocked.
7. CLOSEOUT — after each node completes
a) Update outputContent from planning-state ("should produce...") to completion-state
("delivered: file X, function Y, N/N tests pass, known gap: Z")
b) Write completionEvidence on every task
c) Update member knowledge with reusable lessons (pitfalls, patterns — NOT task results)
d) If cross-node shared value emerged, add it to projectInfo
8. QA / DEV SEPARATION
QA members ONLY write test files. If QA finds a business bug, they flag it — they do NOT fix it.
Dev members ONLY write business code. They do NOT modify test files.
This is a hard rule, not a suggestion.
9. DOCUMENTATION LAST
Documentation nodes depend on all other modules. Update them last after all
functional changes are complete.
TaskDashboard provides a Claude Code skill that can automatically create project architectures from code/prompts and execute tasks with parallel agent teams.
Requires GitHub CLI (gh) authenticated (gh auth login):
gh api repos/yingyangxu2026/TaskDashboard/contents/scripts/install-skill.sh | jq -r .content | base64 -d | bashOr if you've already cloned the repo:
bash /path/to/TaskDashboard/scripts/install-skill.sh# Create project architecture from a prompt
/task-dashboard create an e-commerce platform with user auth, product catalog, cart, and payment
# Create project architecture from a code repository
/task-dashboard create https://github.com/user/my-project
# Execute project tasks with a parallel agent team
/task-dashboard execute 80f9df3a-ee28-4382-ad81-6aa41c12f562
# Execute by project name keyword
/task-dashboard execute my-projectCreate mode:
- Analyzes code structure or requirements (if repo: scans files, traces imports, identifies module boundaries)
- Creates specialized team members matching the project's tech stack
- Builds hierarchical architecture nodes with dependency chains
- Creates leaf tasks assigned to the best-matched team member
Execute mode:
- Reads project state from TaskDashboard API
- Creates a Claude Code Team with agents for each member
- Agents work in parallel on non-blocked tasks
- Lead coordinates dependency ordering (batch execution)
- All changes tracked via API with completion evidence
- Team auto-destroyed when all tasks reach 100%
TaskDashboard also provides a Codex skill that can create project architectures from code or prompts and execute TaskDashboard work while keeping project state synchronized through the local API.
Requires GitHub CLI (gh) authenticated (gh auth login):
gh api repos/yingyangxu2026/TaskDashboard/contents/scripts/install-codex-skill.sh | jq -r .content | base64 -d | bashOr if you've already cloned the repo:
bash /path/to/TaskDashboard/scripts/install-codex-skill.shIn Codex, invoke the skill explicitly:
Use $task-dashboard to create an e-commerce platform with user auth, product catalog, cart, and payment
Use $task-dashboard to create https://github.com/user/my-project
Use $task-dashboard to execute 80f9df3a-ee28-4382-ad81-6aa41c12f562
Use $task-dashboard to execute my-project
Create mode:
- Analyzes the repo or prompt
- Derives functional modules and dependencies
- Creates TaskDashboard members, nodes, dependencies, and leaf tasks
- Verifies hierarchy depth and assignment coverage
Execute mode:
- Reads project state from the TaskDashboard API
- Selects executable work based on node dependency state
- Implements code changes in the current workspace
- Writes completion evidence and updates node output content
- Uses Codex subagents only when the user explicitly requests delegation or parallel execution