docs: add Phase 2 tasks 15-19 (TUI Overhaul) to implementation plan
This commit is contained in:
swanadiva
@@ -4662,11 +4662,263 @@ git tag -a v1.0.0 -m "Initial MVP release with core SSH management features"
|
||||
|
||||
---
|
||||
|
||||
## Phase 2: TUI Overhaul & Enhanced Features
|
||||
|
||||
### Task 15: TUI Tab Framework & Orange Theme
|
||||
|
||||
**Files:**
|
||||
- Create: `pkg/tui/tabs.go` — TabManager, tab bar renderer
|
||||
- Create: `pkg/tui/styles.go` — All lipgloss styles (orange palette)
|
||||
- Modify: `pkg/tui/tui.go` — Integrate TabManager, replace single-screen with tab routing
|
||||
|
||||
**Step 1: Create styles.go**
|
||||
|
||||
```go
|
||||
// pkg/tui/styles.go
|
||||
package tui
|
||||
|
||||
import "github.com/charmbracelet/lipgloss"
|
||||
|
||||
// Orange theme palette
|
||||
var (
|
||||
OrangePrimary = lipgloss.Color("#FF6B00")
|
||||
OrangeSecondary = lipgloss.Color("#FF9F43")
|
||||
OrangeLight = lipgloss.Color("#FFB800")
|
||||
DarkBg = lipgloss.Color("#1A1A1A")
|
||||
LightBg = lipgloss.Color("#2D2D2D")
|
||||
TextPrimary = lipgloss.Color("#FFFFFF")
|
||||
TextSecondary = lipgloss.Color("#AAAAAA")
|
||||
)
|
||||
|
||||
// Component styles
|
||||
var (
|
||||
TabActiveStyle = lipgloss.NewStyle().Background(OrangePrimary).Foreground(DarkBg).Bold(true).Padding(0, 2)
|
||||
TabInactiveStyle = lipgloss.NewStyle().Background(LightBg).Foreground(TextSecondary).Padding(0, 2)
|
||||
TabBarStyle = lipgloss.NewStyle().Background(DarkBg)
|
||||
StatusBarStyle = lipgloss.NewStyle().Background(OrangePrimary).Foreground(DarkBg).Padding(0, 1)
|
||||
TitleStyle = lipgloss.NewStyle().Foreground(OrangeSecondary).Bold(true)
|
||||
HighlightStyle = lipgloss.NewStyle().Foreground(OrangePrimary).Bold(true)
|
||||
SelectedStyle = lipgloss.NewStyle().Foreground(DarkBg).Background(OrangePrimary).Padding(0, 1)
|
||||
)
|
||||
```
|
||||
|
||||
**Step 2: Create tabs.go — TabManager**
|
||||
|
||||
Core structure:
|
||||
- `Tab` interface with `Init()`, `Update(msg)`, `View()`, `Name() string`
|
||||
- `TabManager` holds slice of tabs + active index
|
||||
- Tab bar rendered via `TabActiveStyle` / `TabInactiveStyle`
|
||||
- Keybind routing: tab-level keys (Ctrl+Tab, Ctrl+Q, Ctrl+N) vs tab-content keys
|
||||
|
||||
```go
|
||||
type Tab interface {
|
||||
Init() tea.Cmd
|
||||
Update(tea.Msg) (Tab, tea.Cmd)
|
||||
View() string
|
||||
Name() string
|
||||
}
|
||||
|
||||
type TabManager struct {
|
||||
tabs []Tab
|
||||
active int
|
||||
}
|
||||
```
|
||||
|
||||
**Step 3: Modify tui.go**
|
||||
|
||||
Replace `CurrentScreen Screen` with `*TabManager`. Init creates default `HostsTab`. Update delegates to `TabManager.Update()`. View renders tab bar + active tab view + status bar.
|
||||
|
||||
**Step 4: Verify**
|
||||
|
||||
```bash
|
||||
make build
|
||||
./bin/hostkeeper tui
|
||||
```
|
||||
|
||||
Expected: Tab bar visible at top with "Hosts" tab, orange theme, status bar at bottom. Keyboard navigation works (Ctrl+Tab cycles tabs if multiple exist).
|
||||
|
||||
---
|
||||
|
||||
### Task 16: SSH Session Tab (Multi-Session)
|
||||
|
||||
**Files:**
|
||||
- Create: `pkg/tui/session.go` — SessionTab with live SSH terminal
|
||||
|
||||
**Architecture:**
|
||||
```
|
||||
┌─ Hosts ── Server Nico ── Web Prod ────────────────┐
|
||||
│ │
|
||||
│ $ htop │
|
||||
│ $ cd /var/log │
|
||||
│ $ tail -f syslog │
|
||||
│ │
|
||||
│ [live SSH session output] │
|
||||
├─────────────────────────────────────────────────────┤
|
||||
│ Connected to Server Nico — Ctrl+Q to disconnect │
|
||||
└─────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
**SessionTab struct:**
|
||||
```go
|
||||
type SessionTab struct {
|
||||
host *models.Host
|
||||
client *ssh.Client // Go SSH client
|
||||
pty *ssh.Session
|
||||
width int
|
||||
height int
|
||||
input chan string // keyboard input → SSH stdin
|
||||
output chan string // SSH stdout → TUI render
|
||||
done chan struct{}
|
||||
}
|
||||
```
|
||||
|
||||
**Key flows:**
|
||||
1. User selects host in HostsTab → Enter → open SessionTab
|
||||
2. SessionTab connects via Go SSH client (auto-auth with stored password)
|
||||
3. Start PTY → 2 goroutines: stdin pump, stdout pump
|
||||
4. Keyboard input in TUI → `input` channel → SSH stdin
|
||||
5. SSH stdout → `output` channel → TUI render (via tea.Batch)
|
||||
6. Window resize → `msg tea.WindowSizeMsg` → SSH WindowChange
|
||||
7. Ctrl+Q → close session → remove tab → back to HostsTab
|
||||
8. Multiple sessions = multiple tabs, each with its own goroutines
|
||||
|
||||
**Verify:**
|
||||
```bash
|
||||
make build
|
||||
./bin/hostkeeper tui
|
||||
# Select a host → Enter → SSH session tab opens
|
||||
# Ctrl+Tab to switch between session and host list
|
||||
# Ctrl+Q to close session
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Task 17: TUI Host Forms (Add/Edit)
|
||||
|
||||
**Files:**
|
||||
- Create: `pkg/tui/host_form.go`
|
||||
|
||||
**Form fields:**
|
||||
- Name (text input)
|
||||
- Hostname/IP (text input)
|
||||
- Port (number input, default 22)
|
||||
- Username (text input)
|
||||
- Auth Type (select: password/key/both)
|
||||
- Password (text input, masked)
|
||||
- Key (file selector or paste)
|
||||
- Group (text input)
|
||||
- Tags (text input, comma-separated)
|
||||
- Notes (textarea)
|
||||
|
||||
**Implementation:**
|
||||
- Use Bubble Tea `textinput` model for each field
|
||||
- Tab/Shift+Tab to cycle fields
|
||||
- Enter on last field → submit → save via storage
|
||||
- Edit mode: pre-populate fields from existing host
|
||||
- Cancel (Escape) → back to HostsTab without saving
|
||||
|
||||
**Verify:**
|
||||
```bash
|
||||
make build
|
||||
./bin/hostkeeper tui
|
||||
# HostsTab → press 'a' or Ctrl+N → form opens
|
||||
# Fill fields → Enter → host saved → back to HostsTab
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Task 18: TUI SFTP Browser
|
||||
|
||||
**Files:**
|
||||
- Create: `pkg/tui/sftp_browser.go`
|
||||
|
||||
**Layout:**
|
||||
```
|
||||
┌─ Hosts ── Server Nico ── SFTP ────────────────────┐
|
||||
│ /var/www/ │
|
||||
│ ──────────────────────────────────────────────── │
|
||||
│ 📁 . <DIR> │
|
||||
│ 📁 .. <DIR> │
|
||||
│ 📁 html <DIR> 2026-01-15 │
|
||||
│ 📄 index.html 4.2 KB 2026-01-15 │
|
||||
│ 📄 config.php 1.1 KB 2026-01-14 │
|
||||
│ 📁 assets <DIR> 2026-01-10 │
|
||||
├─────────────────────────────────────────────────────┤
|
||||
│ ↑↓:nav Enter:open u:upload d:download q:close │
|
||||
└─────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
**Implementation:**
|
||||
- Reuse SSH connection from SessionTab (or create new one)
|
||||
- `golang.org/x/crypto/ssh` + `github.com/pkg/sftp` for SFTP operations
|
||||
- File list sorted: dirs first, then files alphabetically
|
||||
- Upload: local file picker (current directory) → remote path
|
||||
- Download: selected file → local directory
|
||||
- Navigation: Enter opens directory, Backspace goes up
|
||||
|
||||
**Verify:**
|
||||
```bash
|
||||
make build
|
||||
./bin/hostkeeper tui
|
||||
# SFTP tab → browse files → upload/download
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Task 19: TUI Key & Snippet Management
|
||||
|
||||
**Files:**
|
||||
- Create: `pkg/tui/key_list.go`
|
||||
- Create: `pkg/tui/snippet_list.go`
|
||||
|
||||
**Key List Tab:**
|
||||
- List all saved SSH keys with name, type, fingerprint
|
||||
- Select key → view details (public key, comment)
|
||||
- Actions: generate new key, import from file, delete
|
||||
- Generate: select type (RSA 4096, ED25519, ECDSA), optional passphrase
|
||||
|
||||
**Snippet List Tab:**
|
||||
- List saved command snippets
|
||||
- Select → preview command
|
||||
- Execute snippet on connected host
|
||||
- Create/edit snippets with name, command, description
|
||||
- Variable substitution: `{{hostname}}`, `{{user}}`, `{{port}}`
|
||||
|
||||
**Verify:**
|
||||
```bash
|
||||
make build
|
||||
./bin/hostkeeper tui
|
||||
# Keys tab → list/generate/import
|
||||
# Snippets tab → list/create/execute
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Phase 3: Advanced Features (Future)
|
||||
|
||||
**Cloud Sync:**
|
||||
- User account system
|
||||
- Encrypted cloud storage
|
||||
- Real-time multi-device sync
|
||||
- Conflict resolution
|
||||
|
||||
**Advanced Terminal:**
|
||||
- Custom terminal emulator
|
||||
- Advanced text selection
|
||||
|
||||
**Integration:**
|
||||
- Web UI (optional)
|
||||
- API access
|
||||
- Plugin system
|
||||
- Third-party integrations
|
||||
|
||||
---
|
||||
|
||||
## 📋 Summary
|
||||
|
||||
This implementation plan provides a comprehensive roadmap for building the Hostkeeper MVP with:
|
||||
|
||||
### ✅ Completed Components
|
||||
### ✅ Completed Components (MVP)
|
||||
|
||||
1. **Project Foundation** - Go modules, dependencies, build system
|
||||
2. **Core Data Models** - Host, Key, Snippet, Config models
|
||||
@@ -4681,6 +4933,14 @@ This implementation plan provides a comprehensive roadmap for building the Hostk
|
||||
11. **Build System** - Cross-platform compilation
|
||||
12. **Documentation** - Installation and usage guides
|
||||
|
||||
### 📋 Phase 2 Planned (TUI Overhaul)
|
||||
|
||||
1. **Task 15** — Tab Framework & Orange Theme
|
||||
2. **Task 16** — SSH Session Tab (multi-session)
|
||||
3. **Task 17** — TUI Host Forms (add/edit)
|
||||
4. **Task 18** — TUI SFTP Browser
|
||||
5. **Task 19** — TUI Key & Snippet Management
|
||||
|
||||
### 🎯 MVP Success Criteria
|
||||
|
||||
- ✅ Can establish SSH connections to remote servers
|
||||
@@ -4691,15 +4951,13 @@ This implementation plan provides a comprehensive roadmap for building the Hostk
|
||||
- ✅ Secure credential storage with proper permissions
|
||||
- ✅ User-friendly error messages and help text
|
||||
|
||||
### 🚀 Ready for Next Phase
|
||||
### 🚀 Ready for Phase 2
|
||||
|
||||
After completing these tasks, the project will be ready for:
|
||||
After completing the MVP, the next phase focuses on TUI Overhaul:
|
||||
|
||||
1. **Phase 2 Development** - Enhanced features like SFTP TUI, encryption, key management
|
||||
2. **User Testing** - Real-world usage and feedback
|
||||
3. **Documentation** - Advanced guides and tutorials
|
||||
4. **Community Building** - Open source contribution guidelines
|
||||
|
||||
**Estimated Development Time**: 3-4 weeks for experienced Go developer
|
||||
|
||||
**Next Steps**: Execute the implementation plan using the executing-plans skill!
|
||||
1. **Task 15** — TUI Tab Framework & Orange Theme (foundation)
|
||||
2. **Task 16** — SSH Session Tab (multi-session)
|
||||
3. **Task 17** — TUI Host Forms (add/edit in TUI)
|
||||
4. **Task 18** — TUI SFTP Browser
|
||||
5. **Task 19** — TUI Key & Snippet Management
|
||||
6. **Future** — Cloud sync, custom terminal emulator, web interface
|
||||
Reference in New Issue
Block a user