6. Multi-Project Kanban Board
6.1 Swimlane Pattern - Horizontal Project Rows
Purpose: Visualize tasks across all 46 projects with drag-drop status management.
Swimlane Structure Diagram
Key Features:
- Horizontal swimlanes - One row per project
- 3 status columns - To Do, In Progress, Done
- Collapsible rows - Hide projects to focus on active work
- Drag-and-drop - Move tasks between columns to update status
- Visual indicators - Green/yellow/red status circles, progress %
Full Specification:
┌─────────────────────────────────────────────────────────────────────────────┐
│ Multi-Project Kanban Board │
│ ┌─────────────┬─────────────┬─────────────┐ [⚙️ Board Settings] │
│ │ All Projects│ All Phases ▼│ All Priority│ [Show: Active (12) ▼] │
│ └─────────────┴─────────────┴─────────────┘ │
├──────────────────┬──────────────────┬──────────────────┬───────────────────┤
│ Project │ To Do │ In Progress │ Done │
├──────────────────┼──────────────────┼──────────────────┼───────────────────┤
│ 🟢 coditect-core │ ┌──────────────┐ │ ┌──────────────┐ │ ┌──────────────┐│
│ [-] Collapse │ │ Create TASK │ │ │ Update gen- │ │ │ Fix messages │││
│ 78% • 530 tasks │ │ parser │ │ │ dashboard.py │ │ │ not showing │││
│ │ │ P1 • 2h │ │ │ P1 • 4h │ │ │ P0 • Done ✓ │││
│ │ └──────────────┘ │ └──────────────┘ │ └──────────────┘││
│ │ ┌──────────────┐ │ ┌──────────────┐ │ (415 tasks) ││
│ │ │ Write tests │ │ │ Add task │ │ ││
│ │ │ P2 • 3h │ │ │ board UI │ │ [Load more...] ││
│ │ └──────────────┘ │ │ P1 • 8h │ │ ││
│ │ (45 tasks) │ └──────────────┘ │ ││
│ │ │ ┌──────────────┐ │ ││
│ │ [Add task +] │ │ Database │ │ ││
│ │ │ │ schema │ │ ││
│ │ │ │ P1 • 6h │ │ ││
│ │ │ └──────────────┘ │ ││
│ │ │ (70 tasks) │ ││
│ │ │ │ ││
│ │ │ [Add task +] │ ││
├──────────────────┼──────────────────┼──────────────────┼───────────────────┤
│ 🟡 cloud-backend │ ┌──────────────┐ │ ┌──────────────┐ │ ┌──────────────┐│
│ [-] Collapse │ │ API endpoint │ │ │ Auth middle │ │ │ User model │││
│ 65% • 89 tasks │ │ P0 • 5h │ │ │ ware │ │ │ P1 • Done ✓ │││
│ │ └──────────────┘ │ │ P1 • 3h │ │ └──────────────┘││
│ │ (31 tasks) │ └──────────────┘ │ (38 tasks) ││
│ │ │ (20 tasks) │ ││
├──────────────────┴──────────────────┴──────────────────┴───────────────────┤
│ [+] Show 44 more projects... │
└─────────────────────────────────────────────────────────────────────────────┘
Swimlane Collapsed State:
├──────────────────┬──────────────────┬──────────────────┬───────────────────┤
│ 🟡 cloud-ide │ 74 tasks │ 40 tasks │ 20 tasks │
│ [+] Expand │ │ │ │
│ 45% • 134 tasks │ │ │ │
├──────────────────┴──────────────────┴──────────────────┴───────────────────┤
6.2 Task Card Design
Standard Card:
┌────────────────────────────────┐
│ Create TASKLIST.md parser │ ← Title (14px, semibold, truncate 2 lines)
│ │
│ 🏷️ P1 ⏱️ 2h 📅 Dec 5 │ ← Metadata badges
│ │
│ 👤 @hal ⚠️ 1 blocker │ ← Assignee, dependency count
│ │
│ [▼] Move to In Progress │ ← Quick action (hover only)
└────────────────────────────────┘
Dragging State:
┌────────────────────────────────┐
│ Create TASKLIST.md parser │ ← Semi-transparent (opacity: 0.6)
│ ... │ ← Slightly rotated (transform: rotate(2deg))
└────────────────────────────────┘
↓ Cursor shows drag icon
Drop Target Indicator:
┌────────────────────────────────┐
│ To Do Column │
│ ┌────────────────────────────┐ │
│ │ Existing task │ │
│ └────────────────────────────┘ │
│ ┌────────────────────────────┐ │ ← Blue dashed border (2px, blue)
│ │ Drop here │ │ ← Drop zone highlighted
│ └────────────────────────────┘ │
└────────────────────────────────┘
6.3 Implementation Prompt - Kanban Board
Prompt for AI/Developer:
Create a multi-project Kanban board with swimlane pattern (horizontal rows per project).
OVERALL LAYOUT:
- Table-like structure: <div> with CSS Grid
- Columns: Project name (250px) | To Do (flex:1) | In Progress (flex:1) | Done (flex:1)
- Rows: 1 row per project (dynamic height based on card count)
- Sticky header: Column labels stick to top on scroll
- Sticky first column: Project names stick to left on horizontal scroll
- Max height: calc(100vh - 120px) with vertical scroll
FILTERS (Top Bar):
- Project filter: Multi-select dropdown (All | Core | Cloud | Dev | etc.)
- Phase filter: Multi-select dropdown (All | Phase 0 | Phase 1 | Dashboard 2.0)
- Priority filter: Multi-select dropdown (All | P0 | P1 | P2 | P3)
- Show dropdown: Radio select (All 46 | Active 12 | My Projects 5)
- Clear filters button: Reset all to "All"
SWIMLANE DESIGN:
HTML Structure:
<div class="kanban-board">
<div class="swimlane" data-project-id="coditect-core">
<div class="swimlane-header">
<button class="collapse-toggle" aria-expanded="true">[-]</button>
<span class="status-indicator status-green"></span>
<span class="project-name">coditect-core</span>
<span class="project-stats">78% • 530 tasks</span>
</div>
<div class="swimlane-columns">
<div class="column" data-status="pending">
<div class="task-card" draggable="true" data-task-id="123">
<!-- Task card content -->
</div>
<!-- More cards -->
<button class="add-task-btn">+ Add task</button>
</div>
<div class="column" data-status="in_progress">
<!-- In Progress cards -->
</div>
<div class="column" data-status="complete">
<!-- Done cards -->
</div>
</div>
</div>
<!-- More swimlanes -->
</div>
CSS:
.kanban-board {
display: grid;
grid-template-columns: 250px 1fr 1fr 1fr;
gap: 16px;
overflow: auto;
max-height: calc(100vh - 120px);
}
.swimlane {
display: contents; /* Children participate in grid */
}
.swimlane-header {
position: sticky;
left: 0;
background: var(--gray-100);
padding: 12px;
border-radius: 4px;
display: flex;
align-items: center;
gap: 8px;
z-index: 2;
}
.swimlane-columns {
display: contents;
}
.column {
background: var(--gray-50);
border-radius: 4px;
padding: 12px;
min-height: 100px;
display: flex;
flex-direction: column;
gap: 8px;
}
.task-card {
background: var(--white);
border: 1px solid var(--gray-300);
border-radius: 4px;
padding: 12px;
cursor: grab;
transition: all 0.2s;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.task-card:hover {
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
transform: translateY(-2px);
}
.task-card.dragging {
opacity: 0.6;
transform: rotate(2deg);
cursor: grabbing;
}
.column.drag-over {
background: var(--primary-blue-light);
border: 2px dashed var(--primary-blue);
}
TASK CARD DESIGN:
Content Elements:
1. Title: 14px, semibold, line-clamp: 2 (truncate after 2 lines)
2. Priority badge: P0/P1/P2/P3 with colored circle
3. Effort estimate: ⏱️ icon + hours (e.g., "2h")
4. Due date: 📅 icon + date (e.g., "Dec 5")
5. Assignee: 👤 icon + username or avatar
6. Dependency count: ⚠️ icon + count if >0 (e.g., "1 blocker")
7. Quick action (hover only): Dropdown menu (▼ icon)
Priority Colors:
- P0: Red circle (#DC3545)
- P1: Orange circle (#FF6B00)
- P2: Yellow circle (#FFB700)
- P3: Gray circle (#6C757D)
DRAG-DROP BEHAVIOR:
1. Dragstart: Add .dragging class, set dataTransfer
2. Dragover: Prevent default, add .drag-over class to column
3. Drop:
- Get task ID from dataTransfer
- Get new status from column data-status
- Validate: Check if move allowed (e.g., can't move to Done if has blockers)
- If valid: Update task status in database, move DOM element, show success toast
- If invalid: Show error toast, return to original position
4. Dragend: Remove .dragging class
Validation Rules:
- Can't move to Done if task has active blockers
- Can't move to In Progress if dependencies not complete
- Warn if moving P0 task back to To Do (confirm dialog)
COLLAPSE/EXPAND:
- Click [-]: Collapse swimlane (hide columns, show task counts)
- Click [+]: Expand swimlane (show columns and cards)
- Animation: 300ms ease transition for height
- State: Save in localStorage (key: swimlane-collapsed-{projectId})
LAZY LOADING:
- Initial load: Show 10 projects (sorted by recent activity)
- Load more: Click "[+] Show 36 more projects..." button
- Infinite scroll: Load 10 more when scrolled to bottom
- Performance: Virtualize cards (render only visible cards)
CARD CLICK:
- Click card: Open task detail modal (see Section 10)
- Right-click: Show context menu (Edit, Delete, Copy link)
ADD TASK:
- Click "+ Add task": Show inline form in column
- Form fields: Title (required), Priority, Effort, Due date, Assignee
- Submit: Create task with status = column status, add to DOM
- Cancel: Hide form
ACCESSIBILITY:
- Keyboard: Tab to navigate cards, Enter to open detail modal
- Drag-drop: Alternative keyboard controls (Space to grab, Arrow keys to move, Space to drop)
- ARIA: aria-label for columns ("To Do column for coditect-core")
- Focus: Visible focus indicator on all cards
RESPONSIVE:
Desktop (≥1024px): 3 columns + project name
Tablet (768px-1023px): 2 columns (To Do+In Progress | Done), collapse project name to icon
Mobile (<768px): 1 column, tabs for To Do/In Progress/Done, vertical project list
DATA SOURCE:
- Fetch from data/tasks-with-deps.json
- Group by project_id
- Sort cards within column by: Priority (P0 first) → Due date (ascending)
- Filter based on active filters
PERFORMANCE:
- Virtual scrolling: Render only visible swimlanes (10 at a time)
- Card limit: Show max 20 cards per column, "[Load more...]" button for rest
- Debounce drag-drop: Wait 300ms before saving to database
- Optimistic updates: Update UI immediately, rollback if save fails