Phase 5 complete: TUI client documentation, updated roadmap

2026-06-28 17:47:18 -04:00
parent e1b1c385b5
commit 26599b27cc
3 changed files with 135 additions and 4 deletions
+123
@@ -0,0 +1,123 @@
# Phase 5: TUI Client
Phase 5 brings the Dumpster to the terminal with a Bubbletea-based TUI client.
## Features
| Feature | Status | Description |
|---------|--------|-------------|
| Multi-pane layout | ✅ | Server bar, channel list, chat pane, member list, voice status |
| IRC-style messages | ✅ | `[HH:MM] <username> content` with colored usernames |
| Vim-style navigation | ✅ | `j`/`k` scroll, `g`/`G` top/bottom, `Tab` cycle panels |
| Message input | ✅ | `> _` prompt, Enter to send, Shift+Enter for newline |
| WebSocket client | ✅ | Real-time message stream, typing indicators, presence |
| Member list | ✅ | `●`/`◐`/`○` status indicators, toggle with `m` |
| Voice support | ✅ | Join/leave voice, mute toggle, audio levels |
| Config file | ✅ | `~/.config/dumpster/config.yaml` or env vars |
| Static binary | ✅ | Single binary, no dependencies |
## Running the TUI
### With environment variables
```bash
DUMPSTER_SERVER=https://chat.your.domain \
DUMPSTER_TOKEN=*** \
dumpster-tui
```
### With config file
Create `~/.config/dumpster/config.yaml`:
```yaml
server: https://chat.your.domain
token: ***
```
Then run:
```bash
dumpster-tui
```
### Build from source
```bash
make build-tui
./dumpster-tui --version
```
## Keybindings
### Navigation
| Key | Action |
|-----|--------|
| `j`/`k` | Scroll messages up/down |
| `g`/`G` | Jump to top/bottom |
| `Tab` | Cycle between panels |
| `/` | Channel picker |
| `?` | Help overlay |
### Input
| Key | Action |
|-----|--------|
| `i` | Focus input |
| `Esc` | Unfocus input |
| `Enter` | Send message |
| `Shift+Enter` | Newline |
| `Up`/`Down` | Message history |
| `@` | Mention autocomplete |
| `:` | Emoji autocomplete |
### Actions
| Key | Action |
|-----|--------|
| `r` | Reply to message |
| `e` | Edit own message |
| `d` | Delete own message (with confirm) |
| `a` | Add reaction |
### Voice
| Key | Action |
|-----|--------|
| `v` | Join voice channel |
| `V` | Leave voice channel |
| `m` | Toggle mute |
### Quit
| Key | Action |
|-----|--------|
| `q` | Quit (with confirm) |
## Layout
```
┌─ DUMPSTER ──────────────────────────────────────────────────────┐
│ [D] │ #general │ [14:32] <dustin> hey │ ● u1│
│ │ #memes │ [14:33] <friend> sup │ ● u2│
│ [G] │ 🔊 hangout │ [14:33] <dustin> lol │ ○ u3│
│ │ │ │ │
│ │ │ ┌─┤ VOICE ├──────────────────────────┐ │ │
│ │ │ │ 🔊 hangout ●dustin ●friend │ │ │
│ │ │ │ [m] [d] [x] │ │ │
│ │ │ └────────────────────────────────────┘ │ │
│ │ │ ─────────────────────────────────────── │ │
│ │ │ > _ │ │
└─────┴──────────────┴──────────────────────────────────────────┴─────┘
[48px] [200px] [flex] [180px]
```
## What's not in MVP
- Image rendering in terminal (show URL)
- Video in terminal (not practical)
- File previews (show filename + URL)
- Thread view (show reply inline)
- Custom emoji (unicode only)
- Plugin system (future)
+11 -4
@@ -53,8 +53,15 @@
- [x] Example bot: welcome messages on member join - [x] Example bot: welcome messages on member join
- [ ] REST API documentation (OpenAPI/Swagger) — future - [ ] REST API documentation (OpenAPI/Swagger) — future
## Phase 5: TUI Client ## Phase 5: TUI Client — ✅ DONE
- [ ] Bubbletea terminal client - [x] Bubbletea app scaffolding
- [ ] IRC-style chat in terminal - [x] Multi-pane layout (server bar, channel list, chat, members)
- [ ] LiveKit Go SDK for audio-only voice - [x] WebSocket client for real-time events
- [x] Vim-style navigation (j/k, g/G, Tab, /)
- [x] IRC-style message rendering
- [x] Message input with history
- [x] Voice support (join/leave, mute)
- [x] Lipgloss Gruvbox theming
- [x] Static binary (`dumpster-tui`)
- [x] Config file + env vars
+1
@@ -8,6 +8,7 @@
- [Voice & Video](Voice-and-Video) - [Voice & Video](Voice-and-Video)
- [Phase 3: Polish & PWA](Phase-3) - [Phase 3: Polish & PWA](Phase-3)
- [Phase 4: Bots & Extensibility](Phase-4) - [Phase 4: Bots & Extensibility](Phase-4)
- [Phase 5: TUI Client](Phase-5)
- [Frontend Design](Frontend-Design) - [Frontend Design](Frontend-Design)
- [Self-Hosting](Self-Hosting) - [Self-Hosting](Self-Hosting)
- [Roadmap](Roadmap) - [Roadmap](Roadmap)