Beads UI

A web interface for beads - the dependency-aware issue tracker.

Features

• View all issues with status, priority, and type badges
• Create new issues inline
• Change issue status via dropdown
• View issue details in modal
• Delete issues

Quick Start

# install dependencies
npm install

# start both servers (backend + frontend)
npm run dev

• Frontend: http://localhost:5173
• Backend API: http://localhost:3001

Architecture

beads-ui/
├── client/          # React + Vite frontend
│   └── src/
│       ├── App.tsx  # main component
│       └── api.ts   # API client
├── server/          # Express + TypeScript backend
│   └── src/
│       ├── index.ts # API routes
│       └── bd.ts    # beads CLI wrapper
└── .beads/          # beads database

The backend wraps the bd CLI to leverage all existing beads functionality (validation, sync, etc.) without reimplementing it.

API Endpoints

Method	Endpoint	Description
GET	/api/issues	list all issues
GET	/api/issues/:id	get single issue
POST	/api/issues	create issue
PATCH	/api/issues/:id	update issue
POST	/api/issues/:id/close	close issue
POST	/api/issues/:id/reopen	reopen issue
DELETE	/api/issues/:id	delete issue
GET	/api/ready	get ready issues
GET	/api/stats	get stats

Roadmap

Track progress with bd list:

P1 - High Priority

• Enhanced create issue form (type, priority, description)
• Kanban board view with drag-and-drop

P2 - Medium Priority

• Issue filters (status, priority, type, assignee)
• Edit issue details in modal
• Markdown rendering for descriptions
• Dependency visualization

P3 - Nice to Have

• Manage dependencies from UI
• Keyboard shortcuts
• Stats dashboard

P4 - Future

• Real-time updates (polling/websocket)

Development

# run backend only
npm run dev:server

# run frontend only
npm run dev:client

# run both
npm run dev

License

MIT