Skip to content

feat: add built-in Kanban board to web UI#42

Open
chetan-guevara wants to merge 1 commit intomoazbuilds:masterfrom
chetan-guevara:feat/kanban-board
Open

feat: add built-in Kanban board to web UI#42
chetan-guevara wants to merge 1 commit intomoazbuilds:masterfrom
chetan-guevara:feat/kanban-board

Conversation

@chetan-guevara
Copy link
Copy Markdown
Contributor

Summary

Adds a built-in Kanban board as a native tab in the ClaudeClaw web UI — no external server, no iframe, no configuration required. Task state is persisted to .claude/claudeclaw/kanban.json alongside existing ClaudeClaw data.

Features

  • Three columns: To Do → In Progress → Done
  • Add tasks via a modal (+ Add task button)
  • Clear done column with one click
  • Auto-refresh every 10 seconds
  • Agent auto-tracking (when used with the agent lifecycle PR feat: surface sub-agent lifecycle events in chat #41): sub-agent spawns automatically add a card to In Progress; completions move it to Done
  • Fully consistent with the existing ClaudeClaw UI aesthetic

Architecture

New service: src/ui/services/kanban.ts

Handles all reads/writes to .claude/claudeclaw/kanban.json:

  • readKanban() — reads the board, initialises missing columns gracefully
  • writeKanban(board) — persists to disk
  • addCardToColumn(column, card) — atomic add
  • moveCard(id, toColumn, patch?) — atomic move across columns

New API endpoints in server.ts

  • GET /api/kanban — returns the full board JSON
  • POST /api/kanban — writes the full board JSON

Board data schema

{
  "columns": {
    "todo": [],
    "in_progress": [],
    "done": []
  }
}

Each card:

{
  id: string;
  title: string;
  description?: string;
  started_at?: string;
  completed_at?: string;
  agent_type?: string;
}

Note on agent auto-tracking

The kanban service is self-contained and works standalone. When combined with PR #41 (agent lifecycle tracking), the server.ts chat endpoint can call addCardToColumn / moveCard to automatically track sub-agent activity — but this PR does not depend on #41 and can be merged independently.

Test plan

  • Open http://127.0.0.1:4632, click the Kanban tab
  • Click + Add task, fill in title and description → card appears in To Do
  • Reload page → board state is restored from kanban.json
  • Click Clear on Done column → done cards removed
  • Verify .claude/claudeclaw/kanban.json is written correctly after each action
  • Verify Dashboard tab still works normally

Adds a three-column Kanban board (To Do / In Progress / Done) directly
into the ClaudeClaw web UI with no external server, iframe, or hardcoded
localhost URLs. Board state persists to .claude/claudeclaw/kanban.json
via new GET/POST /api/kanban endpoints. Includes tab navigation between
Dashboard and Kanban views, an add-task modal, clear-done action, and
10-second polling for live agent-driven updates.
Fenrur added a commit to Fenrur/claudeclaw that referenced this pull request Mar 17, 2026
- Kanban board with Todo/In Progress/Done columns
- Persistent storage via /api/kanban endpoints
- Task creation modal, drag-and-drop ready
- Integrated as third tab alongside Dashboard and Chat

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant