# Hostkeeper V2 — Sprint Plan (HTMX)

> **Status**: Migrasi React → HTMX
> **Last Updated**: 2026-07-07
> **Framework**: GoFiber v2 + HTMX + Alpine.js + TailwindCSS v4

---

## Sprint 0 — Setup GoFiber + HTMX

**Goal**: GoFiber server running, layout HTML renders, TailwindCSS works.

### Tasks

| # | Task | Files | Verify |
|---|------|-------|--------|
| 0.1 | Go module init | `app/backend/go.mod` | `go mod init` clean |
| 0.2 | Install GoFiber + deps | `go.mod` | `go get github.com/gofiber/fiber/v2` |
| 0.3 | Minimal Fiber server | `app/backend/main.go` | Server starts on :1947 |
| 0.4 | Static files serving | `main.go` | `/static/` serves files |
| 0.5 | HTML template engine | `main.go` + `views/layout.html` | Template renders |
| 0.6 | Download HTMX + Alpine | `static/js/htmx.min.js`, `static/js/alpine.min.js` | JS files exist |
| 0.7 | Setup TailwindCSS v4 | `static/css/output.css` | Tailwind classes work |
| 0.8 | Custom CSS (Lumina) | `static/css/custom.css` | dot-grid, glassmorphism, keyframes |
| 0.9 | Layout template | `views/layout.html` | Sidebar + header + main |
| 0.10 | Nav template | `views/partials/nav.html` | Nav items with active state |
| 0.11 | Index + routing | `views/index.html` + `handler/dashboard.go` | Dashboard renders |
| 0.12 | Health endpoint | `handler/health.go` | `curl :1947/api/health` |

### Files to Create (Sprint 0)

```
app/backend/
├── main.go
├── go.mod
├── go.sum
├── internal/
│   ├── handler/
│   │   ├── dashboard.go
│   │   └── health.go
│   └── middleware/
│       └── viewdata.go
├── static/
│   ├── css/
│   │   ├── output.css
│   │   └── custom.css
│   └── js/
│       ├── htmx.min.js
│       └── alpine.min.js
└── views/
    ├── layout.html
    ├── index.html
    └── partials/
        └── nav.html
```

---

## Sprint 1 — Dashboard + Host List

**Goal**: Dashboard halaman dengan host list, search, filter, add host modal.

### Tasks

| # | Task | Files |
|---|------|-------|
| 1.1 | Model Host | `internal/model/host.go` |
| 1.2 | Dashboard handler | `internal/handler/dashboard.go` |
| 1.3 | Dashboard template | `views/partials/dashboard.html` |
| 1.4 | Host list partial | `views/partials/host_list.html` |
| 1.5 | Host card partial | `views/partials/host_card.html` |
| 1.6 | Search HTMX | `hx-get="/hosts?q=..." hx-trigger="keyup delay:200ms"` |
| 1.7 | Filter status | `hx-get="/hosts?filter=active"` + `<select>` |
| 1.8 | View toggle (grid/list) | Alpine `x-data` |
| 1.9 | Add host modal | `views/partials/host_modal.html` + Alpine |
| 1.10 | POST /hosts | Handler create host |
| 1.11 | Background transfers | `views/partials/dashboard.html` |

### Files to Create (Sprint 1)

```
internal/model/host.go
views/partials/dashboard.html
views/partials/host_list.html
views/partials/host_card.html
views/partials/host_modal.html
views/partials/toast.html
static/js/clipboard.js     ← mulai buat
```

---

## Sprint 2 — Snippets + Keychain

**Goal**: Snippet library + credential keychain dengan CRUD.

### Tasks

| # | Task | Files |
|---|------|-------|
| 2.1 | Model Snippet | `internal/model/snippet.go` |
| 2.2 | Model Keychain | `internal/model/keychain.go` |
| 2.3 | Snippets handler | `internal/handler/snippets.go` |
| 2.4 | Keychain handler | `internal/handler/keychain.go` |
| 2.5 | Snippets template | `views/partials/snippets.html` |
| 2.6 | Snippet grid partial | `views/partials/snippet_grid.html` |
| 2.7 | Snippet modal | `views/partials/snippet_modal.html` |
| 2.8 | Keychain template | `views/partials/keychain.html` |
| 2.9 | Key grid partial | `views/partials/key_grid.html` |
| 2.10 | Key modal | `views/partials/key_modal.html` |
| 2.11 | Clipboard JS | `static/js/clipboard.js` |
| 2.12 | Passphrase reveal + strength | `static/js/utils.js` |

### Files to Create (Sprint 2)

```
internal/model/snippet.go
internal/model/keychain.go
internal/handler/snippets.go
internal/handler/keychain.go
views/partials/snippets.html
views/partials/snippet_grid.html
views/partials/snippet_modal.html
views/partials/keychain.html
views/partials/key_grid.html
views/partials/key_modal.html
static/js/clipboard.js
static/js/utils.js
```

---

## Sprint 3 — Settings + Brief Overlay

**Goal**: Settings page with profile form, toggles, connected devices.

### Tasks

| # | Task | Files |
|---|------|-------|
| 3.1 | Model Device + Config | `internal/model/device.go`, `internal/model/config.go` |
| 3.2 | Settings handler | `internal/handler/settings.go` |
| 3.3 | Brief handler | `internal/handler/brief.go` |
| 3.4 | Settings template | `views/partials/settings.html` |
| 3.5 | Brief template | `views/partials/brief.html` |
| 3.6 | Toggle switch JS | `static/js/toggles.js` |
| 3.7 | Toggle CSS | In custom.css |
| 3.8 | Danger zone | `localStorage.clear()` handler |

### Files to Create (Sprint 3)

```
internal/model/device.go
internal/model/config.go
internal/handler/settings.go
internal/handler/brief.go
views/partials/settings.html
views/partials/brief.html
static/js/toggles.js
```

---

## Sprint 4 — SFTP Dual-Pane

**Goal**: File browser dual-pane dengan navigasi folder, upload/download.

### Tasks

| # | Task | Files |
|---|------|-------|
| 4.1 | Model FileItem | `internal/model/file.go` |
| 4.2 | Model Transfer | `internal/model/transfer.go` |
| 4.3 | SFTP handler | `internal/handler/sftp.go` |
| 4.4 | SFTP template | `views/partials/sftp.html` |
| 4.5 | SFTP pane partial | `views/partials/sftp_pane.html` |
| 4.6 | Breadcrumb navigation | In sftp.html |
| 4.7 | Folder create + delete | Modal Alpine + POST |
| 4.8 | Toast notification | Alpine `x-data` |

### Files to Create (Sprint 4)

```
internal/model/file.go
internal/model/transfer.go
internal/handler/sftp.go
views/partials/sftp.html
views/partials/sftp_pane.html
```

---

## Sprint 5 — Terminal + xterm.js

**Goal**: SSH terminal via WebSocket + xterm.js dengan multi-tab.

### Tasks

| # | Task | Files |
|---|------|-------|
| 5.1 | Download xterm.js | `static/xterm/xterm.js`, `static/xterm/xterm.css` |
| 5.2 | Terminal handler | `internal/handler/terminal.go` |
| 5.3 | WebSocket handler | `internal/handler/terminal.go` (WS upgrade) |
| 5.4 | Terminal template | `views/partials/terminal.html` |
| 5.5 | Terminal JS | `static/js/terminal.js` (xterm init + WS) |
| 5.6 | Tab management | Alpine `x-data="terminalTabs()"` |
| 5.7 | SSH pipe (mock dulu) | Go backend → SSH via v1/pkg/ssh |
| 5.8 | Multi-tab per host | Alpine state + multiple xterm instances |

### Files to Create (Sprint 5)

```
internal/handler/terminal.go
views/partials/terminal.html
static/js/terminal.js
static/xterm/xterm.js
static/xterm/xterm.css
```

---

## Sprint 6 — Data Store Integration

**Goal**: Ganti mock data dengan real storage dari v1/pkg/. Integrasi SSH, SFTP, crypto.

### Tasks

| # | Task | Files |
|---|------|-------|
| 6.1 | replace directive go.mod | `app/backend/go.mod` |
| 6.2 | Integrate v1/pkg/storage | Semua handler |
| 6.3 | Integrate v1/pkg/config | `handler/settings.go` |
| 6.4 | Integrate v1/pkg/crypto | `handler/keychain.go` |
| 6.5 | Integrate v1/pkg/knownhosts | `handler/terminal.go` |
| 6.6 | Real SSH via v1/pkg/ssh | `handler/terminal.go` WS |
| 6.7 | Real SFTP via v1/pkg/ssh | `handler/sftp.go` |
| 6.8 | Remove all mock data | Semua handler |

---

## Total Files

| Sprint | Go Files | HTML Templates | JS Files | CSS Files |
|--------|----------|---------------|----------|-----------|
| Sprint 0 | 4 | 3 | 2 | 2 |
| Sprint 1 | 2 | 5 | 1 | 0 |
| Sprint 2 | 4 | 6 | 2 | 0 |
| Sprint 3 | 4 | 2 | 1 | 0 |
| Sprint 4 | 3 | 2 | 0 | 0 |
| Sprint 5 | 1 | 1 | 1 | 0 |
| Sprint 6 | (modify existing) | 0 | 0 | 0 |
| **Total** | **18** | **19** | **7** | **2** |