A self-aware Kanban board that scans the ClemVault filesystem and renders all side projects as draggable cards. Dragging a card between columns triggers real filesystem operations: folder creation, PRD generation, agent bootstrapping.
What It Is
Vault Kanban is a local-only dashboard that scans the ClemVault directory and renders all side projects, ideas, and active builds as cards organized by lifecycle stage.
What started as a read-only visualizer evolved into a full command center. The board doesn’t just display state. It creates it. Dragging an idea card into Active Build creates the project folder, writes the PRD, and bootstraps the agent entry point.
It’s self-referential. The Vault Kanban card tracks itself.
Lifecycle Actions
Each Kanban column maps to a lifecycle stage. Moving a card between columns triggers an API call to the Express server, which performs real filesystem operations. No manual folder setup, no copy-pasting templates.
| Transition | What happens on drop |
|---|---|
| Ideas → Active Build | Creates project directory, writes prd.md, README.md, and CLAUDE.md from the idea content. Deletes the Inbox note. |
| Active Build → In Production | Injects status: production into the project’s PRD frontmatter. Scanner moves the card automatically on next read. |
| In Production → Deprec | Renames the folder to {name}-old. Scanner’s naming convention moves it to Deprec on next scan. |
Features
- Vault Scanner: Node.js scanner traverses ClemVault, reads YAML frontmatter, and builds the board manifest automatically.
- Terminal Modal: Clicking EXEC on any card types out the full PRD with character-by-character animation, a nod to the Fallout interface that inspired the tool.
- Drag and Drop: Built with @dnd-kit. A highlighted drop zone appears at the top of each column on hover. Valid transitions trigger the lifecycle API.
- Live Refresh: After every lifecycle action, the board calls GET /api/data to sync state. No page reload needed.
Stack
| Tool | Role |
|---|---|
| Vite + React 19 | Frontend on port 5175 |
| Express | Lifecycle API on port 5000: handles all filesystem operations on drop |
| Node.js | Filesystem scanner: reads YAML frontmatter, builds board manifest |
| @dnd-kit | Drag and drop with highlight zones and valid-transition enforcement |