Skip to content

btop-style multi-pane dashboard layout #202

@maxbeizer

Description

@maxbeizer

Goal

Transform the dashboard from a vertical scroll of sections into a btop-style multi-pane layout with bordered panels showing information simultaneously. The dashboard should feel dense, alive, and glanceable — like a mission control screen you'd leave open on a second monitor.

Inspiration

  • btop++: simultaneous CPU/memory/network/disk panels with sparklines
  • k9s: dense resource panels with live updates
  • gh-dash: multi-section Bubble Tea layout with good information density

Design

┌─ Fleet ──────────────────────────────────────┬─ Active Now ───────────────────────────────┐
│ ● 5 active  💤 8 idle  ✅ 112 done           │ ● Fix CSS in models-app      ● Working... │
│ ███░░░░░░░░░░░░░░░░░░  🪙 180M tokens        │ ● Reduce Toil w/ LLM         ● Working... │
│                                               │ ● Drag/drop screenshots      ● Working... │
│                                               │ ✋ Evaluate Agentic Recap     ❓ "What..." │
├─ Attention (7) ──────────────────────────────┤│                                            │
│ 🔴 Evaluate Agentic Recap   gh-hubber  19h   ├────────────────────────────────────────────┤
│ 🟡 Review Issue 54          gh-skills  19h   │─ Recent ──────────────────────────────────│
│ 🟡 Repo automation          1-1-Repo   19h   │ ✅ Slash command integration  PR #33  3h   │
│ 🟡 Fix keyboard shortcuts   claudia    18h   │ ✅ Triage workflow            PR #45  3h   │
│ ...                                          │ ✅ Weekly FR triage           memex   17h  │
├─ Repos ──────────────────────────────────────┤│ ✅ Troubleshoot PR Landing          19h   │
│ ▎maxbeizer/gh-agent-viz          ● 1 active  │ ✅ Reclaim AI Shortcuts              19h   │
│  inorite/inorite      ● 3 active   ✅ 40 done│                                            │
│  github/memex    ● 1  💤 1  ✅ 1              │                                            │
└──────────────────────────────────────────────┴────────────────────────────────────────────┘

Acceptance Criteria

  • Dashboard uses a 2-column layout (left: fleet + attention + repos, right: active + recent)
  • All panels have unicode box-drawn borders with section titles
  • Panels resize responsively with terminal width (collapse to single-column below 100 cols)
  • Active sessions panel shows animated status icons (breathing dot for running)
  • Layout uses Lip Gloss JoinHorizontal/JoinVertical with bordered styles
  • No regression in keyboard navigation (j/k still works for repo cursor)
  • Mouse wheel still scrolls the focused panel
  • Falls back to current vertical layout on narrow terminals (<100 cols)

Technical Notes

  • Bubble Tea + Lip Gloss fully support this — gh-dash does multi-pane layouts
  • Use lipgloss.JoinHorizontal(lipgloss.Top, leftCol, rightCol) for the 2-column split
  • Use lipgloss.NewStyle().Border(lipgloss.RoundedBorder()) for panel frames
  • Panel heights should be computed from available terminal height, not hardcoded

Parent

Sub-issue of #192

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions