Skip to content

feat: built-in Kanban board in web UI#10

Merged
TerrysPOV merged 7 commits intomainfrom
feat/kanban-board
May 3, 2026
Merged

feat: built-in Kanban board in web UI#10
TerrysPOV merged 7 commits intomainfrom
feat/kanban-board

Conversation

@TerrysPOV
Copy link
Copy Markdown
Owner

What

Adds a Kanban board as a native tab in the ClaudeClaw+ web UI — no external server, no iframe, no configuration.

Three columns: To Do → In Progress → Done

  • Add tasks via a modal (+ Add task)
  • Clear the Done column in one click
  • Auto-refreshes every 10 seconds
  • State persists to .claude/claudeclaw/kanban.json
  • Integrates with the existing Dashboard/Chat tab system

Why it lives in Plus (not upstream)

This pairs naturally with the agent lifecycle events tab (already in ClaudeClaw+) — addCardToColumn / moveCard helpers are ready for sub-agent auto-tracking. The scope (509 lines across 5 UI files, project-management feature) doesn't fit upstream's lightweight brief.

Architecture

New: src/ui/services/kanban.tsreadKanban, writeKanban, addCardToColumn, moveCard

New endpoints: GET /api/kanban, POST /api/kanban

Card schema:

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

Test plan

  • Open web UI, click Kanban tab
  • Add task via modal → appears in To Do
  • Reload → board state restored from kanban.json
  • Clear Done column → cards removed
  • Dashboard and Chat tabs still work normally

Attribution

Originally submitted by @chetan-guevara in moazbuilds/claudeclaw#42. Ported to ClaudeClaw+ and adapted to fit the existing Dashboard/Chat tab structure. Thank you Chetan.

Copy link
Copy Markdown

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: c632e725bb

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Comment thread src/ui/server.ts
Comment on lines +354 to +357
if (url.pathname === "/api/kanban" && req.method === "POST") {
try {
const body = await req.json() as KanbanBoard;
await writeKanban(body);
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P1 Badge Enforce CSRF check on Kanban POST route

This new mutating endpoint accepts unauthenticated cross-origin POSTs because it does not call requireCsrf(req) before writing to disk, unlike the other state-changing /api/* routes in this file. In a browser session where the UI is open, any malicious site can trigger a form/fetch POST to /api/kanban and overwrite .claude/claudeclaw/kanban.json, which defeats the CSRF protections documented at the top of this server.

Useful? React with 👍 / 👎.

@TerrysPOV
Copy link
Copy Markdown
Owner Author

@codex review

Copy link
Copy Markdown

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 332d07bb2e

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Comment thread src/ui/page/script.ts

async function saveKanban() {
try {
await fetch("/api/kanban", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(kanbanData) });
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P1 Badge Send CSRF token on Kanban save requests

saveKanban posts directly with fetch instead of the existing mutatingFetch helper, but /api/kanban POST is CSRF-protected in server.ts and returns 403 without X-CSRF-Token. In practice, adding/clearing tasks appears to work in-memory, then the 10-second refresh reloads old data from disk, so Kanban changes are not persisted. Route this call through mutatingFetch (or attach a valid token) so writes actually succeed.

Useful? React with 👍 / 👎.

@TerrysPOV
Copy link
Copy Markdown
Owner Author

@codex review

Copy link
Copy Markdown

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 6483b8e294

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Comment thread src/ui/page/script.ts

async function saveKanban() {
try {
await fetch("/api/kanban", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(kanbanData) });
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P1 Badge Use CSRF-aware client for Kanban writes

Replace this direct fetch with the existing mutatingFetch helper; POST /api/kanban is CSRF-protected in src/ui/server.ts (the handler calls requireCsrf), so this request is rejected with 403 when no X-CSRF-Token is sent. Because saveKanban() swallows errors, adding tasks or clearing Done appears to work in-memory but does not persist to disk and is lost on reload.

Useful? React with 👍 / 👎.

TerrysPOV and others added 7 commits May 3, 2026 11:24
Three-column board (To Do / In Progress / Done) as a native tab in
the ClaudeClaw+ web UI. State persists to .claude/claudeclaw/kanban.json.
Auto-refreshes every 10 seconds. Integrates with the existing
Dashboard/Chat tab system.

Exposes /api/kanban GET+POST endpoints backed by src/ui/services/kanban.ts
(readKanban, writeKanban, addCardToColumn, moveCard helpers). The Kanban
service is standalone but designed to pair with the agent lifecycle events
tab (PR #41) already in ClaudeClaw-Plus for auto-tracking sub-agent activity.

Ported from moazbuilds/claudeclaw#42.
Co-authored-by: Chetan Nandakumar <chetan-guevara@users.noreply.github.com>
@TerrysPOV TerrysPOV force-pushed the feat/kanban-board branch from 6483b8e to 5c3912b Compare May 3, 2026 10:24
@TerrysPOV TerrysPOV merged commit 370bec2 into main May 3, 2026
3 checks passed
@TerrysPOV TerrysPOV deleted the feat/kanban-board branch May 3, 2026 10:35
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