🔄 Ralph Loop: Spacebot Kanban UI Overhaul — Cline-inspired Multi-Agent Dashboard

[marcmantei]

🎯 Vision

Transform Spacebot's functional-but-basic Kanban board into a production-grade multi-agent orchestration dashboard — inspired by Cline's Kanban UI, designed to make managing 10+ concurrent AI workers feel effortless and beautiful.

The current AgentTasks.tsx has solid bones: framer-motion animations, SSE-driven live updates, task CRUD, status columns. What it lacks is the intelligence layer and visual polish that makes it a genuine power-user tool.

🏗️ Architecture Analysis

Key files:

• interface/src/routes/AgentTasks.tsx — Main Kanban board (KanbanColumn, TaskCard, dialogs)
• interface/src/routes/AgentWorkers.tsx — Worker detail view with live transcripts (pattern to follow)
• interface/src/api/client.ts — TaskItem, TaskStatus, TaskPriority types + API calls
• interface/src/hooks/useLiveContext.tsx — SSE live state (taskEventVersion, activeWorkers)
• interface/src/ui/ — Design system (Badge, Button, Dialog, etc.)

Already available (installed, not yet used):

• @dnd-kit/core, @dnd-kit/sortable, @dnd-kit/utilities — drag-and-drop ready to use!
• framer-motion — already used for card animations
• Tailwind with custom app-* color tokens (dark theme base)

API surface (from client.ts):

• api.listTasks(agentId) — returns TaskItem[]
• api.updateTask(agentId, taskNumber, { status, priority }) — enables drop-to-move
• api.approveTask, api.executeTask, api.deleteTask
• TaskItem has: id, task_number, title, description, status, priority, subtasks, worker_id, created_at, updated_at, created_by

📋 Phase Plan

Phase 1 — Visual Foundation

• Drag-and-drop between columns using @dnd-kit (already installed, zero new deps)
• Enhanced card design: priority color left-border strip, larger status indicators
• Better hover states with shadow lift effect
• Timestamps displayed more prominently (relative + absolute on hover)
• Column-level drop zone highlight when dragging
• Smooth drop animation with optimistic updates

Issue: feat/kanban-phase1-visual-foundation → #TBD

Phase 2 — Real-time Agent Intelligence

• Agent activity live-feed on each card (last status message from active worker)
• Live worker badge on card when task.worker_id is active (links to Workers tab)
• Activity timeline in detail dialog (history of status changes + timestamps)
• Agent status pulse animation on in-progress cards

Issue: Created after Phase 1 merges

Phase 3 — Power Features

• Inline status comment → forwarded to active worker as follow-up message
• Task dependency chaining (task B auto-moves to "ready" when task A hits "done")
• Sidebar decomposition helper (freeform text → structured subtasks via AI)

Issue: Created after Phase 2 merges

Phase 4 — Git UI + Multi-Agent Verification

• Minimal git panel: branch list, last commit, PR status per worktree
• Multi-agent stress test: spawn 3 concurrent test tasks, verify Kanban handles all correctly
• Performance audit: ensure board stays snappy with 50+ tasks

Issue: Created after Phase 3 merges

📊 Progress Log

Updated automatically by the architect on each iteration.

2026-03-27 — Ralph Loop activated. Codebase analyzed. @dnd-kit already installed — Phase 1 can start immediately without new dependencies. Creating Phase 1 implementation issue now.

---

PRD (auto-generated by Spacebot)

Summary

This is the Ralph Loop tracking issue coordinating a 4-phase overhaul of Spacebot's Kanban UI from a basic task board into a production-grade multi-agent orchestration dashboard. It tracks progress across all sub-issues and auto-coordinates sequencing between phases.

Complexity

Planning — This is an orchestration/tracking issue spanning ~4 implementation phases; no direct code changes here, but it gates feature work for the entire Kanban UI roadmap.

Acceptance Criteria

• Phase 1 (Visual Foundation) implemented and merged — drag-and-drop, card polish, priority colors
• Phase 2 (Real-time Agent Intelligence) implemented and merged — live feeds, worker badges
• Phase 3 (Power Features) implemented and merged — dependency chaining, decomposition helper
• Phase 4 (Git UI + Multi-Agent Verification) implemented and merged
• All sub-issues closed and referenced in progress log
• Ralph Loop issue closed upon final phase completion

Technical Context

• Key files: interface/src/routes/AgentTasks.tsx, interface/src/routes/AgentWorkers.tsx, interface/src/api/client.ts, interface/src/hooks/useLiveContext.tsx, interface/src/ui/
• Dependencies: @dnd-kit/core v6.3.1, @dnd-kit/sortable v10.0.0, @dnd-kit/utilities v3.2.2, framer-motion (all already installed)
• Architecture notes: SSE-driven live state via useLiveContext; updateTask API supports status + priority updates; all phases build on the same AgentTasks.tsx root component; each phase should be a separate PR

Edge Cases

• Multiple phases must be sequenced — do not start Phase 2 before Phase 1 is merged to avoid rebase conflicts
• Optimistic updates in Phase 1 must handle API failure gracefully (revert on error)
• Performance with 50+ concurrent tasks must be validated in Phase 4

Out of Scope

• Backend/Rust API changes (Phases 1-2 are pure frontend)
• New dependencies — @dnd-kit already installed, no new packages needed for Phase 1
• Mobile/touch support beyond what @dnd-kit provides by default

[marcmantei]

🔄 Ralph Loop — Iteration 1 Assessment

Date: 2026-03-27
Trigger: ralph-loop tracking issue #5 opened

---

Current State Assessment

Codebase analyzed:

• interface/src/routes/AgentTasks.tsx — 643 lines, solid foundation with AnimatePresence, motion.div, SSE-driven invalidation, and full CRUD
• @dnd-kit/core, @dnd-kit/sortable, @dnd-kit/utilities — all installed and ready, zero new deps needed
• framer-motion already in active use
• useLiveContext() exposes activeWorkers, taskEventVersion, liveTranscripts — intelligence layer hooks are available
• API surface confirmed: updateTask enables drag-to-move; worker_id field enables live worker linkage

CI status: Last 5 runs are failures on Rust CI (cargo check/clippy) — frontend work is unaffected (separate build step via bun run build)

Open PRs: None — clean slate to start

---

Phase Plan Created

#	Issue	Phase	Status
#6	feat: Phase 1 — Kanban Visual Foundation (drag-and-drop, card polish, priority colors)	Visual Foundation	✅ Ready to implement
Phase 2	Real-time Agent Intelligence (worker live-feed, pulse animation, status timeline)	Intelligence Layer	⏳ After #6 merges
Phase 3	Power Features (inline comments to workers, task dependency chaining, AI decomposition)	Power Features	⏳ After Phase 2 merges
Phase 4	Git UI + multi-agent stress test + performance audit	Polish & QA	⏳ After Phase 3 merges

---

Issues Created

• feat: Phase 1 — Kanban Visual Foundation (drag-and-drop, card polish, priority colors) #6 — feat: Phase 1 — Kanban Visual Foundation (drag-and-drop, card polish, priority colors)
  • DnD between columns via @dnd-kit (zero new deps)
  • Priority left-border color strips
  • Hover lift effect
  • Column drop zone highlight
  • DragOverlay with optimistic updates
  • Worker badge with pulse animation

---

Next Steps

First implementation step: Issue #6 is ready to be picked up now. It contains complete implementation guidance including DnD setup code, the optimistic update pattern, and TypeScript-safe drag handler.

After #6 merges: I'll create the Phase 2 issue covering:

• Live worker status feed on each card (last set_status message from active worker)
• Animated pulse dot on in-progress cards with active worker
• Activity timeline in the task detail dialog
• SSE-driven live worker badge linking to Workers tab

[marcmantei]

🔄 Progress Update — Phase 1 Complete

Date: 2026-03-27

What was implemented

Phase 1 (Visual Foundation) is done and has a PR open.

PR: #8 — feat: Kanban Phase 1 — Visual Foundation (drag-and-drop + card polish)

Changes in Phase 1

interface/src/routes/AgentTasks.tsx (+294 / -107 lines):

1. Drag-and-drop — DndContext wraps the board; useDraggable on each card, useDroppable on each column. Zero new deps (already had @dnd-kit/core, @dnd-kit/sortable, @dnd-kit/utilities).
2. Optimistic updates — card moves instantly via queryClient.setQueryData, reverts on API error.
3. DragOverlay — ghost card with tilt+scale during drag.
4. Priority color strips — red left-border for critical, amber for high.
5. Hover lift effect — -translate-y-0.5 shadow-md on hover.
6. Active worker pulse dot — animated violet dot when task.worker_id is in the live activeWorkers set.
7. Drop zone feedback — column highlights with accent tint; empty columns show "Drop here".
8. Build: ✓ passes clean (vite build, zero type errors).

What's next

Phase 2 will be triggered after #8 merges:

• Agent activity live-feed on each card (last status message from active worker)
• Activity timeline in detail dialog
• Worker badge linking to the Workers tab

The Ralph Loop tracking issue (#5) stays open to drive Phase 2 → 3 → 4.

[marcmantei]

📊 Progress Update — 2026-03-28

✅ Issue #10 Closed

All 6 Kanban GUI Upgrade features confirmed implemented by Marc. PR #17 contains the full implementation.

🔄 PR #17 Status — Open, CI Fixed

PR: #17
Branch: feature/kanban-sales-platform → main

PR #17 is a comprehensive sales platform build with 7 commits covering:

• Ember theme, Pricing page (3-tier), Kanban dependency tracking
• spacebot local command + Welcome page
• MCP Bridge (Python, zero deps) for Claude Code/Codex/VS Code
• Agent assignment UI, worktree badges
• Task dependency graph (graphology + Sigma.js)
• Inline diff review + backend diff endpoint
• Git worktree isolation per task

CI was failing — now fixed (commit e2705c6):

• cargo fmt failures across multiple Rust files → run cargo fmt --all
• TypeScript error: missing > closing tag on JSX <div in AgentTasks.tsx (line 252)
• TypeScript TS2322: metadata?.worktree and metadata?.assigned_agent typed as unknown → fixed with !! cast to satisfy ReactNode constraint

Both cargo fmt --check and tsc --noEmit pass locally. CI re-triggered.

⏭️ What Happens Next Once PR #17 Merges

The Ralph Loop tracking plan (Phases 1–4 of the Kanban UI Overhaul) overlaps significantly with what PR #17 already implements:

• Phase 1 (Visual Foundation) — partially implemented in PR feat: Kanban Sales Platform — Ember Theme, Pricing, Dependencies #17 (dependencies, graph, worktree badges). Issue feat: Phase 1 — Kanban Visual Foundation (drag-and-drop, card polish, priority colors) #6 (Phase 1 drag-and-drop) and PR feat: Kanban Phase 1 — Visual Foundation (drag-and-drop + card polish) #8 are still open and focused on @dnd-kit drag-and-drop specifically.
• Phase 2 (Real-time Agent Intelligence) — to be created after PR feat: Kanban Sales Platform — Ember Theme, Pricing, Dependencies #17 + PR feat: Kanban Phase 1 — Visual Foundation (drag-and-drop + card polish) #8 merge
• Phase 3 (Power Features) — to be created after Phase 2
• Phase 4 (Git UI + Verification) — to be created after Phase 3

Immediate next steps after PR #17 merges:

1. Reconcile PR feat: Kanban Phase 1 — Visual Foundation (drag-and-drop + card polish) #8 (feat/kanban-phase1-visual-foundation) with the merged changes — likely needs a rebase
2. Create Phase 2 issue (real-time agent intelligence: live feeds, worker badges, activity timeline)
3. Evaluate whether Issue feat: Phase 1 — Kanban Visual Foundation (drag-and-drop, card polish, priority colors) #6 / PR feat: Kanban Phase 1 — Visual Foundation (drag-and-drop + card polish) #8 scope is still needed or already covered

[marcmantei]

✅ CI Green — PR #17 Ready to Merge (2026-03-28 01:34 CET)

CI passed on feature/kanban-sales-platform after the cargo fmt + TypeScript fixes in commit e2705c6.

PR #17 is now fully green and ready to merge: #17

After Merging PR #17

1. Reconcile PR feat: Kanban Phase 1 — Visual Foundation (drag-and-drop + card polish) #8 (feat/kanban-phase1-visual-foundation) — needs rebase onto main since PR feat: Kanban Sales Platform — Ember Theme, Pricing, Dependencies #17 touches AgentTasks.tsx extensively. Evaluate whether the @dnd-kit drag-and-drop scope in PR feat: Kanban Phase 1 — Visual Foundation (drag-and-drop + card polish) #8 / Issue feat: Phase 1 — Kanban Visual Foundation (drag-and-drop, card polish, priority colors) #6 is still needed or if it should be superseded.

2. Create Phase 2 issue — Real-time Agent Intelligence (live feeds per card, worker badges linking to Workers tab, activity timeline in detail dialog, pulse animation on in-progress cards). Dependencies: PR feat: Kanban Sales Platform — Ember Theme, Pricing, Dependencies #17 merged.

3. Phases 3 & 4 — sequenced after Phase 2 merges.