Feature: Interactive Dual-Mode Kanban Board View (<space> v k / Tab Switcher)

[arkalon76]

📌 Feature Overview & Motivation

Outliners provide unparalleled speed for structuring thoughts and task hierarchies, but users frequently struggle to visualize stage-by-stage workflow progress (e.g. Backlog vs. In Progress vs. Done).

Adding an Interactive Dual-Mode Kanban Board View (<space> v k or K) allows users to flip between their hierarchical tree and a 3-column Kanban board without changing their underlying data structure. This bridges the gap between outliner purists and agile Kanban enthusiasts.

---

🎯 User Stories & Key Scenarios

1. Instant View Toggle (<space> v k / K):
   • Seamlessly toggle between standard Tree Outliner and full-screen 3-column Kanban layout:

     ┌── 📋 [ ] TODO (3) ───────┐ ┌── ⚡ [~] IN PROGRESS (1) ┐ ┌── ✔ [x] DONE (5) ────────┐
     │ • Write API unit tests   │ │ • Proto storage layer    │ │ ✓ Fix ANSI padding bug   │
     │ • Clean documentation    │ │                          │ │ ✓ Add WhichKey popup     │
     │ • Wire up CLI flags      │ │                          │ │                          │
     └──────────────────────────┘ └──────────────────────────┘ └──────────────────────────┘
     

2. Subtree / Project Scoping:
   • Toggle Kanban for the entire tree OR hoist/focus a specific parent subtree (e.g. project sprint) into Kanban mode.
3. Ergonomic Vim Navigation:
   • h / l or Left / Right: Switch active column (Todo ⟷ In Progress ⟷ Done).
   • j / k or Up / Down: Move selection up/down within active column.
   • H / L or Shift+Left / Shift+Right: Move task status across columns (e.g., promote task from Todo to In Progress to Done).
   • i / e: Edit task text inline.
   • o: Add a new task directly inside the selected column.
   • Esc / q / <space> v k: Exit Kanban mode back to tree view with cursor placed on active task.

---

🏗️ Architectural Touchpoints

1. Mode & Projection Model (ui/app.go, ui/kanbanview.go)

• Define mode: ModeKanban in ui/app.go.
• In ui/kanbanview.go:
  • Collect all tasks from m.Tree (or active hoisted root) into 3 slices:
    • TodoItems []*model.Item (StatusTodo or StatusNone with IsTask: true)
    • InProgressItems []*model.Item (StatusInProgress)
    • DoneItems []*model.Item (StatusDone)
  • Track ActiveColumn int (0: Todo, 1: InProgress, 2: Done) and ColumnCursors [3]int.

2. Multi-Column Responsive Rendering (ui/kanbanview.go)

• Compute dynamic column widths based on m.Width:
  • colWidth := (m.Width - 6) / 3
  • Wrap cards nicely using lipgloss.NewStyle().Width(colWidth).Border(lipgloss.RoundedBorder()).
  • ANSI-safe truncation using lipgloss.Width() to prevent terminal wrapping artifacts.
  • Display item tags, due date badges, and note indicators inside each card.

3. State Mutations & Direct Tree Sync

• Moving a task with H/L updates item.Status on the shared *model.Item reference:
  • If promoted to Done: sets item.Status = StatusDone.
  • If moved to In Progress: sets item.Status = StatusInProgress.
  • If moved to Todo: sets item.Status = StatusTodo.
• Calls m.SaveState() on m.Tree for full undo/redo support and sets m.PendingAutoSave = true.

4. Keybinding Registration (ui/keys.go)

• Register keybindings:
  • <space> v k: Toggle Kanban view.
  • K: Direct normal-mode shortcut to toggle Kanban view.
  • Update GetAllKeyBindings() and WhichKey menus.

---

📋 Step-by-Step Implementation Plan

• Phase 1: Kanban State & Column Projection
  • Implement ui/kanbanview.go column bucketing from *model.Tree.
  • Handle cursor movement across columns (h/l) and within columns (j/k).
• Phase 2: Status Mutations & Tree Synchronization
  • Implement H/L status transitions with tree.SaveState() and undo history.
  • Implement inline addition (o) and editing (e) within Kanban mode.
• Phase 3: Visual Styling & Responsive Layout
  • Style 3 columns with LipGloss rounded borders and dynamic terminal width resizing.
  • Render tags, due dates, and note pills inside cards.
  • Add column header task tallies (e.g. [ ] TODO (3)).
• Phase 4: Keybinding Registry & Collision Prevention
  • Register <space> v k and K in ui/keys.go.
  • Verify TestNoKeybindingPrefixCollisions passes cleanly.
• Phase 5: Testing & Documentation
  • Add unit tests in ui/kanbanview_test.go.
  • Update README.md, wiki/Home.md, and wiki/User-Personas-&-Workflows.md.

---

✅ Acceptance Criteria

1. Pressing <space> v k toggles between Tree view and 3-column Kanban view seamlessly.
2. Moving a task with H/L immediately updates its Status and updates the underlying tree state.
3. Resizing the terminal dynamically adjusts column widths without ANSI breaking.
4. Exiting Kanban view (Esc / q) returns the user to the Tree Outliner with the correct item selected.
5. All unit tests (go test ./...) pass cleanly.