feat: Sprint 0 — GoFiber + HTMX + TailwindCSS v4 scaffolding

- Go module: git.tukangketik.id/swanadiva/hostkeeper/v2 - GoFiber v2 server with static, template engine, middleware - HTMX + Alpine.js (downloaded from CDN) - TailwindCSS v4 with custom theme (Lumina System colors) - Custom CSS: dot-grid, glassmorphism, animations, toggle, modal - Layout template (sidebar nav + header + main) - Dashboard page with host list, search, filter, view toggle - Health endpoint: GET /api/health
docs: migrate all planning docs from React to GoFiber + HTMX
2026-07-07 12:18:39 +07:00 · 2026-07-07 12:15:19 +07:00 · 2026-07-07 12:04:59 +07:00 · 2026-07-07 12:01:52 +07:00 · 2026-07-07 11:56:27 +07:00
103 changed files with 3680 additions and 3265 deletions
@@ -40,3 +40,8 @@ Thumbs.db

 # Build output
 dist/hostkeeper
+v1/hostkeeper
+
+# Node dependencies (for TailwindCSS build)
+node_modules/
+package-lock.json
@@ -0,0 +1,205 @@
+# Hostkeeper V2 — AI Session Checkpoint
+
+> **Purpose**: Memungkinkan AI agent berikutnya melanjutkan development tanpa mengulang atau merusak.
+> **Last Updated**: 2026-07-07
+> **Current Phase**: Pre-development (documentation updated, scaffolding not yet started)
+
+---
+
+## 1. Repository Structure
+
+```
+hostkeeper/                          (root — bersih untuk V2)
+├── v1/                              ← FROZEN — V1 CLI/TUI, jangan disentuh
+│   ├── cmd/hostkeeper/              V1 cobra CLI commands
+│   ├── internal/errors/             V1 error handling
+│   ├── internal/models/             V1 data models
+│   ├── pkg/                         Shared packages (ssh, crypto, storage, config, knownhosts, tui)
+│   ├── test/                        V1 integration & unit tests (105 passing)
+│   ├── docs/plans/                  V1 design & implementation docs
+│   ├── go.mod                       module git.tukangketik.id/swanadiva/hostkeeper
+│   ├── Makefile
+│   └── PROJECT_STATE.md             V1 full project state
+├── app/                             ← (BELUM DIBUAT) V2 backend GoFiber + views + static
+├── mobile/                          ← (BELUM DIBUAT) V2 mobile wrapper
+├── template/                        ← Referensi UI React (Lumina System) — hanya untuk desain
+│   └── src/components/              7 React screens
+├── docs/                            ← Dokumentasi perencanaan V2 (HTMX)
+│   ├── ARCHITECTURE_HTMX.md         Arsitektur HTMX (dokumen utama)
+│   ├── ARCHITECTURE.md              Ringkasan + pointer ke HTMX
+│   ├── API.md                       REST + WebSocket spec
+│   ├── DATA_MODELS.md               Data models (Host, Snippet, Key, dll)
+│   ├── UI_COMPONENTS.md             HTMX component tree (bukan React)
+│   ├── SPRINT_PLAN.md               Sprint 0-6 untuk HTMX
+│   ├── BUILD_SYSTEM.md              Build pipeline (Go + CSS, tanpa Vite)
+│   ├── TIMELINE.md                  Timeline 3.5 minggu
+│   ├── PERFROMANCE.md               Performance & stability
+│   ├── UI_TERMIUS_REFERENCE.md      Termius visual reference
+│   └── PROGRESS.md                  Status tracker
+├── AGENTS.md                        ← file ini (checkpoint AI)
+└── README.md
+
+Git branches:
+  - main        → V2 development (current)
+  - v1-snapshot → V1 snapshot before move (safety backup)
+```
+
+---
+
+## 2. V1 Status — FROZEN 🧊
+
+| Aspek | Detail |
+|-------|--------|
+| Kode | Semua di `v1/` — cmd/, internal/, pkg/, test/ |
+| Build | `cd v1 && go build ./cmd/hostkeeper` |
+| Test | `cd v1 && go test ./...` — 105 tests passing |
+| Branch backup | `v1-snapshot` — snapshot sebelum dipindah ke subdirektori |
+| Aturan | **JANGAN** mengubah file di `v1/` |
+
+---
+
+## 3. V2 Architecture — HTMX (Keputusan Penting)
+
+**Hostkeeper V2 menggunakan GoFiber + HTMX, BUKAN React.**
+
+Alasan:
+- Developer lebih nyaman dengan Go daripada JavaScript
+- ~90% kode adalah Go + HTML template
+- Hanya ~410 baris JS yang diperlukan (xterm.js, clipboard, toggle)
+- Build lebih sederhana — tanpa Vite, npm, TypeScript, Webpack
+- Bisa berjalan di browser biasa tanpa Electron
+
+```
+┌───────────────────────────────────────────────────┐
+│  Browser / Electron WebView                       │
+│  ┌─────────────────────────────────────────────┐  │
+│  │  HTMX (14kb) + Alpine.js (15kb) + xterm.js  │  │
+│  │  ● HTMX: search, filter, modal, form, nav   │  │
+│  │  ● Alpine: client state (toast, toggle)     │  │
+│  │  ● xterm.js: terminal (halaman terminal)    │  │
+│  │  ● Vanilla JS: clipboard, toggle, utils     │  │
+│  └────────────────┬────────────────────────────┘  │
+│                   │ hx-get/hx-post/hx-ws           │
+│  ┌────────────────▼────────────────────────────┐  │
+│  │  GoFiber v2 (localhost:1947)                │  │
+│  │  ┌──────────────┐  ┌────────────────────┐   │  │
+│  │  │ HTML handler  │  │ WebSocket/SSH     │   │  │
+│  │  │ (html/templ.) │  │ (xterm.js I/O)    │   │  │
+│  │  └──────┬───────┘  └────────────────────┘   │  │
+│  │    ┌────▼────┐                               │  │
+│  │    │ v1/pkg/ │ (via replace directive)       │  │
+│  │    └─────────┘                               │  │
+│  └──────────────────────────────────────────────┘  │
+└─────────────────────────────────────────────────────┘
+```
+
+| Library | Ukuran | Fungsi |
+|---------|--------|--------|
+| HTMX | 14kb | HTML-over-HTTP interaktivitas |
+| Alpine.js | 15kb | Client state (modal, toast, tab) |
+| xterm.js | ~100kb | Terminal emulator (WAJIB) |
+| TailwindCSS v4 | ~27kb | Utility-first CSS |
+
+---
+
+## 4. V2 Status — Pre-Development
+
+### ✅ Sudah Selesai
+- Semua dokumentasi diupdate ke HTMX (10 file di `docs/`)
+- Template UI dianalisis (Lumina System — bright-tech glassmorphic, TailwindCSS v4)
+- Root dibersihkan — V1 di `v1/`, V2 siap dimulai di `app/`
+- `template/` tetap sebagai referensi desain (warna, layout, spacing)
+- Bug template sudah diidentifikasi (animasi CSS, w-4.5, error boundary, dll)
+
+### ❌ Belum Dimulai
+- `app/backend/` — GoFiber v2 server + handler + views
+
+### 🐛 Bug Template (dari template/src/ — catatan saat implementasi)
+1. **P0**: Missing CSS keyframes (fade-in, scale-up, slide-in) → tambah di `custom.css`
+2. **P1**: `w-4.5 h-4.5` → ganti `w-5 h-5`
+3. **P2**: Tidak ada Error Boundary → not applicable (HTML template)
+4. **P2**: `as any` casts → not applicable (Go typed)
+5. **P3**: Auto-focus loss → handle via JS `focus()` di Alpine
+
+---
+
+## 5. Struktur Folder V2 (Target)
+
+```
+app/backend/
+├── main.go                    ← Fiber app entry
+├── go.mod                     ← module git.tukangketik.id/swanadiva/hostkeeper/v2
+├── internal/
+│   ├── handler/               ← HTTP handlers (render HTML)
+│   │   ├── dashboard.go
+│   │   ├── terminal.go
+│   │   ├── sftp.go
+│   │   ├── snippets.go
+│   │   ├── keychain.go
+│   │   ├── settings.go
+│   │   ├── brief.go
+│   │   └── health.go
+│   ├── model/                 ← Go structs (Host, Snippet, Key, dll)
+│   ├── template/              ← Template helper funcs
+│   └── middleware/             ← View data injection
+├── static/
+│   ├── css/                   ← output.css + custom.css
+│   ├── js/                    ← htmx.min.js, alpine.min.js, utils.js, terminal.js
+│   └── xterm/                 ← xterm.js lib
+└── views/
+    ├── layout.html
+    ├── index.html
+    └── partials/              ← ~17 partial HTML files
+```
+
+---
+
+## 6. Yang Harus Dilakukan Selanjutnya (First Actions)
+
+Urutan eksekusi saat development dimulai:
+
+```
+Sprint 0 — Setup:
+Step 1:  mkdir -p app/backend
+Step 2:  cd app/backend && go mod init git.tukangketik.id/swanadiva/hostkeeper/v2
+Step 3:  go get github.com/gofiber/fiber/v2
+Step 4:  go get github.com/gofiber/template/html/v2
+Step 5:  Buat main.go (Fiber app skeleton + static + template engine)
+Step 6:  Download htmx.min.js, alpine.min.js ke static/js/
+Step 7:  Setup TailwindCSS v4: input.css → npx @tailwindcss/cli
+Step 8:  Buat custom.css (dot-grid, glassmorphism, keyframes)
+Step 9:  Buat views/layout.html + views/index.html + nav.html
+Step 10: Buat handler/health.go + handler/dashboard.go
+Step 11: Verify: buka http://localhost:1947 — layout terlihat
+```
+
+---
+
+## 7. Path Penting & Referensi
+
+| Untuk | Lihat di |
+|-------|----------|
+| Arsitektur HTMX lengkap | `docs/ARCHITECTURE_HTMX.md` |
+| API spec | `docs/API.md` |
+| Data models (Go struct) | `docs/DATA_MODELS.md` |
+| HTMX component tree | `docs/UI_COMPONENTS.md` |
+| Sprint plan detail | `docs/SPRINT_PLAN.md` |
+| Timeline 3.5 minggu | `docs/TIMELINE.md` |
+| Build system | `docs/BUILD_SYSTEM.md` |
+| Status tracker | `docs/PROGRESS.md` |
+| Template desain (React) | `template/AGENTS.md` (Lumina System) |
+| Template komponen (referensi) | `template/src/components/` |
+| V1 shared packages | `v1/pkg/ssh/`, `v1/pkg/crypto/`, `v1/pkg/storage/`, `v1/pkg/config/`, `v1/pkg/knownhosts/` |
+| V1 build & test | `cd v1 && go build ./cmd/hostkeeper && go test ./...` |
+
+---
+
+## 8. Aturan Penting
+
+- **JANGAN** mengubah file di `v1/` — V1 FROZEN
+- **JANGAN** mengubah `template/` — itu referensi desain, bukan source aktif
+- Semua kode V2 baru di `app/`
+- Saat reuse `v1/pkg/*`, pakai `go.mod replace` — jangan copy
+- Template React hanya untuk referensi visual (warna, layout, spacing)
+- Gunakan TailwindCSS v4 + custom CSS (Lumina System)
+- Pakai bahasa Indonesia untuk komunikasi dengan user (swanadiva)
@@ -3,15 +3,15 @@
 ## [Unreleased] — V2 Planning Complete (2026-06-29)

 ### Added (V2 Planning Documents)
- `docs/v2/PROGRESS.md` — Status tracker for V2 development
- `docs/v2/ARCHITECTURE.md` — System architecture (GoFiber + React + Electron)
- `docs/v2/API.md` — REST API + WebSocket specification
- `docs/v2/DATA_MODELS.md` — Extended data models (Groups, PortForward, Workspace)
- `docs/v2/UI_COMPONENTS.md` — React component tree + state management
- `docs/v2/UI_TERMIUS_REFERENCE.md` — Termius visual reference
- `docs/v2/SPRINT_PLAN.md` — Sprint-by-sprint task breakdown
- `docs/v2/BUILD_SYSTEM.md` — Cross-platform build pipeline
- `docs/v2/PERFORMANCE.md` — Performance & stability guide
+- `docs/PROGRESS.md` — Status tracker for V2 development
+- `docs/ARCHITECTURE.md` — System architecture (GoFiber + React + Electron)
+- `docs/API.md` — REST API + WebSocket specification
+- `docs/DATA_MODELS.md` — Extended data models (Groups, PortForward, Workspace)
+- `docs/UI_COMPONENTS.md` — React component tree + state management
+- `docs/UI_TERMIUS_REFERENCE.md` — Termius visual reference
+- `docs/SPRINT_PLAN.md` — Sprint-by-sprint task breakdown
+- `docs/BUILD_SYSTEM.md` — Cross-platform build pipeline
+- `docs/PERFORMANCE.md` — Performance & stability guide

 ### Architecture Decision
 - Backend: GoFiber v2 (fasthttp-based) replacing chi/net/http
@@ -2,136 +2,39 @@

 **Cross-platform SSH/SFTP management tool with secure credential storage**

-## Features
+## V1 (Legacy) — CLI/TUI

- **Secure Credential Management** — Store SSH credentials with proper file permissions (0600)
- **SSH Connection** — Connect to hosts via native SSH or Go SSH client
- **Host Management** — Add, list, connect, edit, delete hosts
- **Export/Import** — Backup and transfer credentials across devices
- **TUI Interface** — Interactive terminal user interface for host management
- **Cross-Platform** — Works on Linux, macOS, Windows, and Termux (Android)
- **Fast CLI** — Quick commands for power users
- **Tag-based Organization** — Categorize hosts with custom tags and groups
-
-## Quick Start
-
-### Installation
+V1 adalah versi CLI/TUI yang sudah selesai dan di-freeze. Semua kode ada di folder [`v1/`](v1/).

 ```bash
-# Build from source
-git clone https://git.tukangketik.id/swanadiva/HostKeeper.git
-cd hostkeeper
+cd v1
 make build
-
-# Or install directly
-go install git.tukangketik.id/swanadiva/hostkeeper/cmd/hostkeeper@latest
+./hostkeeper tui
 ```

-### Usage
+Lihat [`v1/README.md`](v1/README.md) untuk dokumentasi lengkap.

-```bash
-# Add a host (interactive)
-hostkeeper add
+## V2 (In Development) — GoFiber + React + Electron

-# Or with flags
-hostkeeper add myserver --host 192.168.1.10 --user admin --password mypass
+V2 adalah rewrite dengan arsitektur baru:
+- **Backend**: GoFiber v2 (fasthttp) — lokal HTTP server di `app/backend/`
+- **Frontend**: React + TypeScript + TailwindCSS v4 di `app/frontend/`
+- **Desktop**: Electron wrapper di `app/electron/`
+- **Mobile**: WebView shell di `mobile/`

-# List all hosts
-hostkeeper list
+Lihat [docs/](docs/) untuk dokumentasi perencanaan.

-# Connect to host
-hostkeeper connect myserver
+## Struktur Repository

-# Edit host
-hostkeeper edit myserver
-
-# Delete host
-hostkeeper delete myserver
-
-# Launch TUI
-hostkeeper tui
 ```
-
-## Core Commands
-
-| Command | Description |
-|---------|-------------|
-| `hostkeeper add [name]` | Add a new SSH host |
-| `hostkeeper list` | List all saved hosts |
-| `hostkeeper connect <name>` | Connect to a host |
-| `hostkeeper edit <name>` | Edit a host configuration |
-| `hostkeeper delete <name>` | Delete a host |
-| `hostkeeper export <file>` | Export data to JSON file |
-| `hostkeeper import <file>` | Import data from JSON file |
-| `hostkeeper tui` | Launch TUI interface |
-| `hostkeeper completion [shell]` | Generate shell completion |
-| `hostkeeper version` | Print version info |
-
-## Installation
-
-See [Installation Guide](docs/INSTALLATION.md) for detailed instructions for all platforms.
-
-## Usage
-
-See [Usage Guide](docs/USAGE.md) for detailed command examples.
-
-## Architecture
-
-See [Architecture Overview](docs/ARCHITECTURE.md) for technical details.
-
-## Security
-
- All credential files use `0600` permissions (owner read/write only)
- Passwords and keys are never logged or displayed in error messages
- Encrypted storage planned for Phase 2
-
-## Development
-
-### Prerequisites
-
- Go 1.21+
- Make (optional, for build automation)
-
-### Setup
-
-```bash
-git clone https://git.tukangketik.id/swanadiva/HostKeeper.git
-cd hostkeeper
-make deps
-make build
+hostkeeper/
+├── v1/          ← V1 CLI/TUI (frozen)
+├── app/         ← V2 backend + frontend + electron
+├── mobile/      ← V2 mobile wrapper
+├── template/    ← Referensi UI React (Lumina System)
+└── docs/        ← Dokumentasi perencanaan V2
 ```

-### Testing
-
-```bash
-# All tests
-make test
-
-# With coverage
-make test-coverage
-```
-
-### Build
-
-```bash
-# Current platform
-make build
-
-# All platforms
-make release
-```
-
-## Tech Stack
-
- **Language**: Go 1.21+
- **CLI Framework**: [Cobra](https://github.com/spf13/cobra)
- **TUI Framework**: [Bubble Tea](https://github.com/charmbracelet/bubbletea)
- **SSH Library**: [golang.org/x/crypto/ssh](https://pkg.go.dev/golang.org/x/crypto/ssh)
-
-## Project Status
-
-Project is in active development. See [PROJECT_STATE.md](PROJECT_STATE.md) for current progress.
-
 ## License

 MIT
@@ -0,0 +1,24 @@
+module git.tukangketik.id/swanadiva/hostkeeper/v2
+
+go 1.26.4
+
+require (
+	github.com/gofiber/fiber/v2 v2.52.14
+	github.com/gofiber/template/html/v2 v2.1.3
+)
+
+require (
+	github.com/andybalholm/brotli v1.1.0 // indirect
+	github.com/gofiber/template v1.8.3 // indirect
+	github.com/gofiber/utils v1.1.0 // indirect
+	github.com/google/uuid v1.6.0 // indirect
+	github.com/klauspost/compress v1.17.9 // indirect
+	github.com/mattn/go-colorable v0.1.13 // indirect
+	github.com/mattn/go-isatty v0.0.20 // indirect
+	github.com/mattn/go-runewidth v0.0.16 // indirect
+	github.com/rivo/uniseg v0.2.0 // indirect
+	github.com/valyala/bytebufferpool v1.0.0 // indirect
+	github.com/valyala/fasthttp v1.51.0 // indirect
+	github.com/valyala/tcplisten v1.0.0 // indirect
+	golang.org/x/sys v0.28.0 // indirect
+)
@@ -0,0 +1,41 @@
+github.com/andybalholm/brotli v1.1.0 h1:eLKJA0d02Lf0mVpIDgYnqXcUn0GqVmEFny3VuID1U3M=
+github.com/andybalholm/brotli v1.1.0/go.mod h1:sms7XGricyQI9K10gOSf56VKKWS4oLer58Q+mhRPtnY=
+github.com/davecgh/go-spew v1.1.1 h1:vj9j/u1bqnvCEfJOwUhtlOARqs3+rkHYY13jYWTU97c=
+github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
+github.com/gofiber/fiber/v2 v2.52.14 h1:Of3L+9qVFaQNwPlcmEdl5IIodHz8BSE0j37R7rWu4pE=
+github.com/gofiber/fiber/v2 v2.52.14/go.mod h1:YEcBbO/FB+5M1IZNBP9FO3J9281zgPAreiI1oqg8nDw=
+github.com/gofiber/template v1.8.3 h1:hzHdvMwMo/T2kouz2pPCA0zGiLCeMnoGsQZBTSYgZxc=
+github.com/gofiber/template v1.8.3/go.mod h1:bs/2n0pSNPOkRa5VJ8zTIvedcI/lEYxzV3+YPXdBvq8=
+github.com/gofiber/template/html/v2 v2.1.3 h1:n1LYBtmr9C0V/k/3qBblXyMxV5B0o/gpb6dFLp8ea+o=
+github.com/gofiber/template/html/v2 v2.1.3/go.mod h1:U5Fxgc5KpyujU9OqKzy6Kn6Qup6Tm7zdsISR+VpnHRE=
+github.com/gofiber/utils v1.1.0 h1:vdEBpn7AzIUJRhe+CiTOJdUcTg4Q9RK+pEa0KPbLdrM=
+github.com/gofiber/utils v1.1.0/go.mod h1:poZpsnhBykfnY1Mc0KeEa6mSHrS3dV0+oBWyeQmb2e0=
+github.com/google/uuid v1.6.0 h1:NIvaJDMOsjHA8n1jAhLSgzrAzy1Hgr+hNrb57e+94F0=
+github.com/google/uuid v1.6.0/go.mod h1:TIyPZe4MgqvfeYDBFedMoGGpEw/LqOeaOT+nhxU+yHo=
+github.com/klauspost/compress v1.17.9 h1:6KIumPrER1LHsvBVuDa0r5xaG0Es51mhhB9BQB2qeMA=
+github.com/klauspost/compress v1.17.9/go.mod h1:Di0epgTjJY877eYKx5yC51cX2A2Vl2ibi7bDH9ttBbw=
+github.com/mattn/go-colorable v0.1.13 h1:fFA4WZxdEF4tXPZVKMLwD8oUnCTTo08duU7wxecdEvA=
+github.com/mattn/go-colorable v0.1.13/go.mod h1:7S9/ev0klgBDR4GtXTXX8a3vIGJpMovkB8vQcUbaXHg=
+github.com/mattn/go-isatty v0.0.16/go.mod h1:kYGgaQfpe5nmfYZH+SKPsOc2e4SrIfOl2e/yFXSvRLM=
+github.com/mattn/go-isatty v0.0.20 h1:xfD0iDuEKnDkl03q4limB+vH+GxLEtL/jb4xVJSWWEY=
+github.com/mattn/go-isatty v0.0.20/go.mod h1:W+V8PltTTMOvKvAeJH7IuucS94S2C6jfK/D7dTCTo3Y=
+github.com/mattn/go-runewidth v0.0.16 h1:E5ScNMtiwvlvB5paMFdw9p4kSQzbXFikJ5SQO6TULQc=
+github.com/mattn/go-runewidth v0.0.16/go.mod h1:Jdepj2loyihRzMpdS35Xk/zdY8IAYHsh153qUoGf23w=
+github.com/pmezard/go-difflib v1.0.0 h1:4DBwDE0NGyQoBHbLQYPwSUPoCMWR5BEzIk/f1lZbAQM=
+github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4=
+github.com/rivo/uniseg v0.2.0 h1:S1pD9weZBuJdFmowNwbpi7BJ8TNftyUImj/0WQi72jY=
+github.com/rivo/uniseg v0.2.0/go.mod h1:J6wj4VEh+S6ZtnVlnTBMWIodfgj8LQOQFoIToxlJtxc=
+github.com/stretchr/testify v1.10.0 h1:Xv5erBjTwe/5IxqUQTdXv5kgmIvbHo3QQyRwhJsOfJA=
+github.com/stretchr/testify v1.10.0/go.mod h1:r2ic/lqez/lEtzL7wO/rwa5dbSLXVDPFyf8C91i36aY=
+github.com/valyala/bytebufferpool v1.0.0 h1:GqA5TC/0021Y/b9FG4Oi9Mr3q7XYx6KllzawFIhcdPw=
+github.com/valyala/bytebufferpool v1.0.0/go.mod h1:6bBcMArwyJ5K/AmCkWv1jt77kVWyCJ6HpOuEn7z0Csc=
+github.com/valyala/fasthttp v1.51.0 h1:8b30A5JlZ6C7AS81RsWjYMQmrZG6feChmgAolCl1SqA=
+github.com/valyala/fasthttp v1.51.0/go.mod h1:oI2XroL+lI7vdXyYoQk03bXBThfFl2cVdIA3Xl7cH8g=
+github.com/valyala/tcplisten v1.0.0 h1:rBHj/Xf+E1tRGZyWIWwJDiRY0zc1Js+CV5DqwacVSA8=
+github.com/valyala/tcplisten v1.0.0/go.mod h1:T0xQ8SeCZGxckz9qRXTfG43PvQ/mcWh7FwZEA7Ioqkc=
+golang.org/x/sys v0.0.0-20220811171246-fbc7d0a398ab/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.6.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.28.0 h1:Fksou7UEQUWlKvIdsqzJmUmCX3cZuD2+P3XyyzwMhlA=
+golang.org/x/sys v0.28.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
+gopkg.in/yaml.v3 v3.0.1 h1:fxVm/GzAzEWqLHuvctI91KS9hhNmmWOoWu0XTYJS7CA=
+gopkg.in/yaml.v3 v3.0.1/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
@@ -0,0 +1,18 @@
+package handler
+
+import "github.com/gofiber/fiber/v2"
+
+func Dashboard(c *fiber.Ctx) error {
+	return c.Render("index", fiber.Map{
+		"View": "hosts",
+		"NavItems": []fiber.Map{
+			{"ID": "hosts", "Label": "Hosts", "Icon": "server"},
+			{"ID": "terminal", "Label": "Terminal", "Icon": "terminal"},
+			{"ID": "sftp", "Label": "SFTP", "Icon": "folder-sync"},
+			{"ID": "snippets", "Label": "Snippets", "Icon": "code2"},
+			{"ID": "keychain", "Label": "Keychain", "Icon": "key-round"},
+			{"ID": "settings", "Label": "Settings", "Icon": "settings2"},
+		},
+		"Title": "Hosts",
+	})
+}
@@ -0,0 +1,10 @@
+package handler
+
+import "github.com/gofiber/fiber/v2"
+
+func Health(c *fiber.Ctx) error {
+	return c.JSON(fiber.Map{
+		"status": "ok",
+		"app":    "hostkeeper-v2",
+	})
+}
@@ -0,0 +1,9 @@
+package middleware
+
+import "github.com/gofiber/fiber/v2"
+
+func ViewData() fiber.Handler {
+	return func(c *fiber.Ctx) error {
+		return c.Next()
+	}
+}
@@ -0,0 +1,36 @@
+package main
+
+import (
+	"log"
+
+	"github.com/gofiber/fiber/v2"
+	"github.com/gofiber/fiber/v2/middleware/compress"
+	"github.com/gofiber/fiber/v2/middleware/logger"
+	"github.com/gofiber/fiber/v2/middleware/recover"
+	"github.com/gofiber/template/html/v2"
+
+	"git.tukangketik.id/swanadiva/hostkeeper/v2/internal/handler"
+)
+
+func main() {
+	engine := html.New("./views", ".html")
+	engine.Reload(true)
+	engine.AddFunc("svg", func(name string) string {
+		return "" // TODO: inline SVG icons
+	})
+
+	app := fiber.New(fiber.Config{
+		Views: engine,
+	})
+
+	app.Use(logger.New())
+	app.Use(recover.New())
+	app.Use(compress.New())
+	app.Static("/static", "./static")
+
+	app.Get("/", handler.Dashboard)
+	app.Get("/hosts", handler.Dashboard)
+	app.Get("/api/health", handler.Health)
+
+	log.Fatal(app.Listen(":1947"))
+}
@@ -0,0 +1,16 @@
+{
+  "name": "backend",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "type": "commonjs",
+  "devDependencies": {
+    "@tailwindcss/cli": "^4.3.2"
+  }
+}
@@ -0,0 +1,198 @@
+/* Lumina System — Custom CSS */
+
+/* Dot grid background */
+.dot-grid {
+  background-image: radial-gradient(#e2e8f0 1.5px, transparent 1.5px);
+  background-size: 16px 16px;
+}
+
+/* Glass panels */
+.glass-panel {
+  background: rgba(255, 255, 255, 0.7);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+}
+
+.glass-sidebar {
+  background: rgba(255, 255, 255, 0.75);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+}
+
+/* Animations */
+@keyframes fade-in {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes scale-up {
+  from { opacity: 0; transform: scale(0.95); }
+  to { opacity: 1; transform: scale(1); }
+}
+
+@keyframes slide-in {
+  from { opacity: 0; transform: translateX(20px); }
+  to { opacity: 1; transform: translateX(0); }
+}
+
+@keyframes cursor-blink {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0; }
+}
+
+.animate-fade-in {
+  animation: fade-in 0.3s ease-out;
+}
+
+.animate-scale-up {
+  animation: scale-up 0.2s ease-out;
+}
+
+.animate-slide-in {
+  animation: slide-in 0.3s ease-out;
+}
+
+.terminal-cursor {
+  display: inline-block;
+  width: 8px;
+  height: 18px;
+  background: currentColor;
+  animation: cursor-blink 1s infinite;
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #c2c6d8;
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #a0a4b8;
+}
+
+.no-scrollbar {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.no-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+
+/* Modal backdrop */
+.modal-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.3);
+  backdrop-filter: blur(4px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 50;
+}
+
+.modal-content {
+  background: white;
+  border-radius: 16px;
+  padding: 24px;
+  width: 100%;
+  max-width: 480px;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
+  animation: scale-up 0.2s ease-out;
+}
+
+/* Toast */
+.toast {
+  position: fixed;
+  bottom: 24px;
+  right: 24px;
+  background: #191c1e;
+  color: white;
+  padding: 12px 20px;
+  border-radius: 10px;
+  font-size: 14px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
+  z-index: 100;
+  animation: slide-in 0.3s ease-out;
+}
+
+/* Toggle switch */
+.toggle-switch {
+  position: relative;
+  width: 44px;
+  height: 24px;
+  border-radius: 12px;
+  background: #c2c6d8;
+  transition: background 0.2s;
+  cursor: pointer;
+  border: none;
+  padding: 0;
+}
+
+.toggle-switch.active {
+  background: #0050cb;
+}
+
+.toggle-knob {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: white;
+  transition: transform 0.2s;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+}
+
+.toggle-switch.active .toggle-knob {
+  transform: translateX(20px);
+}
+
+/* File table */
+.file-table-row {
+  display: grid;
+  grid-template-columns: 1fr 80px 120px;
+  gap: 8px;
+  padding: 8px 12px;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.file-table-row:hover {
+  background: #f1f4f9;
+}
+
+/* Strength badges */
+.strength-badge-secure {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 8px;
+  border-radius: 6px;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  background: #006e2f/15;
+  color: #006e2f;
+}
+
+.strength-badge-moderate {
+  background: #7e23cc/15;
+  color: #7e23cc;
+}
+
+.strength-badge-weak {
+  background: #b3261e/15;
+  color: #b3261e;
+}
@@ -0,0 +1,33 @@
+@import "tailwindcss";
+
+@theme {
+  --color-primary: #0050cb;
+  --color-on-primary: #ffffff;
+  --color-primary-container: #d6e3ff;
+  --color-on-primary-container: #001638;
+  --color-secondary: #006e2f;
+  --color-on-secondary: #ffffff;
+  --color-secondary-container: #6bff8f;
+  --color-on-secondary-container: #00210b;
+  --color-tertiary: #7e23cc;
+  --color-on-tertiary: #ffffff;
+  --color-tertiary-container: #f0daff;
+  --color-on-tertiary-container: #290055;
+  --color-error: #b3261e;
+  --color-on-error: #ffffff;
+  --color-error-container: #f9dedc;
+  --color-on-error-container: #410e0b;
+  --color-surface: #f7f9fb;
+  --color-on-surface: #191c1e;
+  --color-surface-container-low: #f0f2f5;
+  --color-surface-container: #eaecf0;
+  --color-surface-container-high: #e2e5e9;
+  --color-on-surface-variant: #424656;
+  --color-outline: #727686;
+  --color-outline-variant: #c2c6d8;
+  --color-inverse-surface: #2d3133;
+  --color-inverse-on-surface: #f0f1f3;
+
+  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
+  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
+}
@@ -0,0 +1,848 @@
+/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */
+@layer properties;
+@layer theme, base, components, utilities;
+@layer theme {
+  :root, :host {
+    --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
+    --font-mono: 'JetBrains Mono', ui-monospace, monospace;
+    --color-white: #fff;
+    --spacing: 0.25rem;
+    --container-md: 28rem;
+    --container-7xl: 80rem;
+    --text-xs: 0.75rem;
+    --text-xs--line-height: calc(1 / 0.75);
+    --text-sm: 0.875rem;
+    --text-sm--line-height: calc(1.25 / 0.875);
+    --text-lg: 1.125rem;
+    --text-lg--line-height: calc(1.75 / 1.125);
+    --text-2xl: 1.5rem;
+    --text-2xl--line-height: calc(2 / 1.5);
+    --font-weight-medium: 500;
+    --font-weight-semibold: 600;
+    --font-weight-bold: 700;
+    --tracking-wide: 0.025em;
+    --radius-lg: 0.5rem;
+    --radius-xl: 0.75rem;
+    --blur-md: 12px;
+    --default-transition-duration: 150ms;
+    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    --default-font-family: var(--font-sans);
+    --default-mono-font-family: var(--font-mono);
+    --color-primary: #0050cb;
+    --color-secondary: #006e2f;
+    --color-tertiary: #7e23cc;
+    --color-surface: #f7f9fb;
+    --color-on-surface: #191c1e;
+    --color-surface-container-low: #f0f2f5;
+    --color-on-surface-variant: #424656;
+    --color-outline-variant: #c2c6d8;
+  }
+}
+@layer base {
+  *, ::after, ::before, ::backdrop, ::file-selector-button {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    border: 0 solid;
+  }
+  html, :host {
+    line-height: 1.5;
+    -webkit-text-size-adjust: 100%;
+    tab-size: 4;
+    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
+    font-feature-settings: var(--default-font-feature-settings, normal);
+    font-variation-settings: var(--default-font-variation-settings, normal);
+    -webkit-tap-highlight-color: transparent;
+  }
+  hr {
+    height: 0;
+    color: inherit;
+    border-top-width: 1px;
+  }
+  abbr:where([title]) {
+    -webkit-text-decoration: underline dotted;
+    text-decoration: underline dotted;
+  }
+  h1, h2, h3, h4, h5, h6 {
+    font-size: inherit;
+    font-weight: inherit;
+  }
+  a {
+    color: inherit;
+    -webkit-text-decoration: inherit;
+    text-decoration: inherit;
+  }
+  b, strong {
+    font-weight: bolder;
+  }
+  code, kbd, samp, pre {
+    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
+    font-feature-settings: var(--default-mono-font-feature-settings, normal);
+    font-variation-settings: var(--default-mono-font-variation-settings, normal);
+    font-size: 1em;
+  }
+  small {
+    font-size: 80%;
+  }
+  sub, sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
+  sub {
+    bottom: -0.25em;
+  }
+  sup {
+    top: -0.5em;
+  }
+  table {
+    text-indent: 0;
+    border-color: inherit;
+    border-collapse: collapse;
+  }
+  :-moz-focusring {
+    outline: auto;
+  }
+  progress {
+    vertical-align: baseline;
+  }
+  summary {
+    display: list-item;
+  }
+  ol, ul, menu {
+    list-style: none;
+  }
+  img, svg, video, canvas, audio, iframe, embed, object {
+    display: block;
+    vertical-align: middle;
+  }
+  img, video {
+    max-width: 100%;
+    height: auto;
+  }
+  button, input, select, optgroup, textarea, ::file-selector-button {
+    font: inherit;
+    font-feature-settings: inherit;
+    font-variation-settings: inherit;
+    letter-spacing: inherit;
+    color: inherit;
+    border-radius: 0;
+    background-color: transparent;
+    opacity: 1;
+  }
+  :where(select:is([multiple], [size])) optgroup {
+    font-weight: bolder;
+  }
+  :where(select:is([multiple], [size])) optgroup option {
+    padding-inline-start: 20px;
+  }
+  ::file-selector-button {
+    margin-inline-end: 4px;
+  }
+  ::placeholder {
+    opacity: 1;
+  }
+  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
+    ::placeholder {
+      color: currentcolor;
+      @supports (color: color-mix(in lab, red, red)) {
+        color: color-mix(in oklab, currentcolor 50%, transparent);
+      }
+    }
+  }
+  textarea {
+    resize: vertical;
+  }
+  ::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+  ::-webkit-date-and-time-value {
+    min-height: 1lh;
+    text-align: inherit;
+  }
+  ::-webkit-datetime-edit {
+    display: inline-flex;
+  }
+  ::-webkit-datetime-edit-fields-wrapper {
+    padding: 0;
+  }
+  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
+    padding-block: 0;
+  }
+  ::-webkit-calendar-picker-indicator {
+    line-height: 1;
+  }
+  :-moz-ui-invalid {
+    box-shadow: none;
+  }
+  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
+    appearance: button;
+  }
+  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
+    height: auto;
+  }
+  [hidden]:where(:not([hidden="until-found"])) {
+    display: none !important;
+  }
+}
+@layer utilities {
+  .collapse {
+    visibility: collapse;
+  }
+  .visible {
+    visibility: visible;
+  }
+  .relative {
+    position: relative;
+  }
+  .mx-auto {
+    margin-inline: auto;
+  }
+  .mb-1 {
+    margin-bottom: var(--spacing);
+  }
+  .mb-2 {
+    margin-bottom: calc(var(--spacing) * 2);
+  }
+  .mb-6 {
+    margin-bottom: calc(var(--spacing) * 6);
+  }
+  .flex {
+    display: flex;
+  }
+  .grid {
+    display: grid;
+  }
+  .inline {
+    display: inline;
+  }
+  .h-4 {
+    height: calc(var(--spacing) * 4);
+  }
+  .h-5 {
+    height: calc(var(--spacing) * 5);
+  }
+  .h-8 {
+    height: calc(var(--spacing) * 8);
+  }
+  .h-14 {
+    height: calc(var(--spacing) * 14);
+  }
+  .min-h-screen {
+    min-height: 100vh;
+  }
+  .w-4 {
+    width: calc(var(--spacing) * 4);
+  }
+  .w-5 {
+    width: calc(var(--spacing) * 5);
+  }
+  .w-8 {
+    width: calc(var(--spacing) * 8);
+  }
+  .w-\[260px\] {
+    width: 260px;
+  }
+  .w-full {
+    width: 100%;
+  }
+  .max-w-7xl {
+    max-width: var(--container-7xl);
+  }
+  .max-w-md {
+    max-width: var(--container-md);
+  }
+  .min-w-0 {
+    min-width: 0;
+  }
+  .flex-1 {
+    flex: 1;
+  }
+  .shrink-0 {
+    flex-shrink: 0;
+  }
+  .transform {
+    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
+  }
+  .cursor-pointer {
+    cursor: pointer;
+  }
+  .resize {
+    resize: both;
+  }
+  .grid-cols-1 {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
+  .grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+  .flex-col {
+    flex-direction: column;
+  }
+  .items-center {
+    align-items: center;
+  }
+  .justify-center {
+    justify-content: center;
+  }
+  .gap-2 {
+    gap: calc(var(--spacing) * 2);
+  }
+  .gap-3 {
+    gap: calc(var(--spacing) * 3);
+  }
+  .gap-4 {
+    gap: calc(var(--spacing) * 4);
+  }
+  .space-y-0\.5 {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * 0.5) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 0.5) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
+  .truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .overflow-auto {
+    overflow: auto;
+  }
+  .overflow-hidden {
+    overflow: hidden;
+  }
+  .rounded {
+    border-radius: 0.25rem;
+  }
+  .rounded-full {
+    border-radius: calc(infinity * 1px);
+  }
+  .rounded-lg {
+    border-radius: var(--radius-lg);
+  }
+  .rounded-xl {
+    border-radius: var(--radius-xl);
+  }
+  .border {
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+  }
+  .border-2 {
+    border-style: var(--tw-border-style);
+    border-width: 2px;
+  }
+  .border-t {
+    border-top-style: var(--tw-border-style);
+    border-top-width: 1px;
+  }
+  .border-r {
+    border-right-style: var(--tw-border-style);
+    border-right-width: 1px;
+  }
+  .border-b {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 1px;
+  }
+  .border-dashed {
+    --tw-border-style: dashed;
+    border-style: dashed;
+  }
+  .border-outline-variant\/20 {
+    border-color: color-mix(in srgb, #c2c6d8 20%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-outline-variant) 20%, transparent);
+    }
+  }
+  .border-outline-variant\/30 {
+    border-color: color-mix(in srgb, #c2c6d8 30%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-outline-variant) 30%, transparent);
+    }
+  }
+  .border-outline-variant\/50 {
+    border-color: color-mix(in srgb, #c2c6d8 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-outline-variant) 50%, transparent);
+    }
+  }
+  .bg-primary {
+    background-color: var(--color-primary);
+  }
+  .bg-primary\/10 {
+    background-color: color-mix(in srgb, #0050cb 10%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-primary) 10%, transparent);
+    }
+  }
+  .bg-primary\/20 {
+    background-color: color-mix(in srgb, #0050cb 20%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-primary) 20%, transparent);
+    }
+  }
+  .bg-secondary\/20 {
+    background-color: color-mix(in srgb, #006e2f 20%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-secondary) 20%, transparent);
+    }
+  }
+  .bg-surface {
+    background-color: var(--color-surface);
+  }
+  .bg-tertiary\/20 {
+    background-color: color-mix(in srgb, #7e23cc 20%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-tertiary) 20%, transparent);
+    }
+  }
+  .bg-white {
+    background-color: var(--color-white);
+  }
+  .bg-white\/70 {
+    background-color: color-mix(in srgb, #fff 70%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-white) 70%, transparent);
+    }
+  }
+  .p-0\.5 {
+    padding: calc(var(--spacing) * 0.5);
+  }
+  .p-1\.5 {
+    padding: calc(var(--spacing) * 1.5);
+  }
+  .p-4 {
+    padding: calc(var(--spacing) * 4);
+  }
+  .p-6 {
+    padding: calc(var(--spacing) * 6);
+  }
+  .p-8 {
+    padding: calc(var(--spacing) * 8);
+  }
+  .px-3 {
+    padding-inline: calc(var(--spacing) * 3);
+  }
+  .px-6 {
+    padding-inline: calc(var(--spacing) * 6);
+  }
+  .py-2 {
+    padding-block: calc(var(--spacing) * 2);
+  }
+  .py-4 {
+    padding-block: calc(var(--spacing) * 4);
+  }
+  .pr-3 {
+    padding-right: calc(var(--spacing) * 3);
+  }
+  .pl-9 {
+    padding-left: calc(var(--spacing) * 9);
+  }
+  .text-2xl {
+    font-size: var(--text-2xl);
+    line-height: var(--tw-leading, var(--text-2xl--line-height));
+  }
+  .text-lg {
+    font-size: var(--text-lg);
+    line-height: var(--tw-leading, var(--text-lg--line-height));
+  }
+  .text-sm {
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+  }
+  .text-xs {
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+  }
+  .font-bold {
+    --tw-font-weight: var(--font-weight-bold);
+    font-weight: var(--font-weight-bold);
+  }
+  .font-medium {
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
+  }
+  .font-semibold {
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
+  }
+  .tracking-wide {
+    --tw-tracking: var(--tracking-wide);
+    letter-spacing: var(--tracking-wide);
+  }
+  .text-on-surface {
+    color: var(--color-on-surface);
+  }
+  .text-on-surface-variant {
+    color: var(--color-on-surface-variant);
+  }
+  .text-on-surface-variant\/50 {
+    color: color-mix(in srgb, #424656 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab, var(--color-on-surface-variant) 50%, transparent);
+    }
+  }
+  .text-primary {
+    color: var(--color-primary);
+  }
+  .text-secondary {
+    color: var(--color-secondary);
+  }
+  .text-tertiary {
+    color: var(--color-tertiary);
+  }
+  .text-white {
+    color: var(--color-white);
+  }
+  .uppercase {
+    text-transform: uppercase;
+  }
+  .antialiased {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+  .placeholder-on-surface-variant {
+    &::placeholder {
+      color: var(--color-on-surface-variant);
+    }
+  }
+  .filter {
+    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
+  }
+  .backdrop-blur-md {
+    --tw-backdrop-blur: blur(var(--blur-md));
+    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+  }
+  .transition {
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+  .transition-colors {
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+  .hover\:border-primary\/30 {
+    &:hover {
+      @media (hover: hover) {
+        border-color: color-mix(in srgb, #0050cb 30%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          border-color: color-mix(in oklab, var(--color-primary) 30%, transparent);
+        }
+      }
+    }
+  }
+  .hover\:bg-surface-container-low {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-surface-container-low);
+      }
+    }
+  }
+  .hover\:text-on-surface {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-on-surface);
+      }
+    }
+  }
+  .hover\:text-primary\/50 {
+    &:hover {
+      @media (hover: hover) {
+        color: color-mix(in srgb, #0050cb 50%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          color: color-mix(in oklab, var(--color-primary) 50%, transparent);
+        }
+      }
+    }
+  }
+  .focus\:border-primary\/50 {
+    &:focus {
+      border-color: color-mix(in srgb, #0050cb 50%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        border-color: color-mix(in oklab, var(--color-primary) 50%, transparent);
+      }
+    }
+  }
+  .focus\:ring-2 {
+    &:focus {
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+  }
+  .focus\:ring-primary\/30 {
+    &:focus {
+      --tw-ring-color: color-mix(in srgb, #0050cb 30%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--color-primary) 30%, transparent);
+      }
+    }
+  }
+  .focus\:outline-none {
+    &:focus {
+      --tw-outline-style: none;
+      outline-style: none;
+    }
+  }
+  .sm\:grid-cols-2 {
+    @media (width >= 40rem) {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+  .lg\:grid-cols-3 {
+    @media (width >= 64rem) {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+  }
+  .xl\:grid-cols-4 {
+    @media (width >= 80rem) {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+  }
+}
+@property --tw-rotate-x {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-rotate-y {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-rotate-z {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-skew-x {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-skew-y {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-space-y-reverse {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-font-weight {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-tracking {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-blur {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-brightness {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-contrast {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-grayscale {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-hue-rotate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-invert {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-opacity {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-saturate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-sepia {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-drop-shadow {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-drop-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-drop-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-drop-shadow-size {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-blur {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-brightness {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-contrast {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-grayscale {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-hue-rotate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-invert {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-opacity {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-saturate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-sepia {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-inset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-inset-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-inset-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-ring-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-inset-ring-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-inset-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-ring-inset {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ring-offset-width {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+@property --tw-ring-offset-color {
+  syntax: "*";
+  inherits: false;
+  initial-value: #fff;
+}
+@property --tw-ring-offset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@layer properties {
+  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
+    *, ::before, ::after, ::backdrop {
+      --tw-rotate-x: initial;
+      --tw-rotate-y: initial;
+      --tw-rotate-z: initial;
+      --tw-skew-x: initial;
+      --tw-skew-y: initial;
+      --tw-space-y-reverse: 0;
+      --tw-border-style: solid;
+      --tw-font-weight: initial;
+      --tw-tracking: initial;
+      --tw-blur: initial;
+      --tw-brightness: initial;
+      --tw-contrast: initial;
+      --tw-grayscale: initial;
+      --tw-hue-rotate: initial;
+      --tw-invert: initial;
+      --tw-opacity: initial;
+      --tw-saturate: initial;
+      --tw-sepia: initial;
+      --tw-drop-shadow: initial;
+      --tw-drop-shadow-color: initial;
+      --tw-drop-shadow-alpha: 100%;
+      --tw-drop-shadow-size: initial;
+      --tw-backdrop-blur: initial;
+      --tw-backdrop-brightness: initial;
+      --tw-backdrop-contrast: initial;
+      --tw-backdrop-grayscale: initial;
+      --tw-backdrop-hue-rotate: initial;
+      --tw-backdrop-invert: initial;
+      --tw-backdrop-opacity: initial;
+      --tw-backdrop-saturate: initial;
+      --tw-backdrop-sepia: initial;
+      --tw-shadow: 0 0 #0000;
+      --tw-shadow-color: initial;
+      --tw-shadow-alpha: 100%;
+      --tw-inset-shadow: 0 0 #0000;
+      --tw-inset-shadow-color: initial;
+      --tw-inset-shadow-alpha: 100%;
+      --tw-ring-color: initial;
+      --tw-ring-shadow: 0 0 #0000;
+      --tw-inset-ring-color: initial;
+      --tw-inset-ring-shadow: 0 0 #0000;
+      --tw-ring-inset: initial;
+      --tw-ring-offset-width: 0px;
+      --tw-ring-offset-color: #fff;
+      --tw-ring-offset-shadow: 0 0 #0000;
+    }
+  }
+}
@@ -0,0 +1,68 @@
+{{template "layout" .}}
+
+{{define "content"}}
+<div id="dashboard-page" class="max-w-7xl mx-auto">
+  <div class="grid grid-cols-3 gap-4 mb-6">
+    <div class="rounded-xl bg-white border border-outline-variant/30 p-4">
+      <div class="flex items-center gap-2 text-primary mb-1">
+        <span class="w-5 h-5 bg-primary/20 rounded flex items-center justify-center text-xs font-bold">⚡</span>
+        <span class="text-xs font-medium text-on-surface-variant uppercase tracking-wide">Active Connections</span>
+      </div>
+      <span class="text-2xl font-bold text-on-surface">0</span>
+    </div>
+    <div class="rounded-xl bg-white border border-outline-variant/30 p-4">
+      <div class="flex items-center gap-2 text-secondary mb-1">
+        <span class="w-5 h-5 bg-secondary/20 rounded flex items-center justify-center text-xs font-bold">✓</span>
+        <span class="text-xs font-medium text-on-surface-variant uppercase tracking-wide">Transfers Today</span>
+      </div>
+      <span class="text-2xl font-bold text-on-surface">0</span>
+    </div>
+    <div class="rounded-xl bg-white border border-outline-variant/30 p-4">
+      <div class="flex items-center gap-2 text-tertiary mb-1">
+        <span class="w-5 h-5 bg-tertiary/20 rounded flex items-center justify-center text-xs font-bold">#</span>
+        <span class="text-xs font-medium text-on-surface-variant uppercase tracking-wide">Saved Hosts</span>
+      </div>
+      <span class="text-2xl font-bold text-on-surface">0</span>
+    </div>
+  </div>
+
+  <div class="flex items-center gap-3 mb-6" x-data="{ view: 'grid' }">
+    <div class="relative flex-1 max-w-md">
+      <input type="search" name="q" placeholder="Search hosts..."
+             hx-get="/hosts?q=..." hx-trigger="keyup delay:200ms"
+             hx-target="#host-list"
+             class="w-full pl-9 pr-3 py-2 rounded-lg border border-outline-variant/50
+                    bg-white text-sm text-on-surface placeholder-on-surface-variant
+                    focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary/50">
+    </div>
+    <select name="filter"
+            hx-get="/hosts?filter={value}" hx-target="#host-list"
+            class="px-3 py-2 rounded-lg border border-outline-variant/50 bg-white text-sm text-on-surface
+                   focus:outline-none focus:ring-2 focus:ring-primary/30">
+      <option value="all">All</option>
+      <option value="active">Active</option>
+      <option value="offline">Offline</option>
+    </select>
+    <div class="flex items-center bg-white rounded-lg border border-outline-variant/50 p-0.5">
+      <button @click="view = 'grid'"
+              :class="view === 'grid' ? 'bg-primary/10 text-primary' : 'text-on-surface-variant hover:text-on-surface'"
+              class="p-1.5 rounded transition-colors">
+        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 5a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm10 0a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1V5zM4 15a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1H5a1 1 0 01-1-1v-4zm10 0a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1v-4z"/></svg>
+      </button>
+      <button @click="view = 'list'"
+              :class="view === 'list' ? 'bg-primary/10 text-primary' : 'text-on-surface-variant hover:text-on-surface'"
+              class="p-1.5 rounded transition-colors">
+        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16"/></svg>
+      </button>
+    </div>
+  </div>
+
+  <div id="host-list" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+    <div class="rounded-xl border-2 border-dashed border-outline-variant/30 p-8 flex flex-col items-center justify-center text-on-surface-variant/50 hover:border-primary/30 hover:text-primary/50 transition-colors cursor-pointer"
+         @click="console.log('add host')">
+      <svg class="w-8 h-8 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
+      <span class="text-sm font-medium">Add New Host</span>
+    </div>
+  </div>
+</div>
+{{end}}
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Hostkeeper V2</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="/static/css/output.css">
+  <link rel="stylesheet" href="/static/css/custom.css">
+  <script src="/static/js/htmx.min.js"></script>
+  <script src="/static/js/alpine.min.js" defer></script>
+</head>
+<body class="bg-surface text-on-surface antialiased dot-grid min-h-screen">
+  <div class="flex min-h-screen">
+    {{template "nav" .}}
+    <div class="flex-1 flex flex-col overflow-hidden">
+      <header class="h-14 border-b border-outline-variant/30 flex items-center px-6 bg-white/70 backdrop-blur-md">
+        <h1 class="text-lg font-semibold text-on-surface">{{.Title}}</h1>
+      </header>
+      <main id="main-content" class="flex-1 overflow-auto p-6">
+        {{block "content" .}}{{end}}
+      </main>
+    </div>
+  </div>
+</body>
+</html>
@@ -0,0 +1,31 @@
+{{define "nav"}}
+<nav class="w-[260px] min-h-screen bg-white/70 backdrop-blur-md border-r border-outline-variant/30 flex flex-col shrink-0">
+  <div class="p-4 border-b border-outline-variant/20">
+    <div class="flex items-center gap-2">
+      <div class="w-8 h-8 rounded-lg bg-primary flex items-center justify-center text-white text-sm font-bold">K</div>
+      <span class="font-bold text-lg text-on-surface">Hostkeeper</span>
+    </div>
+  </div>
+  <div class="flex-1 px-3 py-4 space-y-0.5">
+    {{range .NavItems}}
+    <a href="/{{.ID}}"
+       hx-get="/{{.ID}}" hx-target="#main-content" hx-push-url="true"
+       class="flex items-center gap-3 px-3 py-2 rounded-lg transition-colors text-sm
+              {{if eq $.View .ID}}bg-primary/10 text-primary font-medium
+              {{else}}text-on-surface-variant hover:bg-surface-container-low hover:text-on-surface{{end}}">
+      <span class="w-5 h-5 flex items-center justify-center">{{svg .Icon}}</span>
+      <span>{{.Label}}</span>
+    </a>
+    {{end}}
+  </div>
+  <div class="p-4 border-t border-outline-variant/20">
+    <div class="flex items-center gap-3">
+      <div class="w-8 h-8 rounded-full bg-tertiary/20 flex items-center justify-center text-tertiary text-sm font-semibold">U</div>
+      <div class="flex-1 min-w-0">
+        <p class="text-sm font-medium text-on-surface truncate">User</p>
+        <p class="text-xs text-on-surface-variant truncate">Local</p>
+      </div>
+    </div>
+  </div>
+</nav>
+{{end}}
@@ -1,128 +1,446 @@
-# Architecture
+# Hostkeeper V2 — Architecture

-## Overview
+> **Status**: Migrasi React → HTMX
+> **Last Updated**: 2026-07-07
+> **Dokumen arsitektur baru**: [ARCHITECTURE_HTMX.md](ARCHITECTURE_HTMX.md)
+> **V1 (existing)**: CLI/TUI SSH/SFTP manager — frozen, no changes.

-Hostkeeper follows a layered architecture:
+---
+
+## ⚠️ Keputusan Arsitektur
+
+Hostkeeper V2 menggunakan **GoFiber + HTMX**, **bukan React/SPA**.
+
+Keputusan ini diambil karena:
+1. Developer lebih nyaman dengan Go daripada JavaScript
+2. ~90% kode adalah Go + HTML template
+3. Hanya ~410 baris JS yang diperlukan (xterm.js, clipboard, toggle)
+4. Build lebih sederhana — tanpa Vite, npm, TypeScript
+5. Bisa berjalan di browser biasa tanpa Electron
+
+**Dokumen arsitektur lengkap ada di** [`ARCHITECTURE_HTMX.md`](ARCHITECTURE_HTMX.md).
+
+---
+
+### Communication Flow

 ```
-CLI Layer (cmd/hostkeeper/)
-  |
-  | calls
-  v
-Application Layer (pkg/)
-  |
-  | calls
-  v
-Storage Layer (pkg/config/, pkg/storage/)
-  |
-  | reads/writes
-  v
-File System (~/.config/hostkeeper/)
+User interaction (keyboard, mouse)
+    │
+    ▼
+React component (event handler)
+    │
+    ▼
+API client (fetch / WebSocket)
+    │
+    ▼
+GoFiber HTTP server (localhost:randomPort)
+    │
+    ├── REST handlers → pkg/storage → JSON files
+    └── WebSocket handlers → pkg/ssh → remote server
 ```

-## Directory Structure
+---
+
+## 2. Technology Stack
+
+### Backend (Go)
+
+| Component | Library | Purpose |
+|-----------|---------|---------|
+| HTTP server | `gofiber/fiber/v2` | REST API, static file serving |
+| WebSocket | `gofiber/contrib/websocket` | Terminal streaming, real-time updates |
+| WebSocket engine | `fasthttp/websocket` | Underlying WS protocol (fork of gorilla) |
+| SSH client | `golang.org/x/crypto/ssh` | Remote SSH connections (reuse V1 pkg/ssh) |
+| SFTP client | `github.com/pkg/sftp` | File transfer (reuse V1 pkg/sftp) |
+| Crypto | `crypto/aes`, `crypto/cipher` | AES-256-GCM encryption (reuse V1 pkg/crypto) |
+| Storage | Standard `os` + `encoding/json` | JSON file persistence (reuse V1 pkg/storage) |
+| Config | `github.com/spf13/viper` | App configuration (reuse V1 pkg/config) |
+| UUID | `github.com/google/uuid` | Unique IDs for entities |
+| Routers | `github.com/gofiber/fiber/v2` | HTTP routing |
+| Middleware | GoFiber built-in | CORS, compress, recover, logger |
+
+### Frontend (React/TypeScript)
+
+| Component | Library | Purpose |
+|-----------|---------|---------|
+| Framework | React 19 + TypeScript | UI components |
+| Build tool | Vite | Fast development + production build |
+| Terminal | xterm.js + addons | Terminal emulation (fit, web-links, search) |
+| State | Zustand | Lightweight state management |
+| Routing | React Router v7 | Screen navigation |
+| Styling | TailwindCSS + CSS variables | Theming (dark/light/contrast) |
+| Icons | Lucide React | Consistent icon set |
+| Notifications | Sonner | Toast notifications |
+
+### Desktop (Electron)
+
+| Component | Library | Purpose |
+|-----------|---------|---------|
+| Shell | Electron 33 | Native desktop wrapper |
+| Packaging | electron-builder | Build .dmg, .exe, .AppImage |
+| Auto-update | electron-updater | In-app updates |
+| Keychain | Node.js safeStorage | OS keychain integration |
+| IPC | Electron IPC | Go backend <-> Electron communication |
+
+### Mobile
+
+| Component | Library | Purpose |
+|-----------|---------|---------|
+| Go library | gomobile bind | Compile Go to .aar/.xcframework |
+| UI shell | React Native WebView | Display web UI on mobile |
+| Native code | Java (Android) / Swift (iOS) | Minimal WebView wrapper |
+
+---
+
+## 3. Directory Structure

 ```
-cmd/hostkeeper/       — CLI commands (Cobra)
-  ├── main.go         — Entry point
-  ├── root.go         — Root command setup
-  ├── add.go          — Add host command
-  ├── list.go         — List hosts command
-  ├── connect.go      — Connect command
-  ├── edit.go         — Edit host command
-  ├── delete.go       — Delete host command
-  ├── export.go       — Export command
-  ├── import.go       — Import command
-  ├── tui.go          — TUI command entry
-  ├── version.go      — Version command
-  ├── completion.go   — Shell completion
-  └── *_test.go       — CLI command tests
-
-pkg/                  — Library code
-  ├── config/         — Configuration and data directory
-  ├── models/         — Data models (Host, Key, Snippet)
-  ├── storage/        — File and export/import operations
-  ├── errors/         — Error types
-  └── tui/            — TUI implementation (Bubble Tea)
-
-test/                 — Test suites
-  ├── integration/    — End-to-end integration tests
-  └── storage/        — Storage tests
-
-docs/                 — Documentation
-  ├── plans/          — Design and implementation plans
-  ├── INSTALLATION.md
-  ├── USAGE.md
-  └── ARCHITECTURE.md
+hostkeeper/
+├── cmd/                          # V1 CLI (FROZEN)
+│   └── hostkeeper/
+├── pkg/                          # V1 shared packages (FROZEN)
+│   ├── ssh/
+│   ├── sftp/
+│   ├── crypto/
+│   ├── storage/
+│   ├── config/
+│   ├── knownhosts/
+│   └── tui/
+├── internal/                     # V1 internal packages (FROZEN)
+│   ├── models/
+│   └── errors/
+├── test/                         # V1 tests (FROZEN)
+│
+├── app/                          # V2 GUI (NEW)
+│   ├── backend/                  # Go HTTP server
+│   │   ├── main.go               # Entry point, fiber server setup
+│   │   ├── go.mod                # Go module for backend
+│   │   ├── bridge/               # REST API handlers
+│   │   │   ├── hosts.go
+│   │   │   ├── keys.go
+│   │   │   ├── snippets.go
+│   │   │   ├── groups.go
+│   │   │   ├── portforward.go
+│   │   │   ├── sftp.go
+│   │   │   ├── config.go
+│   │   │   ├── vault.go
+│   │   │   └── export.go
+│   │   ├── ws/                   # WebSocket handlers
+│   │   │   ├── terminal.go       # SSH terminal streaming
+│   │   │   └── session.go        # Session management
+│   │   └── middleware/           # Custom middleware
+│   │       └── middleware.go     # (optional overrides)
+│   │
+│   ├── frontend/                 # React web UI
+│   │   ├── src/
+│   │   │   ├── components/       # Reusable UI components
+│   │   │   ├── screens/          # Page-level components
+│   │   │   ├── hooks/            # Custom React hooks
+│   │   │   ├── stores/           # Zustand state stores
+│   │   │   ├── api/              # API client functions
+│   │   │   └── styles/           # CSS, themes, variables
+│   │   ├── index.html
+│   │   ├── vite.config.ts
+│   │   ├── tailwind.config.js
+│   │   ├── tsconfig.json
+│   │   └── package.json
+│   │
+│   └── electron/                 # Electron shell
+│       ├── main.ts               # Main process
+│       ├── preload.ts            # Preload script (IPC bridge)
+│       ├── build.ts              # Build configuration
+│       ├── package.json
+│       └── electron-builder.yml
+│
+├── mobile/                       # V2 Mobile (NEW)
+│   ├── android/                  # Android WebView app
+│   │   ├── app/
+│   │   ├── build.gradle
+│   │   └── ...
+│   ├── ios/                      # iOS WKWebView app
+│   │   ├── Hostkeeper/
+│   │   ├── Hostkeeper.xcodeproj
+│   │   └── ...
+│   └── gomobile/                 # Go mobile compilation
+│       ├── build.sh
+│       └── ...
+│
+├── scripts/                      # Build scripts
+│   ├── build.sh                  # Full build (Go + FE + Electron)
+│   ├── build-go.sh               # Go cross-compile
+│   ├── build-fe.sh               # Frontend build
+│   ├── build-electron.sh         # Electron package
+│   └── build-mobile.sh           # Mobile build
+│
+├── docs/                         # Documentation (V2 planning)
+│   ├── PROGRESS.md               # Status tracker (read this first)
+│   ├── ARCHITECTURE.md           # This file
+│   ├── API.md                    # REST API + WebSocket spec
+│   ├── DATA_MODELS.md            # Extended data models
+│   ├── UI_COMPONENTS.md          # React component tree
+│   ├── UI_TERMIUS_REFERENCE.md   # Termius visual reference
+│   ├── SPRINT_PLAN.md            # Sprint-by-sprint task breakdown
+│   ├── BUILD_SYSTEM.md           # Build pipeline
+│   ├── PERFORMANCE.md            # Performance & stability
+│   └── TIMELINE.md               # Project timeline
+│
+├── CHANGELOG.md
+├── README.md
+├── AGENTS.md                     # AI session checkpoint
+├── v1/                           # V1 CLI/TUI (FROZEN)
+│   ├── cmd/hostkeeper/
+│   ├── internal/
+│   ├── pkg/
+│   ├── test/
+│   ├── docs/                     # V1 docs
+│   ├── go.mod
+│   └── Makefile
+├── template/                     # React UI template (Lumina System)
+└── app/                          # V2 app (scaffolding not started)
+    ├── backend/
+    ├── frontend/
+    └── electron/
 ```

-## Key Components
+---

-### Models (`pkg/models/`)
+## 4. Process Model

-The core data structures:
-
- **Host** — SSH host with address, credentials, group, tags
- **Key** — SSH key metadata
- **Snippet** — Reusable connection snippets
-
-### Configuration (`pkg/config/`)
-
-Manages application configuration, data directory path, and initialization.
-
-### Storage (`pkg/storage/`)
-
-Handles persistent storage:
- File-based JSON storage per data type
- Export/import with replace and merge strategies
- File permission enforcement (0600)
-
-### CLI Layer (`cmd/hostkeeper/`)
-
-Each command follows a consistent pattern:
-1. Parse flags
-2. Load config and storage
-3. Execute business logic
-4. Format output
-
-### TUI (`pkg/tui/`)
-
-Bubble Tea model with:
- Screen-based navigation (extensible for future screens)
- Host list view with styled output
- Keyboard-driven interaction
-
-## Data Flow
-
-### Adding a Host
+### Startup Sequence

 ```
-User → hostkeeper add (flags) → parse args → Host model → storage.SaveHost() → JSON file
+1. User double-clicks Hostkeeper.app (Electron)
+2. Electron main process starts
+3. Electron spawns Go binary as child process
+4. Go binary starts GoFiber server on localhost:randomPort
+5. Go serves frontend dist (embedded in Electron)
+6. Electron loads web UI from localhost:PORT
+7. Web UI renders vault unlock screen
+8. User enters password -> Go unlocks vault (decrypts data)
+9. User sees host list screen -> ready to use
 ```

-### Connecting to a Host
+### Shutdown Sequence

 ```
-User → hostkeeper connect <name> → findHost() by ID → resolve key → exec native SSH or Go SSH
+1. User closes window / Cmd+Q
+2. Electron sends SIGTERM to Go child process
+3. Go receives signal -> starts graceful shutdown
+4. Go disconnects all active SSH sessions
+5. Go saves any pending state
+6. Go closes fiber server
+7. Go exits
+8. Electron exits
 ```

-### Export/Import
+### Development Mode

 ```
-Export: storage → marshal JSON → write file
-Import: read file → unmarshal → strategy (merge/replace) → save all
+1. Terminal: cd app/backend && go run .
+2. Terminal: cd app/frontend && npm run dev
+3. Go server at localhost:8080
+4. Frontend dev server at localhost:5173 (Vite HMR)
+5. Frontend proxies API requests to localhost:8080
+6. Open browser at localhost:5173
 ```

-## Security
+---

- Credential files stored with `0600` permissions
- SSH key content stored within host credentials
- Direct mode uses Go SSH client (no shell, command execution only)
- Native SSH mode delegates all terminal handling to system SSH
+## 5. Data Flow

-## Future Architecture
+### REST API Request Flow

- SQLite database for improved query capabilities
- Encrypted credential storage (age/gpg)
- Configuration encryption
- Plugin system for custom authentication methods
+```
+React component
+  → useQuery/useMutation (React Query or manual fetch)
+    → API client (fetch wrapper)
+      → HTTP request to GoFiber (localhost:PORT/api/...)
+        → GoFiber router -> handler function
+          → Handler calls pkg/storage (read/write JSON)
+            → Response sent back through the chain
+```
+
+### Terminal WebSocket Flow
+
+```
+User opens terminal tab
+  → React: XTermWrapper mounts
+    → XTermWrapper opens WebSocket to ws://localhost:PORT/ws/terminal?host_id=xxx&cols=80&rows=24
+      → GoFiber WebSocket handler accepts connection
+        → Go: SSH client connects to remote host (reuse pkg/ssh)
+          → SSH session created, PTY requested
+            → SSH stdout goroutine -> reads SSH output -> c.WriteMessage(BinaryMessage, data)
+              -> xterm.js receives data -> renders in terminal
+            -> xterm.js onKey -> c.WriteMessage(BinaryMessage, input)
+              -> Go receives input -> session.Stdin.Write(input) -> SSH remote
+```
+
+### SFTP File Transfer Flow
+
+```
+User drags file to remote pane
+  → React: FileList onDrop handler
+    → API client: POST /api/sftp/upload (multipart/form-data)
+      → Go: bridge/sftp.go receives upload
+        → Go: pkg/sftp client writes to remote
+          → Response: { "success": true }
+            → React: refresh remote file list
+```
+
+---
+
+## 6. Security Architecture
+
+### Encryption Model
+
+| Layer | Method | Implementation |
+|-------|--------|----------------|
+| Data at rest | AES-256-GCM | `pkg/crypto/crypto.go` (reuse V1) |
+| Key derivation | PBKDF2 (100k iterations) | `pkg/crypto/crypto.go` (reuse V1) |
+| Password storage | SHA-256 hash | `pkg/config/config.go` (reuse V1) |
+| Known hosts | TOFU verification | `pkg/knownhosts/knownhosts.go` (reuse V1) |
+| Transport | localhost only | No TLS needed (same machine) |
+| Export | AES-256-GCM with password | `pkg/storage/json_storage.go` (reuse V1) |
+
+### Vault Flow
+
+```
+App start -> vault locked -> prompt password
+  -> PBKDF2 derive key from password
+    -> Try decrypt hosts.json
+      -> Success -> vault unlocked, data accessible
+      -> Fail -> wrong password, show error
+        -> Vault locked -> no data accessible
+          -> Auto-lock after inactivity timer
+```
+
+### OS Keychain Integration
+
+| Platform | Library | Purpose |
+|----------|---------|---------|
+| macOS | `security` CLI or `go-keychain` | Store vault master key |
+| Windows | `go-credential` | Store vault master key |
+| Linux | `dbus` Secret Service | Store vault master key |
+| Electron | `safeStorage` API | Store vault master key |
+
+---
+
+## 7. WebSocket Protocol
+
+### Terminal WebSocket
+
+**Connection**: `ws://localhost:PORT/ws/terminal?host_id=xxx&cols=80&rows=24`
+
+**Message types** (binary frames):
+
+| Direction | Type | Content |
+|-----------|------|---------|
+| Client → Server | Input | Raw keystroke bytes |
+| Server → Client | Output | Terminal output bytes |
+| Client → Server | Resize | JSON: `{ "type": "resize", "cols": 120, "rows": 40 }` |
+| Server → Client | Status | JSON: `{ "type": "status", "state": "connected" }` |
+| Server → Client | Error | JSON: `{ "type": "error", "message": "..." }` |
+
+**Keepalive**: Client sends ping every 30s, server responds with pong.
+
+---
+
+## 8. Build System
+
+### Development
+
+```bash
+# Terminal 1: Go backend
+cd app/backend
+go run .
+
+# Terminal 2: Frontend with hot reload
+cd app/frontend
+npm run dev
+
+# Browser opens at http://localhost:5173
+```
+
+### Production Build
+
+```bash
+# Full build
+./scripts/build.sh
+
+# Output:
+# dist/hostkeeper-mac-arm64.dmg
+# dist/hostkeeper-win-x64.exe
+# dist/hostkeeper-linux-x64.AppImage
+```
+
+### Cross-Compilation Matrix
+
+| Platform | GOOS | GOARCH | Output |
+|----------|------|--------|--------|
+| macOS ARM64 | darwin | arm64 | hostkeeper-mac-arm64 |
+| macOS x64 | darwin | amd64 | hostkeeper-mac-x64 |
+| Windows x64 | windows | amd64 | hostkeeper-win-x64.exe |
+| Linux x64 | linux | amd64 | hostkeeper-linux-x64 |
+| Linux ARM64 | linux | arm64 | hostkeeper-linux-arm64 |
+| Android ARM64 | android | arm64 | hostkeeper-android.aar |
+| iOS ARM64 | ios | arm64 | hostkeeper-ios.xcframework |
+
+---
+
+## 9. Error Handling
+
+### Go Backend Errors
+
+```go
+// All API errors follow this format:
+{
+    "error": "Human-readable error message",
+    "code": "MACHINE_READABLE_CODE",
+    "details": "Optional technical details"
+}
+
+// HTTP status codes:
+// 200 - Success
+// 201 - Created
+// 400 - Bad Request (validation error)
+// 401 - Unauthorized (vault locked)
+// 404 - Not Found
+// 409 - Conflict (duplicate)
+// 500 - Internal Server Error
+```
+
+### Frontend Error Handling
+
+- Network errors: automatic retry with exponential backoff (3 retries)
+- API errors: toast notification with error message
+- WebSocket errors: reconnect button in terminal, auto-reconnect 3 times
+- Validation errors: inline field-level error messages
+
+---
+
+## 10. Testing Strategy
+
+| Layer | Tool | Coverage Target |
+|-------|------|----------------|
+| Go unit tests | `go test` | 80%+ |
+| Go integration tests | `go test -tags=integration` | Key flows |
+| React unit tests | Vitest + React Testing Library | 70%+ |
+| React E2E tests | Playwright | Critical flows |
+| Manual testing | All platforms | Every sprint |
+
+### Test Commands
+
+```bash
+# Go backend tests
+cd app/backend && go test ./...
+
+# Frontend tests
+cd app/frontend && npm test
+
+# Full test suite
+make test
+
+# Race condition check
+go test -race ./app/backend/...
+```
@@ -0,0 +1,385 @@
+# Hostkeeper V2 — Architecture (HTMX)
+
+> **Status**: Approved — Menggantikan arsitektur React sebelumnya
+> **Last Updated**: 2026-07-07
+> **Keputusan**: React → GoFiber + HTMX + Alpine.js + minimal JS
+
+---
+
+## 1. Arsitektur Baru
+
+Hostkeeper V2 menggunakan arsitektur **server-rendered HTML** dengan interaktivitas via HTMX, bukan SPA React.
+
+```
+┌────────────────────────────────────────────────────┐
+│  Browser / Electron WebView                        │
+│  ┌──────────────────────────────────────────────┐  │
+│  │  HTMX (14kb) + Alpine.js (15kb) + xterm.js   │  │
+│  │                                                │  │
+│  │  ● HTMX: semua interaksi (search, filter,     │  │
+│  │          modal, form, navigasi)                │  │
+│  │  ● Alpine.js: client state (toast, toggle,    │  │
+│  │              passphrase reveal, tab)           │  │
+│  │  ● xterm.js: terminal emulator (hanya         │  │
+│  │              halaman terminal)                 │  │
+│  │  ● Vanilla JS: clipboard, toggle switch,       │  │
+│  │              strength calc                     │  │
+│  └────────────────┬─────────────────────────────┘  │
+│                   │ hx-get/hx-post/hx-ws           │
+│  ┌────────────────▼─────────────────────────────┐  │
+│  │  GoFiber v2 Backend (localhost:1947)          │  │
+│  │                                                │  │
+│  │  ┌──────────────┐  ┌──────────────────────┐  │  │
+│  │  │ HTML handlers │  │ WebSocket /xterm.js  │  │  │
+│  │  │ (Fiber + html│  │ (SSH I/O via WS)     │  │  │
+│  │  │  template)   │  └──────────────────────┘  │  │
+│  │  └──────┬───────┘                             │  │
+│  │         │ go.mod replace                      │  │
+│  │    ┌────▼────┐                                │  │
+│  │    │ v1/pkg/ │ ssh, crypto, storage, config  │  │
+│  │    └─────────┘                                │  │
+│  └───────────────────────────────────────────────┘  │
+└──────────────────────────────────────────────────────┘
+```
+
+### Alur Request
+
+```
+1. User klik tombol "Filter Active"
+       │ hx-get="/hosts?filter=active"
+       │ hx-target="#host-list"
+       ▼
+2. GoFiber handler:
+       func (h *Handler) ListHosts(c fiber.Ctx) error {
+           hosts := h.store.Filter("active")
+           return c.Render("partials/host_list", fiber.Map{
+               "Hosts": hosts,
+           })
+       }
+       ▼
+3. Server return HTML partial
+       <div id="host-list" hx-swap-oob="true">
+         {{range .Hosts}}
+           <div class="host-card">...</div>
+         {{end}}
+       </div>
+       ▼
+4. HTMX swap HTML ke DOM (tanpa reload)
+```
+
+---
+
+## 2. Tech Stack
+
+| Layer | Teknologi | Versi | Fungsi |
+|-------|-----------|-------|--------|
+| Backend | GoFiber v2 | v2.52+ | HTTP server, routing, middleware |
+| Template | html/template | stdlib | Server-side HTML rendering |
+| Frontend | HTMX | v2.0+ | HTML-over-HTTP interaktivitas |
+| Client state | Alpine.js | v3.14+ | Modal, toast, toggle state |
+| Terminal | xterm.js | v5.5+ | SSH terminal emulator |
+| Styling | TailwindCSS v4 | v4.0+ | Utility-first CSS |
+| CSS custom | Custom CSS | — | dot-grid, glassmorphism, keyframes |
+| Icons | Lucide (inline SVG) | — | SVG icon system |
+| Desktop | Electron (opsional) | v35+ | Browser wrapper |
+| Mobile | WebView | — | Android/iOS shell |
+
+---
+
+## 3. Struktur Folder
+
+```
+app/backend/
+├── main.go                    ← Entry point Fiber app
+├── go.mod                     ← module git.tukangketik.id/swanadiva/hostkeeper/v2
+├── go.sum
+│
+├── internal/
+│   ├── handler/               ← HTTP handlers (render HTML + HTMX partials)
+│   │   ├── dashboard.go       GET/POST /hosts, /hosts/{id}
+│   │   ├── terminal.go        GET /terminal, WS /terminal/ws
+│   │   ├── sftp.go            GET /sftp/ls, POST /sftp/{action}
+│   │   ├── snippets.go        GET/POST /snippets
+│   │   ├── keychain.go        GET/POST /keys
+│   │   ├── settings.go        GET/POST /settings
+│   │   ├── brief.go           GET /brief (overlay)
+│   │   └── health.go          GET /api/health
+│   │
+│   ├── model/                 ← Go structs (data models)
+│   │   ├── host.go            Host, HostFilter
+│   │   ├── file.go            FileItem
+│   │   ├── snippet.go         Snippet
+│   │   ├── keychain.go        KeychainItem
+│   │   ├── device.go          Device
+│   │   ├── transfer.go        BackgroundTransfer
+│   │   └── config.go          Config, Toggle
+│   │
+│   ├── template/              ← Template helpers/funcs
+│   │   └── funcs.go           activeClass, formatBytes, timeAgo, strengthBadge
+│   │
+│   └── middleware/
+│       └── viewdata.go        Inject .View, .ActiveNav, .User ke semua template
+│
+├── static/                    ← Static assets (served via Fiber)
+│   ├── css/
+│   │   ├── output.css         ← TailwindCSS v4 build output
+│   │   └── custom.css         ← dot-grid, glassmorphism, keyframes, scrollbar
+│   ├── js/
+│   │   ├── htmx.min.js        ← HTMX (14kb)
+│   │   ├── alpine.min.js      ← Alpine.js (15kb)
+│   │   ├── terminal.js        ← xterm.js + WebSocket init
+│   │   ├── clipboard.js       ← navigator.clipboard.writeText()
+│   │   ├── toggles.js         ← Custom toggle switch click handler
+│   │   └── utils.js           ← passphrase reveal, strength calc, toast
+│   ├── xterm/                 ← xterm.js build files
+│   └── img/                   ← Images/icons
+│
+└── views/                     ← Go HTML templates
+    ├── layout.html            ← Base layout (sidebar, header, scripts)
+    ├── index.html             ← Entry page (extends layout + content block)
+    │
+    └── partials/              ← HTMX-swappable partials
+        ├── nav.html           ← Sidebar navigation
+        ├── dashboard.html     ← Host page container
+        ├── host_list.html     ← Host card grid/list (HTMX swap target)
+        ├── host_card.html     ← Single host card
+        ├── host_modal.html    ← Add host modal form
+        ├── terminal.html      ← Terminal page (xterm.js container)
+        ├── sftp.html          ← Dual-pane file browser
+        ├── sftp_pane.html     ← Single file pane (for HTMX swap)
+        ├── snippets.html      ← Snippet page
+        ├── snippet_grid.html  ← Snippet cards (HTMX swap target)
+        ├── snippet_modal.html ← Add snippet form
+        ├── keychain.html      ← Key page
+        ├── key_grid.html      ← Key cards (HTMX swap target)
+        ├── key_modal.html     ← Add key form
+        ├── settings.html      ← Settings form + toggles
+        ├── brief.html         ← Brief overlay panel
+        └── toast.html         ← Toast notification
+```
+
+---
+
+## 4. Komponen UI & State Management
+
+### 4.1 Navigasi (HTMX)
+
+Sidebar navigation menggunakan HTMX untuk swap halaman:
+
+```html
+<a href="/hosts"
+   hx-get="/hosts"
+   hx-target="#main-content"
+   hx-push-url="true"
+   class="nav-item {{if eq .View "hosts"}}active{{end}}">
+  {{svg "server"}}
+  <span>Hosts</span>
+</a>
+```
+
+### 4.2 State Client (Alpine.js)
+
+State yang butuh client-side reactivity:
+
+```html
+<!-- Toggle view mode -->
+<div x-data="{ view: 'grid' }">
+  <button @click="view = 'list'" :class="view === 'list' ? 'bg-primary text-white' : ''">
+    List
+  </button>
+  <div x-show="view === 'grid'" id="host-grid">
+    {{template "host_list" .}}
+  </div>
+</div>
+
+<!-- Modal -->
+<div x-data="{ open: false }">
+  <button @click="open = true">Add Host</button>
+  <div x-show="open" class="modal-backdrop">
+    <div @click.outside="open = false" class="modal-content">
+      <form hx-post="/hosts" hx-target="#host-list" @submit="open = false">
+        ...
+      </form>
+    </div>
+  </div>
+</div>
+
+<!-- Toast -->
+<div x-data="{ toast: '', show: false }"
+     x-init="$watch('show', v => v && setTimeout(() => show = false, 3000))"
+     x-show="show"
+     class="toast">
+  <span x-text="toast"></span>
+</div>
+```
+
+### 4.3 JS Murni (Vanilla)
+
+```javascript
+// clipboard.js — copy to clipboard
+function copyToClipboard(text) {
+  navigator.clipboard.writeText(text);
+  // trigger toast via Alpine
+  document.querySelector('[x-data]').__x.$data.toast = 'Copied!';
+  document.querySelector('[x-data]').__x.$data.show = true;
+}
+
+// toggles.js — custom toggle switch
+function toggleSwitch(el) {
+  const checked = el.getAttribute('aria-checked') === 'true';
+  el.setAttribute('aria-checked', !checked);
+  fetch(`/settings/toggle?key=${el.dataset.key}&val=${!checked}`, { method: 'POST' });
+}
+```
+
+---
+
+## 5. Data Models (Go Structs)
+
+Semua data model di `internal/model/`, mapping dari template React `types.ts`:
+
+```go
+// model/host.go
+type Host struct {
+    ID        string `json:"id"`
+    Name      string `json:"name"`
+    IP        string `json:"ip"`
+    OS        string `json:"os"`
+    Provider  string `json:"provider"`
+    Status    string `json:"status"`    // "active" | "offline"
+    LastSeen  string `json:"lastSeen"`
+    Type      string `json:"type"`      // "api" | "db" | "edge" | "web" | "desktop" | "server"
+}
+
+// model/snippet.go
+type Snippet struct {
+    ID          string   `json:"id"`
+    Title       string   `json:"title"`
+    Description string   `json:"description"`
+    Code        string   `json:"code"`
+    Tags        []string `json:"tags"`
+    Collection  string   `json:"collection"` // "favorites" | "recent" | "all"
+    UpdatedAt   string   `json:"updatedAt"`
+    Icon        string   `json:"icon"`
+}
+```
+
+Lihat `docs/DATA_MODELS.md` untuk definisi lengkap.
+
+---
+
+## 6. HTMX Patterns yang Digunakan
+
+| Pattern | Contoh | Keterangan |
+|---------|--------|------------|
+| Search | `hx-get="/hosts?q=..." hx-trigger="keyup delay:200ms" hx-target="#host-list"` | Debounced search |
+| Filter | `hx-get="/hosts?filter=active" hx-target="#host-list"` | Tab filter |
+| Modal | Alpine `x-show` + `hx-post` | Form dalam modal |
+| Infinite scroll | `hx-get="/hosts?page=2" hx-trigger="revealed" hx-target="#host-list" hx-swap="beforeend"` | Load more |
+| Delete | `hx-delete="/hosts/123" hx-target="#host-card-123" hx-swap="delete" hx-confirm="Yakin?"` | Confirm + delete |
+| Toast | Alpine state + `hx-trigger="htmx:afterRequest"` dari response header `HX-Trigger: showToast` | Notifikasi |
+| Tab | Alpine `x-data` + `x-show` | Panel tab |
+
+---
+
+## 7. Keuntungan HTMX Dibanding React
+
+| Aspek | React (sebelumnya) | HTMX (sekarang) |
+|-------|-------------------|-----------------|
+| Dependency JS | 10+ library (React, Zustand, dll) | 3 library (HTMX, Alpine, xterm) |
+| Baris JS | ~2.878 baris TS/JSX | ~410 baris vanilla JS |
+| Build step | Vite + TypeScript + npm | CSS build + copy static |
+| Bahasa dominan | 60% TS + 40% Go | 90% Go + 10% HTML/JS |
+| State management | Zustand store | Server-side (HTMX) + Alpine |
+| API layer | REST JSON + manual fetch | HTML partials langsung |
+| Electron | Wajib (SPA) | Opsional (bisa browser) |
+| Debugging | React DevTools | Browser DevTools (HTML langsung) |
+| Time to implement | ~6 minggu | ~4 minggu (estimasi) |
+
+---
+
+## 8. Cara Kerja: React → HTMX Mapping per Halaman
+
+### Dashboard (Host List)
+
+| React | HTMX |
+|-------|------|
+| `useState` searchQuery | `hx-get="/hosts?q={search}"` |
+| `useState` statusFilter | `hx-get="/hosts?filter=active"` |
+| `useState` viewMode | Alpine `x-data="{ view: 'grid' }"` |
+| `useState` showAddModal | Alpine `x-show="open"` |
+| `onChange` filter | HTML `<select>` + `hx-get` |
+| `onSubmit` add host | `hx-post="/hosts"` |
+| `transfers` progress | `{{range}}` template loop |
+
+### Terminal
+
+| React | HTMX |
+|-------|------|
+| `useState` tabs | Alpine `x-data="{ tabs: [], active: '1' }"` |
+| `useRef` scroll | `xterm.scrollToBottom()` (built-in) |
+| `useEffect` autoScroll | `terminal.onData(() => scrollToBottom())` |
+| Command parser | WebSocket → Go backend → SSH |
+| Multi-tab | Alpine + multiple xterm instances |
+
+### SFTP
+
+| React | HTMX |
+|-------|------|
+| `useState` local/remote path | `hx-get="/sftp/ls?path=..." hx-target="#pane"` |
+| `useState` search | `hx-get="/sftp/ls?q=..." hx-trigger="keyup"` |
+| File click navigation | `hx-get="/sftp/ls?path={dir}" hx-push-url` |
+| Upload/download | `hx-post="/sftp/upload"` |
+| Toast | Alpine `x-data` + `setTimeout` |
+
+### Snippets
+
+| React | HTMX |
+|-------|------|
+| `useState` search/tag/collection | `hx-get="/snippets?q=&tag=&col="` |
+| `useState` copiedId | JS `copyToClipboard()` |
+| `useState` showAddForm | Alpine `x-show="open"` |
+| Copy | `onclick="copyToClipboard('code')"` |
+
+### Keychain
+
+| React | HTMX |
+|-------|------|
+| `useState` search | `hx-get="/keys?q=..."` |
+| `useState` revealPassId | Alpine `x-data="{ reveal: false }"` |
+| `useState` copiedId | JS `copyToClipboard()` |
+| Strength badge | Go template: `{{if gt (len .Passphrase) 12}}secure{{end}}` |
+
+### Settings
+
+| React | HTMX |
+|-------|------|
+| Form state | HTML `<form>` + `hx-post="/settings"` |
+| Toggle switches | JS click handler + `fetch POST /settings/toggle` |
+| Danger zone | `onclick="localStorage.clear(); location.reload()"` |
+
+### Brief Overlay
+
+| React | HTMX |
+|-------|------|
+| `isOpen` + `onClose` | Alpine `x-show="open"` + `@click="open = false"` |
+| Konten statis | Go template render (HTML murni) |
+
+---
+
+## 9. File yang Tidak Berubah
+
+Dokumen ini **melengkapi** (bukan mengganti) dokumen yang masih relevan:
+
+| Dokumen | Status | Alasan |
+|---------|--------|--------|
+| `docs/DATA_MODELS.md` | ✅ Tetap | Go struct masih sama |
+| `docs/API.md` | ✅ Tetap | REST endpoint masih sama |
+| `docs/PERFORMANCE.md` | ✅ Tetap | Performance tips masih relevan |
+| `docs/UI_TERMIUS_REFERENCE.md` | ✅ Tetap | Visual design masih sama |
+| `docs/ARCHITECTURE.md` | 🔄 Diupdate | Ditimpa dengan ringkasan + link ke ARCHITECTURE_HTMX.md |
+| `docs/SPRINT_PLAN.md` | 🔄 Diupdate | Sprint tasks diubah ke HTMX |
+| `docs/UI_COMPONENTS.md` | 🔄 Diganti | React → HTMX + Alpine |
+| `docs/BUILD_SYSTEM.md` | 🔄 Diupdate | Hapus Vite, tambah CSS build |
+| `docs/TIMELINE.md` | 🔄 Diupdate | Timeline disesuaikan |
+| `docs/PROGRESS.md` | 🔄 Diupdate | Status tracker diperbarui |
@@ -0,0 +1,183 @@
+# Hostkeeper V2 — Build System
+
+> **Status**: Updated untuk HTMX
+> **Last Updated**: 2026-07-07
+> **Frontend**: Go HTML template + HTMX + TailwindCSS v4 (tanpa Vite/npm/React)
+
+---
+
+## 1. Build Overview
+
+Hostkeeper V2 adalah **single Go binary** yang melayani HTML + static files.
+
+| Platform | Output | Wrapper | Backend |
+|----------|--------|---------|---------|
+| macOS (ARM64) | `.dmg` | Electron (opsional) | Go binary |
+| macOS (x64) | `.dmg` | Electron (opsional) | Go binary |
+| Windows (x64) | `.exe` installer | Electron (opsional) | Go binary |
+| Linux (x64) | `.AppImage` | Electron (opsional) | Go binary |
+| Android (ARM64) | `.aab` | WebView | Go library (.aar) |
+| iOS (ARM64) | `.ipa` | WKWebView | Go framework (.xcframework) |
+
+**Catatan**: Tanpa Electron app tetap bisa jalan — tinggal buka `http://localhost:1947` di browser.
+
+---
+
+## 2. Build Pipeline
+
+```
+┌──────────────┐    ┌──────────────┐    ┌──────────────┐
+│  TailwindCSS │    │  Go Build    │    │  Platform    │
+│  Build       │ →  │  (single     │ →  │  Package     │
+│  (CSS)       │    │   binary)    │    │  (opsional)  │
+└──────────────┘    └──────────────┘    └──────────────┘
+```
+
+### Step 1: CSS Build
+
+```bash
+# TailwindCSS v4 — input.css → output.css
+npx @tailwindcss/cli -i static/css/input.css -o static/css/output.css
+
+# Atau via Makefile
+make css
+```
+
+### Step 2: Go Build
+
+```bash
+# Development (hot reload via air)
+go run .
+
+# Production (single binary with embedded static)
+CGO_ENABLED=0 go build -ldflags="-s -w" -o dist/hostkeeper .
+
+# Cross-compile
+CGO_ENABLED=0 GOOS=darwin GOARCH=arm64 go build -o dist/hostkeeper-darwin-arm64 .
+CGO_ENABLED=0 GOOS=linux GOARCH=amd64 go build -o dist/hostkeeper-linux-amd64 .
+CGO_ENABLED=0 GOOS=windows GOARCH=amd64 go build -o dist/hostkeeper-windows-amd64.exe .
+```
+
+### Step 3: Elektron Package (Opsional)
+
+```bash
+cd app/electron
+npm install
+npm run build  # produces .dmg / .exe / .AppImage
+```
+
+---
+
+## 3. Development Workflow
+
+```bash
+# Terminal 1: Go backend (dengan hot reload)
+cd app/backend
+go run .
+
+# Terminal 2: CSS watch
+cd app/backend
+npx @tailwindcss/cli -i static/css/input.css -o static/css/output.css --watch
+
+# Buka browser
+open http://localhost:1947
+```
+
+### Hot Reload Tools
+
+```bash
+# Install air
+go install github.com/air-verse/air@latest
+
+# Run
+air
+```
+
+---
+
+## 4. Struktur Build Output
+
+```
+dist/
+├── hostkeeper                  ← Go binary (single file)
+├── static/                     ← Embedded static assets
+│   ├── css/
+│   ├── js/
+│   ├── xterm/
+│   └── img/
+└── views/                     ← Embedded HTML templates
+    ├── layout.html
+    └── partials/
+```
+
+GoFiber `embed` package untuk embed static + views:
+
+```go
+//go:embed static/* views/*
+var embedFS embed.FS
+
+func main() {
+    app := fiber.New()
+    app.Static("/static", "./static")
+    engine := html.NewFileSystem(http.FS(embedFS), ".html")
+    app.Settings.Views = engine
+}
+```
+
+---
+
+## 5. Dependencies
+
+### Go
+
+```
+github.com/gofiber/fiber/v2
+github.com/gofiber/contrib/websocket
+github.com/gofiber/template/html/v2
+github.com/fasthttp/websocket
+```
+
+### JavaScript (static files — download, bukan npm)
+
+```
+static/js/htmx.min.js          ← https://unpkg.com/htmx.org@2
+static/js/alpine.min.js        ← https://cdn.jsdelivr.net/npm/alpinejs@3
+static/xterm/xterm.js          ← https://unpkg.com/@xterm/xterm
+static/xterm/xterm.css         ← https://unpkg.com/@xterm/xterm/css
+```
+
+### CSS Tooling
+
+```
+@tailwindcss/cli               ← npx, build time only
+```
+
+---
+
+## 6. Makefile
+
+```makefile
+.PHONY: dev build css clean
+
+dev:
+	@echo "Starting dev server..."
+	@go run .
+
+css:
+	npx @tailwindcss/cli -i static/css/input.css -o static/css/output.css
+
+css-watch:
+	npx @tailwindcss/cli -i static/css/input.css -o static/css/output.css --watch
+
+build:
+	CGO_ENABLED=0 go build -ldflags="-s -w" -o dist/hostkeeper .
+
+build-all:
+	GOOS=darwin GOARCH=arm64 go build -o dist/hostkeeper-darwin-arm64 .
+	GOOS=darwin GOARCH=amd64 go build -o dist/hostkeeper-darwin-amd64 .
+	GOOS=linux GOARCH=amd64 go build -o dist/hostkeeper-linux-amd64 .
+	GOOS=windows GOARCH=amd64 go build -o dist/hostkeeper-windows-amd64.exe .
+
+clean:
+	rm -rf dist/
+```
@@ -2,8 +2,8 @@

 > **Purpose**: Enable seamless continuation of development by any agent/LLM across sessions.
 > **How to use**: Read this file first. Find the first unchecked `[ ]` item. That's where you continue.
-> **Last Updated**: 2026-06-29
-> **Status**: Planning complete, implementation not started.
+> **Last Updated**: 2026-07-07
+> **Status**: Documentation complete, Sprint 0 not started.

 ---

@@ -14,28 +14,33 @@ Hostkeeper V2 is a Termius-like cross-platform SSH/SFTP management GUI applicati
 | Item | Value |
 |------|-------|
 | **Goal** | Build a free, open-source Termius alternative with full feature parity |
-| **Desktop** | GoFiber backend + React/xterm.js UI + Electron wrapper |
+| **Desktop** | GoFiber backend + HTMX + xterm.js + Alpine.js |
 | **Mobile** | Go mobile library + WebView wrapper (Android/iOS) |
 | **Backend language** | Go 1.26 |
 | **HTTP framework** | GoFiber v2 (fasthttp-based) |
-| **Frontend** | React 19, TypeScript, xterm.js, Zustand, Vite |
-| **Desktop wrapper** | Electron (electron-builder) |
+| **Frontend** | HTMX + Alpine.js + xterm.js (minimal JS, server-rendered HTML) |
+| **Styling** | TailwindCSS v4 + custom CSS (Lumina System) |
+| **Desktop wrapper** | Electron (opsional — bisa lewat browser saja) |
 | **Mobile wrapper** | gomobile + WebView |
 | **V1 (existing)** | CLI/TUI SSH/SFTP manager — 105 tests, all passing. Frozen. |

+**Keputusan arsitektur**: Migrasi dari React/SPA ke HTMX/server-rendered HTML.
+Lihat [ARCHITECTURE_HTMX.md](ARCHITECTURE_HTMX.md) untuk detail.
+
 ---

 ## 2. Current Status Summary

 | Item | Status |
 |------|--------|
-| Planning documents | DONE |
-| Sprint 0 — Scaffolding | NOT STARTED |
-| Sprint 1 — Foundation | NOT STARTED |
-| Sprint 2 — Core Features | NOT STARTED |
-| Sprint 3 — SFTP + Polish | NOT STARTED |
-| Sprint 4 — Advanced | NOT STARTED |
-| Sprint 5 — Platform Polish | NOT STARTED |
+| Planning documents (HTMX) | DONE |
+| Sprint 0 — Setup GoFiber + HTMX | NOT STARTED |
+| Sprint 1 — Dashboard + Host List | NOT STARTED |
+| Sprint 2 — Snippets + Keychain | NOT STARTED |
+| Sprint 3 — Settings + Brief | NOT STARTED |
+| Sprint 4 — SFTP Dual-Pane | NOT STARTED |
+| Sprint 5 — Terminal + xterm.js | NOT STARTED |
+| Sprint 6 — Storage Integration | NOT STARTED |

 ---

@@ -290,15 +295,15 @@ Hostkeeper V2 is a Termius-like cross-platform SSH/SFTP management GUI applicati

 ### For a new AI agent:

-1. **Read this file** (`docs/v2/PROGRESS.md`) — find the first `[ ]` item
+1. **Read this file** (`docs/PROGRESS.md`) — find the first `[ ]` item
 2. **Read the relevant spec doc** — for the current task:
-   - REST API endpoints -> `docs/v2/API.md`
-   - UI components -> `docs/v2/UI_COMPONENTS.md`
-   - Data models -> `docs/v2/DATA_MODELS.md`
-   - Visual reference -> `docs/v2/UI_TERMIUS_REFERENCE.md`
-   - Performance notes -> `docs/v2/PERFORMANCE.md`
-   - Build pipeline -> `docs/v2/BUILD_SYSTEM.md`
-3. **Read `docs/v2/ARCHITECTURE.md`** — understand the system
+   - REST API endpoints -> `docs/API.md`
+   - UI components -> `docs/UI_COMPONENTS.md`
+   - Data models -> `docs/DATA_MODELS.md`
+   - Visual reference -> `docs/UI_TERMIUS_REFERENCE.md`
+   - Performance notes -> `docs/PERFORMANCE.md`
+   - Build pipeline -> `docs/BUILD_SYSTEM.md`
+3. **Read `docs/ARCHITECTURE.md`** — understand the system
 4. **Implement** in `app/backend/` (Go) or `app/frontend/` (React)
 5. **Test** — run `go test ./app/backend/...` and `npm test` in `app/frontend/`
 6. **Update this file** — mark `[x]` the completed task, update "Last Session Notes"
@@ -316,15 +321,15 @@ Hostkeeper V2 is a Termius-like cross-platform SSH/SFTP management GUI applicati

 | Document | When to read |
 |----------|-------------|
-| `docs/v2/PROGRESS.md` | Always (first) — know where to continue |
-| `docs/v2/ARCHITECTURE.md` | Understanding the system |
-| `docs/v2/API.md` | Implementing REST endpoints or WebSocket handlers |
-| `docs/v2/DATA_MODELS.md` | Creating/modifying Go structs or JSON schemas |
-| `docs/v2/UI_COMPONENTS.md` | Building React components |
-| `docs/v2/UI_TERMIUS_REFERENCE.md` | Designing UI layout, colors, typography |
-| `docs/v2/SPRINT_PLAN.md` | Detailed file-by-file task instructions |
-| `docs/v2/BUILD_SYSTEM.md` | Setting up build pipeline |
-| `docs/v2/PERFORMANCE.md` | Tuning for speed and stability |
+| `docs/PROGRESS.md` | Always (first) — know where to continue |
+| `docs/ARCHITECTURE.md` | Understanding the system |
+| `docs/API.md` | Implementing REST endpoints or WebSocket handlers |
+| `docs/DATA_MODELS.md` | Creating/modifying Go structs or JSON schemas |
+| `docs/UI_COMPONENTS.md` | Building React components |
+| `docs/UI_TERMIUS_REFERENCE.md` | Designing UI layout, colors, typography |
+| `docs/SPRINT_PLAN.md` | Detailed file-by-file task instructions |
+| `docs/BUILD_SYSTEM.md` | Setting up build pipeline |
+| `docs/PERFORMANCE.md` | Tuning for speed and stability |

 ---

@@ -0,0 +1,252 @@
+# 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** |
@@ -0,0 +1,129 @@
+# Hostkeeper V2 — Timeline & Milestones (HTMX)
+
+> **Status**: Updated untuk HTMX
+> **Last Updated**: 2026-07-07
+> **Start Date**: 2026-07-07
+> **Target MVP**: 2026-08-01 (estimasi ~3.5 minggu)
+
+---
+
+## Timeline Overview
+
+```
+Minggu 1  │ Sprint 0 ─ Sprint 1 ─ │── Foundation + Dashboard
+Minggu 2  │ Sprint 2 ─ Sprint 3 ─ │── Snippets + Keychain + Settings
+Minggu 3  │ Sprint 4 ─────────────│── SFTP
+Minggu 4  │ Sprint 5 ─ Sprint 6 ─ │── Terminal + Storage Integration
+          └────────────────────────┘
+          7 Jul    14 Jul   21 Jul   28 Jul
+```
+
+---
+
+## Detailed Timeline
+
+### Sprint 0 + Sprint 1 — Foundation + Dashboard
+**5 hari — 7 Jul s.d. 11 Jul**
+
+| Day | Date | Deliverable |
+|-----|------|-------------|
+| 1 | 7 Jul | Go module, Fiber server, static files, HTMX + Alpine |
+| 2 | 8 Jul | Layout template, nav sidebar, health endpoint |
+| 3 | 9 Jul | Host model, dashboard handler, host list template |
+| 4 | 10 Jul | Search HTMX, filter, view toggle, add host modal |
+| 5 | 11 Jul | Background transfers, toast notification, CSS final |
+
+**Milestone M1 — Dashboard Functional (11 Jul)**
+- GoFiber server running on :1947
+- Layout dengan sidebar navigasi
+- Dashboard dengan host list, search, filter, add host
+- HTMX interaktivitas berfungsi
+
+### Sprint 2 — Snippets + Keychain
+**3 hari — 14 Jul s.d. 16 Jul**
+
+| Day | Date | Deliverable |
+|-----|------|-------------|
+| 6 | 14 Jul | Snippet model + handler + template + search/filter |
+| 7 | 15 Jul | Add snippet modal, clipboard JS, tag filter |
+| 8 | 16 Jul | Keychain model + handler + template + passphrase reveal |
+
+**Milestone M2 — Snippets + Keys CRUD (16 Jul)**
+- Snippet library dengan search, tag filter, add modal
+- Keychain dengan strength badge, passphrase reveal, copy
+
+### Sprint 3 — Settings + Brief
+**2 hari — 17 Jul s.d. 18 Jul**
+
+| Day | Date | Deliverable |
+|-----|------|-------------|
+| 9 | 17 Jul | Settings handler + template + toggle switches |
+| 10 | 18 Jul | Brief overlay, connected devices, danger zone |
+
+**Milestone M3 — Settings Complete (18 Jul)**
+- Profile form, toggle switches, connected devices
+- Brief design system overlay
+
+### Sprint 4 — SFTP
+**4 hari — 21 Jul s.d. 24 Jul**
+
+| Day | Date | Deliverable |
+|-----|------|-------------|
+| 11 | 21 Jul | FileItem + Transfer model, SFTP handler |
+| 12 | 22 Jul | Dual-pane layout, breadcrumb navigation |
+| 13 | 23 Jul | Folder create/delete, upload/download |
+| 14 | 24 Jul | Search pane, toast notification, polish |
+
+**Milestone M4 — SFTP Works (24 Jul)**
+- Dual-pane file browser dengan navigasi folder
+- Upload/download, create/delete folder
+
+### Sprint 5 — Terminal
+**3 hari — 25 Jul s.d. 28 Jul**
+
+| Day | Date | Deliverable |
+|-----|------|-------------|
+| 15 | 25 Jul | xterm.js setup, WebSocket handler |
+| 16 | 26 Jul | SSH pipe via v1/pkg/ssh, terminal I/O |
+| 17 | 28 Jul | Multi-tab Alpine, polish, error handling |
+
+**Milestone M5 — Terminal Works (28 Jul)**
+- SSH terminal via WebSocket + xterm.js
+- Multi-tab support
+
+### Sprint 6 — Storage Integration + Polish
+**3 hari — 29 Jul s.d. 31 Jul**
+
+| Day | Date | Deliverable |
+|-----|------|-------------|
+| 18 | 29 Jul | replace directive, v1/pkg/storage integration |
+| 19 | 30 Jul | v1/pkg/crypto, config, knownhosts integration |
+| 20 | 31 Jul | Remove mock data, final testing, bug fixes |
+
+**Milestone MVP — Hostkeeper V2 Ready (31 Jul)**
+- All features functional with real data persistence
+- Single Go binary, ready for Electron wrapping
+
+---
+
+## Key Milestones
+
+| Milestone | Date | Deliverable |
+|-----------|------|-------------|
+| M1 | 11 Jul | Dashboard + search/filter + add host |
+| M2 | 16 Jul | Snippets + Keychain CRUD |
+| M3 | 18 Jul | Settings + Brief overlay |
+| M4 | 24 Jul | SFTP dual-pane file browser |
+| M5 | 28 Jul | Terminal SSH via WebSocket |
+| MVP | 31 Jul | Full integration with real storage |
+
+---
+
+## Estimasi vs React (dulu)
+
+| Metrik | React (rencana lama) | HTMX (sekarang) |
+|--------|---------------------|-----------------|
+| Total waktu | ~6 minggu (30 Jun - 7 Aug) | ~3.5 minggu (7 Jul - 31 Jul) |
+| Files | ~50 (Go + React + TS + Vite) | ~38 (Go + HTML + JS) |
+| JS dependencies | 10+ library + npm | 3 file JS (HTMX, Alpine, xterm) |
+| Build complexity | Vite + TypeScript + npm + Electron | CSS build + Go build |
@@ -0,0 +1,510 @@
+# Hostkeeper V2 — HTMX Components & Partials
+
+> **Status**: Menggantikan React Component Tree
+> **Last Updated**: 2026-07-07
+> **Framework**: Go HTML Template + HTMX + Alpine.js
+
+---
+
+## 1. Template Structure
+
+```
+views/
+├── layout.html            ← Base layout (html, head, body, sidebar, header, scripts)
+├── index.html             ← Entry: {{template "layout" .}} + {{template "content" .}}
+│
+└── partials/              ← HTMX-swappable partial fragments
+    ├── nav.html
+    ├── dashboard.html
+    ├── host_list.html
+    ├── host_card.html
+    ├── host_modal.html
+    ├── terminal.html
+    ├── sftp.html
+    ├── sftp_pane.html
+    ├── snippets.html
+    ├── snippet_grid.html
+    ├── snippet_modal.html
+    ├── keychain.html
+    ├── key_grid.html
+    ├── key_modal.html
+    ├── settings.html
+    ├── brief.html
+    └── toast.html
+```
+
+---
+
+## 2. Komponen per Halaman
+
+### 2.1 Navigasi (layout.html + nav.html)
+
+```html
+<!-- layout.html — base shell -->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <script src="/static/js/htmx.min.js"></script>
+  <script src="/static/js/alpine.min.js" defer></script>
+  <script src="/static/js/utils.js"></script>
+  <link rel="stylesheet" href="/static/css/output.css">
+  <link rel="stylesheet" href="/static/css/custom.css">
+  <title>Hostkeeper V2</title>
+</head>
+<body class="bg-surface text-on-surface antialiased dot-grid" hx-boost="true">
+  <div class="flex h-screen">
+    {{template "nav" .}}
+    <div class="flex-1 flex flex-col overflow-hidden">
+      <header class="h-14 border-b border-outline-variant/30 ...">
+        <h1 class="text-lg font-semibold">{{.Title}}</h1>
+      </header>
+      <main id="main-content" class="flex-1 overflow-auto p-6">
+        {{block "content" .}}{{end}}
+      </main>
+    </div>
+  </div>
+</body>
+</html>
+
+<!-- nav.html — sidebar -->
+<nav x-data="{ collapsed: false }"
+     class="w-[260px] ... glass-sidebar border-r border-outline-variant/30 flex flex-col">
+  <div class="p-4 ...">
+    <span class="text-primary font-bold text-lg">Hostkeeper</span>
+  </div>
+  <div class="flex-1 px-3 space-y-1">
+    {{range .NavItems}}
+    <a href="/{{.ID}}"
+       hx-get="/{{.ID}}" hx-target="#main-content" hx-push-url="true"
+       class="flex items-center gap-3 px-3 py-2 rounded-lg
+              {{if eq $.View .ID}}bg-primary/10 text-primary font-medium
+              {{else}}text-on-surface-variant hover:bg-surface-container-low{{end}}">
+      {{svg .Icon}}
+      <span>{{.Label}}</span>
+    </a>
+    {{end}}
+  </div>
+</nav>
+```
+
+### 2.2 Dashboard (partials/dashboard.html)
+
+```html
+<!-- Container: halaman utama -->
+<div id="dashboard-page" x-data="{ view: 'grid' }">
+  <!-- Header stats -->
+  <div class="grid grid-cols-3 gap-4 mb-6">
+    <div class="stat-card">...</div>
+    <div class="stat-card">...</div>
+    <div class="stat-card">...</div>
+  </div>
+
+  <!-- Search + Filter + ViewToggle -->
+  <div class="flex items-center gap-3 mb-6">
+    <input type="search" name="q" placeholder="Search hosts..."
+           hx-get="/hosts?q=..." hx-trigger="keyup delay:200ms"
+           hx-target="#host-list" hx-include="[name='filter']"
+           class="...">
+    <select name="filter"
+            hx-get="/hosts?filter={value}" hx-target="#host-list">
+      <option value="all">All</option>
+      <option value="active">Active</option>
+      <option value="offline">Offline</option>
+    </select>
+    <button @click="view = 'grid'" :class="view === 'grid' ? 'bg-primary/10' : ''">
+      {{svg "layout-grid"}}
+    </button>
+    <button @click="view = 'list'" :class="view === 'list' ? 'bg-primary/10' : ''">
+      {{svg "list"}}
+    </button>
+  </div>
+
+  <!-- Host list (swap target) -->
+  <div id="host-list"
+       x-show="view === 'grid'"
+       class="grid grid-cols-4 gap-4">
+    {{template "host_list" .Hosts}}
+  </div>
+  <div x-show="view === 'list'" class="...">
+    {{template "host_list_table" .Hosts}}
+  </div>
+</div>
+```
+
+### 2.3 Terminal (partials/terminal.html)
+
+```html
+<div id="terminal-page" x-data="terminalTabs()">
+  <!-- Tab bar -->
+  <div class="flex items-center gap-1 mb-4">
+    <template x-for="tab in tabs" :key="tab.id">
+      <button @click="switchTab(tab.id)"
+              :class="activeTab === tab.id ? 'bg-primary/10 text-primary' : ''"
+              class="px-3 py-1 rounded text-sm">
+        <span x-text="tab.title"></span>
+        <span @click.stop="closeTab(tab.id)" class="ml-2 cursor-pointer">&times;</span>
+      </button>
+    </template>
+    <button @click="addTab()" class="...">+</button>
+  </div>
+
+  <!-- Terminal container -->
+  <div x-ref="terminalContainer"
+       class="bg-[#1e1e1e] rounded-xl p-4 font-mono text-sm min-h-[400px]">
+    <div id="xterm-container" class="..."></div>
+  </div>
+</div>
+
+<script src="/static/xterm/xterm.js"></script>
+<script src="/static/js/terminal.js"></script>
+```
+
+### 2.4 SFTP (partials/sftp.html)
+
+```html
+<div id="sftp-page" x-data="{ toast: '', showToast: false }">
+  <div class="grid grid-cols-2 gap-6">
+    <!-- Local pane -->
+    <div class="pane glass-panel">
+      <div class="flex items-center gap-2 mb-4">
+        {{svg "hard-drive"}}
+        <span class="font-medium">Local Workstation</span>
+        <input type="search" placeholder="Search files..." class="...">
+      </div>
+      <div class="breadcrumb">
+        {{range .LocalBreadcrumb}}
+        <a href="#" hx-get="/sftp/ls?path={{.Path}}"
+           hx-target="#local-pane" class="...">{{.Name}}</a>
+        {{end}}
+      </div>
+      <div id="local-pane" class="file-table">
+        {{template "sftp_pane" .LocalFiles}}
+      </div>
+    </div>
+
+    <!-- Remote pane -->
+    <div class="pane glass-panel">
+      ... sama seperti local pane ...
+    </div>
+  </div>
+
+  <!-- Drop zone -->
+  <div class="drop-zone ...">Drop files here</div>
+
+  <!-- Toast -->
+  <div x-show="showToast"
+       x-text="toast"
+       x-init="$watch('showToast', v => v && setTimeout(() => showToast = false, 3000))"
+       class="toast">
+  </div>
+</div>
+```
+
+### 2.5 Snippets (partials/snippets.html)
+
+```html
+<div id="snippets-page" x-data="{ showForm: false, copiedId: null }">
+  <div class="flex gap-6">
+    <!-- Sidebar filters -->
+    <div class="w-48 space-y-4">
+      <div class="space-y-1">
+        <h3 class="text-sm font-medium text-on-surface-variant">Collections</h3>
+        <a href="#" hx-get="/snippets?col=all" hx-target="#snippet-grid"
+           class="filter-item {{if eq .Collection "all"}}active{{end}}">All</a>
+        <a href="#" hx-get="/snippets?col=favorites" hx-target="#snippet-grid"
+           class="filter-item">Favorites</a>
+        <a href="#" hx-get="/snippets?col=recent" hx-target="#snippet-grid"
+           class="filter-item">Recent</a>
+      </div>
+      <div class="space-y-1">
+        <h3 class="text-sm font-medium text-on-surface-variant">Tags</h3>
+        {{range .AllTags}}
+        <a href="#" hx-get="/snippets?tag={{.}}" hx-target="#snippet-grid"
+           class="filter-item">{{.}}</a>
+        {{end}}
+      </div>
+    </div>
+
+    <!-- Main grid -->
+    <div class="flex-1">
+      <div class="flex items-center gap-3 mb-4">
+        <input type="search" placeholder="Search snippets..."
+               hx-get="/snippets?q=..." hx-trigger="keyup delay:200ms"
+               hx-target="#snippet-grid" class="...">
+        <button @click="showForm = true" class="btn-primary">
+          + Snippet
+        </button>
+      </div>
+      <div id="snippet-grid" class="grid grid-cols-2 gap-4">
+        {{template "snippet_grid" .Snippets}}
+      </div>
+    </div>
+  </div>
+
+  <!-- Add snippet modal -->
+  <div x-show="showForm" class="modal-backdrop">
+    <div @click.outside="showForm = false" class="modal-content">
+      <form hx-post="/snippets" hx-target="#snippet-grid" @submit="showForm = false">
+        <input name="title" placeholder="Title" required>
+        <input name="description" placeholder="Description">
+        <textarea name="code" placeholder="Code" rows="8" required></textarea>
+        <input name="tags" placeholder="Tags (comma separated)">
+        <button type="submit">Save</button>
+        <button type="button" @click="showForm = false">Cancel</button>
+      </form>
+    </div>
+  </div>
+</div>
+```
+
+### 2.6 Keychain (partials/keychain.html)
+
+```html
+<div id="keychain-page" x-data="{ showForm: false, revealPass: null }">
+  <div class="flex items-center gap-3 mb-6">
+    <input type="search" placeholder="Search credentials..."
+           hx-get="/keys?q=..." hx-trigger="keyup delay:200ms"
+           hx-target="#key-grid" class="...">
+    <button @click="showForm = true" class="btn-primary">+ Credential</button>
+  </div>
+
+  <div id="key-grid" class="grid grid-cols-2 gap-4">
+    {{range .Keys}}
+    <div class="card glass-panel p-4">
+      <div class="flex items-center justify-between mb-3">
+        <div class="flex items-center gap-2">
+          {{svg "key"}}
+          <span class="font-medium">{{.Name}}</span>
+        </div>
+        <span class="strength-badge-{{.Strength}}">{{.Strength}}</span>
+      </div>
+      <div class="space-y-1 text-sm">
+        <div class="flex justify-between">
+          <span class="text-on-surface-variant">User</span>
+          <span>{{.User}}</span>
+        </div>
+        <div class="flex justify-between">
+          <span class="text-on-surface-variant">Passphrase</span>
+          <div x-data="{ reveal: false }" class="flex items-center gap-2">
+            <span x-text="reveal ? '{{.Passphrase}}' : '••••••••'"></span>
+            <button @click="reveal = !reveal">
+              {{svg "eye"}}
+            </button>
+            <button onclick='copyToClipboard("{{.Passphrase}}")'>
+              {{svg "copy"}}
+            </button>
+          </div>
+        </div>
+        <div class="flex justify-between">
+          <span class="text-on-surface-variant">{{.Fingerprint}}</span>
+        </div>
+      </div>
+    </div>
+    {{end}}
+  </div>
+</div>
+```
+
+### 2.7 Settings (partials/settings.html)
+
+```html
+<div id="settings-page">
+  <div class="max-w-2xl space-y-8">
+    <!-- Profile form -->
+    <div class="card glass-panel p-6">
+      <h2 class="text-lg font-semibold mb-4">Profile</h2>
+      <form hx-post="/settings" hx-target="#settings-form" class="space-y-4">
+        <div class="grid grid-cols-2 gap-4">
+          <div>
+            <label>Name</label>
+            <input name="name" value="{{.Profile.Name}}" class="...">
+          </div>
+          <div>
+            <label>Email</label>
+            <input name="email" value="{{.Profile.Email}}" class="...">
+          </div>
+        </div>
+        <button type="submit" class="btn-primary">Save</button>
+      </form>
+    </div>
+
+    <!-- Toggles -->
+    <div class="card glass-panel p-6">
+      <h2 class="text-lg font-semibold mb-4">Security & Transmission</h2>
+      {{range .Toggles}}
+      <div class="flex items-center justify-between py-3">
+        <div>
+          <span class="font-medium">{{.Label}}</span>
+          <p class="text-sm text-on-surface-variant">{{.Desc}}</p>
+        </div>
+        <button class="toggle-switch {{if .Enabled}}active{{end}}"
+                data-key="{{.Key}}"
+                onclick="toggleSwitch(this)"
+                aria-checked="{{.Enabled}}">
+          <span class="toggle-knob"></span>
+        </button>
+      </div>
+      {{end}}
+    </div>
+
+    <!-- Connected devices -->
+    <div class="card glass-panel p-6">
+      <h2 class="text-lg font-semibold mb-4">Connected Devices</h2>
+      {{range .Devices}}
+      <div class="flex items-center gap-3 py-2">
+        {{svg .Type}}
+        <span>{{.Name}}</span>
+        <span class="ml-auto text-sm {{if eq .Status "online"}}text-secondary{{end}}">
+          {{.Status}}
+        </span>
+      </div>
+      {{end}}
+    </div>
+
+    <!-- Danger zone -->
+    <div class="card border border-red-400/30 bg-red-50 p-6">
+      <h2 class="text-lg font-semibold text-red-600 mb-4">Danger Zone</h2>
+      <p class="text-sm text-red-600 mb-4">Flush all app state — this cannot be undone.</p>
+      <button onclick="if(confirm('Yakin?')){localStorage.clear();location.reload()}"
+              class="btn-danger">
+        Flush All App State
+      </button>
+    </div>
+  </div>
+</div>
+```
+
+### 2.8 Brief Overlay (partials/brief.html)
+
+```html
+<!-- Brief overlay — static design system reference -->
+<div x-data="{ open: false }">
+  <button @click="open = true" class="...">
+    {{svg "file-question"}}
+  </button>
+  <div x-show="open" class="fixed inset-0 z-50">
+    <div class="absolute inset-0 bg-black/20" @click="open = false"></div>
+    <div class="absolute right-0 top-0 h-full w-[400px] glass-sidebar p-6 overflow-auto">
+      <div class="flex items-center justify-between mb-6">
+        <h2 class="text-lg font-semibold">System Brief</h2>
+        <button @click="open = false">{{svg "x"}}</button>
+      </div>
+      <!-- Static content dari template BriefOverlay.tsx -->
+      <div class="space-y-6">
+        <section>
+          <h3 class="font-medium text-primary mb-2">Color Palette</h3>
+          <div class="grid grid-cols-2 gap-2">
+            <div class="h-12 rounded-lg bg-primary"></div>
+            <div class="h-12 rounded-lg bg-secondary"></div>
+          </div>
+        </section>
+        <section>
+          <h3 class="font-medium text-primary mb-2">Typography</h3>
+          <p class="font-inter text-lg">Inter — Interface UI</p>
+          <p class="font-mono text-sm">JetBrains Mono — Code & Data</p>
+        </section>
+        <section>
+          <h3 class="font-medium text-primary mb-2">Glassmorphism</h3>
+          <p>backdrop-blur-md + rgba(255,255,255,0.7)</p>
+        </section>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+---
+
+## 3. Alpine.js Components (State Management)
+
+### 3.1 Terminal Tabs
+
+```javascript
+// inline dalam terminal.html
+function terminalTabs() {
+  return {
+    tabs: [{ id: '1', title: 'localhost' }],
+    activeTab: '1',
+    addTab() {
+      const id = String(Date.now());
+      this.tabs.push({ id, title: `host-${this.tabs.length + 1}` });
+      this.activeTab = id;
+      this.$nextTick(() => initTerminal(id));
+    },
+    closeTab(id) {
+      this.tabs = this.tabs.filter(t => t.id !== id);
+      if (this.activeTab === id) this.activeTab = this.tabs[0]?.id;
+    },
+    switchTab(id) {
+      this.activeTab = id;
+      this.$nextTick(() => focusTerminal(id));
+    }
+  }
+}
+```
+
+### 3.2 Toast Notifications
+
+```javascript
+// inline dalam sftp.html, dashboard.html
+function toastManager() {
+  return {
+    message: '',
+    visible: false,
+    show(msg) {
+      this.message = msg;
+      this.visible = true;
+      setTimeout(() => this.visible = false, 3000);
+    }
+  }
+}
+```
+
+---
+
+## 4. JavaScript Files (Vanilla)
+
+### static/js/clipboard.js
+
+```javascript
+function copyToClipboard(text, triggerId) {
+  navigator.clipboard.writeText(text).then(() => {
+    // trigger toast via htmx event
+    document.body.dispatchEvent(new CustomEvent('showToast', {
+      detail: { message: 'Copied!' }
+    }));
+  });
+}
+```
+
+### static/js/toggles.js
+
+```javascript
+function toggleSwitch(el) {
+  const checked = el.getAttribute('aria-checked') === 'true';
+  el.setAttribute('aria-checked', !checked);
+  el.classList.toggle('active');
+  fetch(`/settings/toggle?key=${el.dataset.key}&val=${!checked}`, {
+    method: 'POST'
+  });
+}
+```
+
+### static/js/utils.js
+
+```javascript
+function revealPassphrase(el) {
+  const span = el.closest('.pass-row').querySelector('.pass-text');
+  const isHidden = span.dataset.hidden === 'true';
+  span.textContent = isHidden ? span.dataset.value : '••••••••';
+  span.dataset.hidden = isHidden ? 'false' : 'true';
+}
+
+function strengthClass(len) {
+  if (len > 12) return 'secure';
+  if (len > 7) return 'moderate';
+  return 'weak';
+}
+```
@@ -1,459 +0,0 @@
-# Hostkeeper V2 — Architecture
-
-> **Status**: V2 Planning Complete
-> **Last Updated**: 2026-06-29
-> **V1 (existing)**: CLI/TUI SSH/SFTP manager — frozen, no changes.
-
---
-
-## 1. System Overview
-
-Hostkeeper V2 is a Termius-like cross-platform SSH/SFTP management GUI. The architecture follows a **Go backend + Web UI + Electron/WebView** pattern — the same approach used by Termius, VS Code, Discord, Slack, and Figma.
-
-```
-┌──────────────────────────────────────────────────────┐
-│                  ELECTRON / WEBVIEW                   │
-│  Native window, menu bar, tray icon, auto-updater    │
-│                                                       │
-│  ┌─────────────────────────────────────────────────┐  │
-│  │              WEB UI (React + TypeScript)         │  │
-│  │  Host List │ Terminal │ SFTP │ Keys │ Settings   │  │
-│  │  ┌───────────────────────────────────────────┐  │  │
-│  │  │           xterm.js (terminal)             │  │  │
-│  │  └───────────────────────────────────────────┘  │  │
-│  └─────────────────────────────────────────────────┘  │
-│                           │ HTTP + WebSocket          │
-│  ┌─────────────────────────────────────────────────┐  │
-│  │          GO BACKEND (GoFiber v2)                │  │
-│  │  REST API  │  WebSocket  │  SSH  │  SFTP        │  │
-│  │  ┌───────────────────────────────────────────┐  │  │
-│  │  │  pkg/ssh │ pkg/sftp │ pkg/crypto │ ...    │  │  │
-│  │  └───────────────────────────────────────────┘  │  │
-│  └─────────────────────────────────────────────────┘  │
-└──────────────────────────────────────────────────────┘
-           │ Distributed as:
-           ├── .dmg  (macOS)
-           ├── .exe  (Windows)
-           ├── .AppImage (Linux)
-           └── .aab / .ipa (Android / iOS)
-```
-
-### Communication Flow
-
-```
-User interaction (keyboard, mouse)
-    │
-    ▼
-React component (event handler)
-    │
-    ▼
-API client (fetch / WebSocket)
-    │
-    ▼
-GoFiber HTTP server (localhost:randomPort)
-    │
-    ├── REST handlers → pkg/storage → JSON files
-    └── WebSocket handlers → pkg/ssh → remote server
-```
-
---
-
-## 2. Technology Stack
-
-### Backend (Go)
-
-| Component | Library | Purpose |
-|-----------|---------|---------|
-| HTTP server | `gofiber/fiber/v2` | REST API, static file serving |
-| WebSocket | `gofiber/contrib/websocket` | Terminal streaming, real-time updates |
-| WebSocket engine | `fasthttp/websocket` | Underlying WS protocol (fork of gorilla) |
-| SSH client | `golang.org/x/crypto/ssh` | Remote SSH connections (reuse V1 pkg/ssh) |
-| SFTP client | `github.com/pkg/sftp` | File transfer (reuse V1 pkg/sftp) |
-| Crypto | `crypto/aes`, `crypto/cipher` | AES-256-GCM encryption (reuse V1 pkg/crypto) |
-| Storage | Standard `os` + `encoding/json` | JSON file persistence (reuse V1 pkg/storage) |
-| Config | `github.com/spf13/viper` | App configuration (reuse V1 pkg/config) |
-| UUID | `github.com/google/uuid` | Unique IDs for entities |
-| Routers | `github.com/gofiber/fiber/v2` | HTTP routing |
-| Middleware | GoFiber built-in | CORS, compress, recover, logger |
-
-### Frontend (React/TypeScript)
-
-| Component | Library | Purpose |
-|-----------|---------|---------|
-| Framework | React 19 + TypeScript | UI components |
-| Build tool | Vite | Fast development + production build |
-| Terminal | xterm.js + addons | Terminal emulation (fit, web-links, search) |
-| State | Zustand | Lightweight state management |
-| Routing | React Router v7 | Screen navigation |
-| Styling | TailwindCSS + CSS variables | Theming (dark/light/contrast) |
-| Icons | Lucide React | Consistent icon set |
-| Notifications | Sonner | Toast notifications |
-
-### Desktop (Electron)
-
-| Component | Library | Purpose |
-|-----------|---------|---------|
-| Shell | Electron 33 | Native desktop wrapper |
-| Packaging | electron-builder | Build .dmg, .exe, .AppImage |
-| Auto-update | electron-updater | In-app updates |
-| Keychain | Node.js safeStorage | OS keychain integration |
-| IPC | Electron IPC | Go backend <-> Electron communication |
-
-### Mobile
-
-| Component | Library | Purpose |
-|-----------|---------|---------|
-| Go library | gomobile bind | Compile Go to .aar/.xcframework |
-| UI shell | React Native WebView | Display web UI on mobile |
-| Native code | Java (Android) / Swift (iOS) | Minimal WebView wrapper |
-
---
-
-## 3. Directory Structure
-
-```
-hostkeeper/
-├── cmd/                          # V1 CLI (FROZEN)
-│   └── hostkeeper/
-├── pkg/                          # V1 shared packages (FROZEN)
-│   ├── ssh/
-│   ├── sftp/
-│   ├── crypto/
-│   ├── storage/
-│   ├── config/
-│   ├── knownhosts/
-│   └── tui/
-├── internal/                     # V1 internal packages (FROZEN)
-│   ├── models/
-│   └── errors/
-├── test/                         # V1 tests (FROZEN)
-│
-├── app/                          # V2 GUI (NEW)
-│   ├── backend/                  # Go HTTP server
-│   │   ├── main.go               # Entry point, fiber server setup
-│   │   ├── go.mod                # Go module for backend
-│   │   ├── bridge/               # REST API handlers
-│   │   │   ├── hosts.go
-│   │   │   ├── keys.go
-│   │   │   ├── snippets.go
-│   │   │   ├── groups.go
-│   │   │   ├── portforward.go
-│   │   │   ├── sftp.go
-│   │   │   ├── config.go
-│   │   │   ├── vault.go
-│   │   │   └── export.go
-│   │   ├── ws/                   # WebSocket handlers
-│   │   │   ├── terminal.go       # SSH terminal streaming
-│   │   │   └── session.go        # Session management
-│   │   └── middleware/           # Custom middleware
-│   │       └── middleware.go     # (optional overrides)
-│   │
-│   ├── frontend/                 # React web UI
-│   │   ├── src/
-│   │   │   ├── components/       # Reusable UI components
-│   │   │   ├── screens/          # Page-level components
-│   │   │   ├── hooks/            # Custom React hooks
-│   │   │   ├── stores/           # Zustand state stores
-│   │   │   ├── api/              # API client functions
-│   │   │   └── styles/           # CSS, themes, variables
-│   │   ├── index.html
-│   │   ├── vite.config.ts
-│   │   ├── tailwind.config.js
-│   │   ├── tsconfig.json
-│   │   └── package.json
-│   │
-│   └── electron/                 # Electron shell
-│       ├── main.ts               # Main process
-│       ├── preload.ts            # Preload script (IPC bridge)
-│       ├── build.ts              # Build configuration
-│       ├── package.json
-│       └── electron-builder.yml
-│
-├── mobile/                       # V2 Mobile (NEW)
-│   ├── android/                  # Android WebView app
-│   │   ├── app/
-│   │   ├── build.gradle
-│   │   └── ...
-│   ├── ios/                      # iOS WKWebView app
-│   │   ├── Hostkeeper/
-│   │   ├── Hostkeeper.xcodeproj
-│   │   └── ...
-│   └── gomobile/                 # Go mobile compilation
-│       ├── build.sh
-│       └── ...
-│
-├── scripts/                      # Build scripts
-│   ├── build.sh                  # Full build (Go + FE + Electron)
-│   ├── build-go.sh               # Go cross-compile
-│   ├── build-fe.sh               # Frontend build
-│   ├── build-electron.sh         # Electron package
-│   └── build-mobile.sh           # Mobile build
-│
-├── docs/                         # Documentation
-│   ├── v2/                       # V2 planning docs
-│   │   ├── PROGRESS.md           # Status tracker (read this first)
-│   │   ├── ARCHITECTURE.md       # This file
-│   │   ├── API.md                # REST API + WebSocket spec
-│   │   ├── DATA_MODELS.md        # Extended data models
-│   │   ├── UI_COMPONENTS.md      # React component tree
-│   │   ├── UI_TERMIUS_REFERENCE.md # Termius visual reference
-│   │   ├── SPRINT_PLAN.md        # Sprint-by-sprint task breakdown
-│   │   ├── BUILD_SYSTEM.md       # Build pipeline
-│   │   └── PERFORMANCE.md        # Performance & stability
-│   ├── v1/                       # V1 docs (FROZEN, reference only)
-│   │   ├── ARCHITECTURE.md
-│   │   ├── TEST_PLAN.md
-│   │   ├── INSTALLATION.md
-│   │   └── USAGE.md
-│   └── plans/                    # V1 design docs (FROZEN)
-│
-├── go.mod                        # V1 Go module
-├── go.sum
-├── Makefile
-├── build.sh
-├── CHANGELOG.md
-├── PROJECT_STATE.md              # V1 project state
-└── README.md
-```
-
---
-
-## 4. Process Model
-
-### Startup Sequence
-
-```
-1. User double-clicks Hostkeeper.app (Electron)
-2. Electron main process starts
-3. Electron spawns Go binary as child process
-4. Go binary starts GoFiber server on localhost:randomPort
-5. Go serves frontend dist (embedded in Electron)
-6. Electron loads web UI from localhost:PORT
-7. Web UI renders vault unlock screen
-8. User enters password -> Go unlocks vault (decrypts data)
-9. User sees host list screen -> ready to use
-```
-
-### Shutdown Sequence
-
-```
-1. User closes window / Cmd+Q
-2. Electron sends SIGTERM to Go child process
-3. Go receives signal -> starts graceful shutdown
-4. Go disconnects all active SSH sessions
-5. Go saves any pending state
-6. Go closes fiber server
-7. Go exits
-8. Electron exits
-```
-
-### Development Mode
-
-```
-1. Terminal: cd app/backend && go run .
-2. Terminal: cd app/frontend && npm run dev
-3. Go server at localhost:8080
-4. Frontend dev server at localhost:5173 (Vite HMR)
-5. Frontend proxies API requests to localhost:8080
-6. Open browser at localhost:5173
-```
-
---
-
-## 5. Data Flow
-
-### REST API Request Flow
-
-```
-React component
-  → useQuery/useMutation (React Query or manual fetch)
-    → API client (fetch wrapper)
-      → HTTP request to GoFiber (localhost:PORT/api/...)
-        → GoFiber router -> handler function
-          → Handler calls pkg/storage (read/write JSON)
-            → Response sent back through the chain
-```
-
-### Terminal WebSocket Flow
-
-```
-User opens terminal tab
-  → React: XTermWrapper mounts
-    → XTermWrapper opens WebSocket to ws://localhost:PORT/ws/terminal?host_id=xxx&cols=80&rows=24
-      → GoFiber WebSocket handler accepts connection
-        → Go: SSH client connects to remote host (reuse pkg/ssh)
-          → SSH session created, PTY requested
-            → SSH stdout goroutine -> reads SSH output -> c.WriteMessage(BinaryMessage, data)
-              -> xterm.js receives data -> renders in terminal
-            -> xterm.js onKey -> c.WriteMessage(BinaryMessage, input)
-              -> Go receives input -> session.Stdin.Write(input) -> SSH remote
-```
-
-### SFTP File Transfer Flow
-
-```
-User drags file to remote pane
-  → React: FileList onDrop handler
-    → API client: POST /api/sftp/upload (multipart/form-data)
-      → Go: bridge/sftp.go receives upload
-        → Go: pkg/sftp client writes to remote
-          → Response: { "success": true }
-            → React: refresh remote file list
-```
-
---
-
-## 6. Security Architecture
-
-### Encryption Model
-
-| Layer | Method | Implementation |
-|-------|--------|----------------|
-| Data at rest | AES-256-GCM | `pkg/crypto/crypto.go` (reuse V1) |
-| Key derivation | PBKDF2 (100k iterations) | `pkg/crypto/crypto.go` (reuse V1) |
-| Password storage | SHA-256 hash | `pkg/config/config.go` (reuse V1) |
-| Known hosts | TOFU verification | `pkg/knownhosts/knownhosts.go` (reuse V1) |
-| Transport | localhost only | No TLS needed (same machine) |
-| Export | AES-256-GCM with password | `pkg/storage/json_storage.go` (reuse V1) |
-
-### Vault Flow
-
-```
-App start -> vault locked -> prompt password
-  -> PBKDF2 derive key from password
-    -> Try decrypt hosts.json
-      -> Success -> vault unlocked, data accessible
-      -> Fail -> wrong password, show error
-        -> Vault locked -> no data accessible
-          -> Auto-lock after inactivity timer
-```
-
-### OS Keychain Integration
-
-| Platform | Library | Purpose |
-|----------|---------|---------|
-| macOS | `security` CLI or `go-keychain` | Store vault master key |
-| Windows | `go-credential` | Store vault master key |
-| Linux | `dbus` Secret Service | Store vault master key |
-| Electron | `safeStorage` API | Store vault master key |
-
---
-
-## 7. WebSocket Protocol
-
-### Terminal WebSocket
-
-**Connection**: `ws://localhost:PORT/ws/terminal?host_id=xxx&cols=80&rows=24`
-
-**Message types** (binary frames):
-
-| Direction | Type | Content |
-|-----------|------|---------|
-| Client → Server | Input | Raw keystroke bytes |
-| Server → Client | Output | Terminal output bytes |
-| Client → Server | Resize | JSON: `{ "type": "resize", "cols": 120, "rows": 40 }` |
-| Server → Client | Status | JSON: `{ "type": "status", "state": "connected" }` |
-| Server → Client | Error | JSON: `{ "type": "error", "message": "..." }` |
-
-**Keepalive**: Client sends ping every 30s, server responds with pong.
-
---
-
-## 8. Build System
-
-### Development
-
-```bash
-# Terminal 1: Go backend
-cd app/backend
-go run .
-
-# Terminal 2: Frontend with hot reload
-cd app/frontend
-npm run dev
-
-# Browser opens at http://localhost:5173
-```
-
-### Production Build
-
-```bash
-# Full build
-./scripts/build.sh
-
-# Output:
-# dist/hostkeeper-mac-arm64.dmg
-# dist/hostkeeper-win-x64.exe
-# dist/hostkeeper-linux-x64.AppImage
-```
-
-### Cross-Compilation Matrix
-
-| Platform | GOOS | GOARCH | Output |
-|----------|------|--------|--------|
-| macOS ARM64 | darwin | arm64 | hostkeeper-mac-arm64 |
-| macOS x64 | darwin | amd64 | hostkeeper-mac-x64 |
-| Windows x64 | windows | amd64 | hostkeeper-win-x64.exe |
-| Linux x64 | linux | amd64 | hostkeeper-linux-x64 |
-| Linux ARM64 | linux | arm64 | hostkeeper-linux-arm64 |
-| Android ARM64 | android | arm64 | hostkeeper-android.aar |
-| iOS ARM64 | ios | arm64 | hostkeeper-ios.xcframework |
-
---
-
-## 9. Error Handling
-
-### Go Backend Errors
-
-```go
-// All API errors follow this format:
-{
-    "error": "Human-readable error message",
-    "code": "MACHINE_READABLE_CODE",
-    "details": "Optional technical details"
-}
-
-// HTTP status codes:
-// 200 - Success
-// 201 - Created
-// 400 - Bad Request (validation error)
-// 401 - Unauthorized (vault locked)
-// 404 - Not Found
-// 409 - Conflict (duplicate)
-// 500 - Internal Server Error
-```
-
-### Frontend Error Handling
-
- Network errors: automatic retry with exponential backoff (3 retries)
- API errors: toast notification with error message
- WebSocket errors: reconnect button in terminal, auto-reconnect 3 times
- Validation errors: inline field-level error messages
-
---
-
-## 10. Testing Strategy
-
-| Layer | Tool | Coverage Target |
-|-------|------|----------------|
-| Go unit tests | `go test` | 80%+ |
-| Go integration tests | `go test -tags=integration` | Key flows |
-| React unit tests | Vitest + React Testing Library | 70%+ |
-| React E2E tests | Playwright | Critical flows |
-| Manual testing | All platforms | Every sprint |
-
-### Test Commands
-
-```bash
-# Go backend tests
-cd app/backend && go test ./...
-
-# Frontend tests
-cd app/frontend && npm test
-
-# Full test suite
-make test
-
-# Race condition check
-go test -race ./app/backend/...
-```
@@ -1,564 +0,0 @@
-# Hostkeeper V2 — Build System
-
-> **Status**: V2 Planning Complete
-> **Last Updated**: 2026-06-29
-
---
-
-## 1. Build Overview
-
-Hostkeeper V2 produces **4 platform outputs** from a single codebase:
-
-| Platform | Output | Wrapper | Backend |
-|----------|--------|---------|---------|
-| macOS (ARM64) | `.dmg` | Electron | Go binary (embedded) |
-| macOS (x64) | `.dmg` | Electron | Go binary (embedded) |
-| Windows (x64) | `.exe` installer | Electron | Go binary (embedded) |
-| Linux (x64) | `.AppImage` | Electron | Go binary (embedded) |
-| Android (ARM64) | `.aab` / `.apk` | WebView | Go library (.aar) |
-| iOS (ARM64) | `.ipa` | WKWebView | Go framework (.xcframework) |
-
---
-
-## 2. Build Pipeline
-
-```
-┌─────────────┐    ┌─────────────┐    ┌─────────────┐    ┌─────────────┐
-│  Go Build   │    │ Frontend    │    │  Electron   │    │  Platform   │
-│  (backend)  │ →  │  Build      │ →  │  Package    │ →  │  Sign       │
-└─────────────┘    └─────────────┘    └─────────────┘    └─────────────┘
-```
-
-### Step 1: Go Backend Cross-Compile
-
-```bash
-# macOS ARM64
-CGO_ENABLED=0 GOOS=darwin GOARCH=arm64 \
-    go build -ldflags="-s -w" -o dist/hostkeeper-server .
-
-# macOS x64
-CGO_ENABLED=0 GOOS=darwin GOARCH=amd64 \
-    go build -ldflags="-s -w" -o dist/hostkeeper-server .
-
-# Windows x64
-CGO_ENABLED=0 GOOS=windows GOARCH=amd64 \
-    go build -ldflags="-s -w" -o dist/hostkeeper-server.exe .
-
-# Linux x64
-CGO_ENABLED=0 GOOS=linux GOARCH=amd64 \
-    go build -ldflags="-s -w" -o dist/hostkeeper-server .
-
-# Linux ARM64
-CGO_ENABLED=0 GOOS=linux GOARCH=arm64 \
-    go build -ldflags="-s -w" -o dist/hostkeeper-server .
-```
-
-**Notes**:
- `CGO_ENABLED=0` — pure Go, no C dependencies
- `-ldflags="-s -w"` — strip debug info, reduce binary size
- Go binary size: ~15-20 MB (compressed)
-
-### Step 2: Frontend Build
-
-```bash
-cd app/frontend
-npm ci
-npm run build
-# Output: app/frontend/dist/
-```
-
-**Vite config** (`app/frontend/vite.config.ts`):
-```typescript
-import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react';
-
-export default defineConfig({
-    plugins: [react()],
-    build: {
-        outDir: 'dist',
-        sourcemap: false,
-        minify: 'terser',
-        rollupOptions: {
-            output: {
-                manualChunks: {
-                    xterm: ['@xterm/xterm', '@xterm/addon-fit'],
-                    react: ['react', 'react-dom'],
-                },
-            },
-        },
-    },
-    server: {
-        proxy: {
-            '/api': 'http://localhost:8080',
-            '/ws': {
-                target: 'ws://localhost:8080',
-                ws: true,
-            },
-        },
-    },
-});
-```
-
-### Step 3: Electron Package
-
-```yaml
-# app/electron/electron-builder.yml
-appId: com.hostkeeper.app
-productName: Hostkeeper
-copyright: Copyright © 2026
-
-directories:
-  output: ../../dist
-
-files:
-  - "**/*"
-  - "!**/node_modules/*/{CHANGELOG.md,README.md,readme.md,LICENSE}"
-
-extraResources:
-  - from: "../backend/hostkeeper-server"
-    to: "hostkeeper-server"
-  - from: "../frontend/dist"
-    to: "frontend"
-
-mac:
-  category: public.app-category.developer-tools
-  icon: assets/icon.icns
-  target:
-    - dmg
-    - zip
-  hardenedRuntime: true
-  notarize: true
-
-win:
-  icon: assets/icon.ico
-  target:
-    - nsis
-  certificateFile: env.WIN_CERTIFICATE_FILE
-
-linux:
-  icon: assets/icon.png
-  target:
-    - AppImage
-    - deb
-  category: Development
-
-nsis:
-  oneClick: false
-  allowToChangeInstallationDirectory: true
-```
-
---
-
-## 3. Mobile Build
-
-### Android
-
-```bash
-# Prerequisites:
-# - Android SDK installed
-# - Go 1.26+ with gomobile
-# - Java 17+
-
-# Install gomobile
-go install golang.org/x/mobile/cmd/gomobile@latest
-gomobile init
-
-# Build Go library
-cd mobile/gomobile
-gomobile bind -target=android -o=../android/app/libs/hostkeeper.aar \
-    ./go/
-
-# Build Android app
-cd ../android
-./gradlew assembleRelease
-# Output: mobile/android/app/build/outputs/apk/release/app-release.apk
-```
-
-### iOS
-
-```bash
-# Prerequisites:
-# - Xcode 15+
-# - Go 1.26+ with gomobile
-
-# Build Go framework
-cd mobile/gomobile
-gomobile bind -target=ios -o=../ios/Hostkeeper/Hostkeeper.xcframework \
-    ./go/
-
-# Build iOS app
-cd ../ios
-xcodebuild -project Hostkeeper.xcodeproj \
-    -scheme Hostkeeper \
-    -sdk iphoneos \
-    -configuration Release
-# Output: mobile/ios/build/Release-iphoneos/Hostkeeper.app
-```
-
---
-
-## 4. Build Scripts
-
-### `scripts/build.sh` (Full Build)
-
-```bash
-#!/bin/bash
-set -e
-
-VERSION=${1:-"dev"}
-PLATFORM=${2:-"all"}
-
-echo "=== Building Hostkeeper V2 v${VERSION} ==="
-
-# Step 1: Build Go backend
-echo "Step 1: Building Go backend..."
-cd app/backend
-
-case $PLATFORM in
-    macos|all)
-        CGO_ENABLED=0 GOOS=darwin GOARCH=arm64 go build -ldflags="-s -w -X main.version=${VERSION}" -o ../electron/hostkeeper-server .
-        ;;
-    windows|all)
-        CGO_ENABLED=0 GOOS=windows GOARCH=amd64 go build -ldflags="-s -w -X main.version=${VERSION}" -o ../electron/hostkeeper-server.exe .
-        ;;
-    linux|all)
-        CGO_ENABLED=0 GOOS=linux GOARCH=amd64 go build -ldflags="-s -w -X main.version=${VERSION}" -o ../electron/hostkeeper-server .
-        ;;
-esac
-
-cd ../..
-
-# Step 2: Build frontend
-echo "Step 2: Building frontend..."
-cd app/frontend
-npm ci
-npm run build
-cd ../..
-
-# Step 3: Package Electron
-echo "Step 3: Packaging Electron..."
-cd app/electron
-
-case $PLATFORM in
-    macos)
-        npx electron-builder --mac --arm64
-        ;;
-    windows)
-        npx electron-builder --win --x64
-        ;;
-    linux)
-        npx electron-builder --linux --x64
-        ;;
-    all)
-        npx electron-builder --mac --win --linux
-        ;;
-esac
-
-cd ../..
-
-# Step 4: Generate checksums
-echo "Step 4: Generating checksums..."
-cd dist
-shasum -a 256 *.dmg *.exe *.AppImage 2>/dev/null > checksums.txt
-
-echo "=== Build complete ==="
-echo "Output: dist/"
-ls -la dist/
-```
-
-### `scripts/build-mobile.sh`
-
-```bash
-#!/bin/bash
-set -e
-
-PLATFORM=${1:-"android"}
-
-echo "=== Building Hostkeeper Mobile (${PLATFORM}) ==="
-
-case $PLATFORM in
-    android)
-        cd mobile/gomobile
-        gomobile bind -target=android -o=../android/app/libs/hostkeeper.aar ./go/
-        cd ../android
-        ./gradlew assembleRelease
-        echo "APK: mobile/android/app/build/outputs/apk/release/"
-        ;;
-    ios)
-        cd mobile/gomobile
-        gomobile bind -target=ios -o=../ios/Hostkeeper/Hostkeeper.xcframework ./go/
-        cd ../ios
-        xcodebuild -project Hostkeeper.xcodeproj -scheme Hostkeeper -sdk iphoneos -configuration Release
-        echo "IPA: mobile/ios/build/Release-iphoneos/"
-        ;;
-esac
-
-echo "=== Mobile build complete ==="
-```
-
---
-
-## 5. Development Workflow
-
-### Quick Start
-
-```bash
-# Terminal 1: Go backend
-cd app/backend
-go run .
-
-# Terminal 2: Frontend (with hot reload)
-cd app/frontend
-npm run dev
-
-# Open browser: http://localhost:5173
-```
-
-### With Electron
-
-```bash
-# Terminal 1: Go backend
-cd app/backend
-go run .
-
-# Terminal 2: Frontend
-cd app/frontend
-npm run dev
-
-# Terminal 3: Electron
-cd app/electron
-npm run dev
-# Electron opens with hot reload
-```
-
-### VS Code Launch Config
-
-```json
-{
-    "version": "0.2.0",
-    "configurations": [
-        {
-            "name": "Go Backend",
-            "type": "go",
-            "request": "launch",
-            "program": "${workspaceFolder}/app/backend",
-            "cwd": "${workspaceFolder}/app/backend"
-        },
-        {
-            "name": "Electron",
-            "type": "node",
-            "request": "launch",
-            "program": "${workspaceFolder}/app/electron/node_modules/.bin/electron",
-            "args": ["."],
-            "cwd": "${workspaceFolder}/app/electron"
-        }
-    ]
-}
-```
-
---
-
-## 6. CI/CD (GitHub Actions)
-
-```yaml
-# .github/workflows/build.yml
-name: Build
-
-on:
-  push:
-    tags: ['v*']
-  pull_request:
-    branches: [main]
-
-jobs:
-  test:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-go@v5
-        with:
-          go-version: '1.26'
-      - run: go test -race ./app/backend/...
-      - uses: actions/setup-node@v4
-        with:
-          node-version: '22'
-      - run: cd app/frontend && npm ci && npm test
-
-  build-macos:
-    needs: test
-    runs-on: macos-latest
-    steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-go@v5
-        with:
-          go-version: '1.26'
-      - uses: actions/setup-node@v4
-        with:
-          node-version: '22'
-      - run: ./scripts/build.sh ${{ github.ref_name }} macos
-      - uses: actions/upload-artifact@v4
-        with:
-          name: hostkeeper-macos
-          path: dist/*.dmg
-
-  build-windows:
-    needs: test
-    runs-on: windows-latest
-    steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-go@v5
-        with:
-          go-version: '1.26'
-      - uses: actions/setup-node@v4
-        with:
-          node-version: '22'
-      - run: ./scripts/build.sh ${{ github.ref_name }} windows
-      - uses: actions/upload-artifact@v4
-        with:
-          name: hostkeeper-windows
-          path: dist/*.exe
-
-  build-linux:
-    needs: test
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-go@v5
-        with:
-          go-version: '1.26'
-      - uses: actions/setup-node@v4
-        with:
-          node-version: '22'
-      - run: ./scripts/build.sh ${{ github.ref_name }} linux
-      - uses: actions/upload-artifact@v4
-        with:
-          name: hostkeeper-linux
-          path: dist/*.AppImage
-```
-
---
-
-## 7. Binary Size Optimization
-
-| Technique | Impact |
-|-----------|--------|
-| `-ldflags="-s -w"` | -20% Go binary size |
-| UPX compression (optional) | -60% Go binary size |
-| Vite tree shaking | -40% JS bundle size |
-| Code splitting (lazy load) | -30% initial load |
-| Image optimization | -50% icon sizes |
-| Terser minification | -30% JS size |
-| CSS purging (Tailwind) | -80% CSS size |
-
-**Target sizes**:
- Go backend binary: ~15 MB (5 MB compressed)
- Frontend dist: ~2 MB (500 KB compressed)
- Electron package: ~200 MB total
- Mobile APK: ~50 MB
- Mobile IPA: ~60 MB
-
---
-
-## 8. Version Management
-
-### Version Format
-
-```
-vMAJOR.MINOR.PATCH
-```
-
- **MAJOR**: Breaking changes (data format, API)
- **MINOR**: New features
- **PATCH**: Bug fixes
-
-### Version Injection
-
-```go
-// In main.go
-var version = "dev"
-
-func main() {
-    fmt.Printf("Hostkeeper v%s\n", version)
-    // ...
-}
-```
-
-```bash
-# Build with version
-go build -ldflags="-X main.version=v2.0.0" -o hostkeeper-server .
-```
-
-### Changelog Format
-
-```markdown
-## [v2.1.0] - 2026-07-15
-
-### Added
- Port forwarding support (local, remote, dynamic)
- Import from ~/.ssh/config
-
-### Changed
- Improved terminal performance with WebGL renderer
-
-### Fixed
- Fixed SFTP upload progress not updating
- Fixed vault auto-lock not triggering on sleep
-```
-
---
-
-## 9. Code Signing
-
-### macOS
-
-```bash
-# Requires Apple Developer account + certificates
-export CSC_LINK="path/to/certificate.p12"
-export CSC_KEY_PASSWORD="certificate-password"
-
-# electron-builder handles signing + notarization
-npx electron-builder --mac --publish always
-```
-
-### Windows
-
-```bash
-# Requires code signing certificate
-export WIN_CERTIFICATE_FILE="path/to/certificate.pfx"
-export WIN_CERTIFICATE_PASSWORD="certificate-password"
-
-npx electron-builder --win --publish always
-```
-
-### Linux
-
-No code signing required. AppImage is self-contained.
-
---
-
-## 10. Release Workflow
-
-```bash
-# 1. Update version
-npm version minor  # or major, patch
-
-# 2. Update CHANGELOG.md
-
-# 3. Commit
-git add .
-git commit -m "chore: release v2.1.0"
-
-# 4. Tag
-git tag -a v2.1.0 -m "Release v2.1.0"
-
-# 5. Push
-git push origin main --tags
-
-# 6. GitHub Actions builds + publishes artifacts
-
-# 7. Create GitHub Release
-gh release create v2.1.0 \
-    --title "Hostkeeper v2.1.0" \
-    --notes-file CHANGELOG.md \
-    dist/*.dmg dist/*.exe dist/*.AppImage
-```
@@ -1,529 +0,0 @@
-# Hostkeeper V2 — Sprint Plan (File-by-File Task Breakdown)
-
-> **Status**: V2 Planning Complete
-> **Last Updated**: 2026-06-29
-> **Framework**: GoFiber v2 (backend), React/TypeScript (frontend), Electron (desktop)
-
---
-
-## Sprint 0 — Project Scaffolding
-
-**Goal**: Empty Electron app with GoFiber backend serving "Hello World".
-
-### Day 0: Setup (1 day)
-
-| # | Task | Files to Create | Verify |
-|---|------|----------------|--------|
-| 0.1 | Go module for backend | `app/backend/go.mod` | `go mod init` runs clean |
-| 0.2 | Install GoFiber + deps | `app/backend/go.mod` | `go get github.com/gofiber/fiber/v2` |
-| 0.3 | Minimal fiber server | `app/backend/main.go` | Server starts on random port |
-| 0.4 | Health endpoint | `app/backend/main.go` | `curl localhost:PORT/api/health` returns JSON |
-| 0.5 | Middleware setup | `app/backend/middleware/middleware.go` | CORS, logger, recover, compress registered |
-| 0.6 | Vite + React scaffold | `app/frontend/package.json`, `app/frontend/src/App.tsx` | `npm run dev` shows React app |
-| 0.7 | Electron shell | `app/electron/main.ts`, `app/electron/preload.ts`, `app/electron/package.json` | `npx electron .` opens window |
-| 0.8 | Electron spawns Go | `app/electron/main.ts` | Go process starts, API responds |
-| 0.9 | Electron loads frontend | `app/electron/main.ts` | Window shows React app |
-| 0.10 | Bridge placeholder dirs | `app/backend/bridge/`, `app/backend/ws/` | Directories exist |
-| 0.11 | Build script | `scripts/build.sh` | Script runs without error |
-| 0.12 | End-to-end verify | — | Electron window shows "Hostkeeper V2" title |
-
-#### Detailed Files
-
-**`app/backend/go.mod`**:
-```go
-module git.tukangketik.id/swanadiva/hostkeeper/app/backend
-
-go 1.26
-
-require (
-    github.com/gofiber/fiber/v2 v2.52.5
-    github.com/gofiber/contrib/websocket v1.3.3
-    github.com/fasthttp/websocket v1.5.12
-)
-```
-
-**`app/backend/main.go`**:
-```go
-package main
-
-import (
-    "fmt"
-    "log"
-    "math/rand"
-    "os"
-    "os/signal"
-    "syscall"
-    "time"
-
-    "github.com/gofiber/fiber/v2"
-    "github.com/gofiber/fiber/v2/middleware/compress"
-    "github.com/gofiber/fiber/v2/middleware/cors"
-    "github.com/gofiber/fiber/v2/middleware/logger"
-    "github.com/gofiber/fiber/v2/middleware/recover"
-)
-
-func main() {
-    port := rand.Intn(60000) + 10000 // random port 10000-70000
-
-    app := fiber.New(fiber.Config{
-        ReadTimeout:  30 * time.Second,
-        WriteTimeout: 30 * time.Second,
-        IdleTimeout:  120 * time.Second,
-    })
-
-    // Middleware
-    app.Use(recover.New())
-    app.Use(logger.New())
-    app.Use(compress.New(compress.Config{
-        Level: compress.LevelBestSpeed,
-    }))
-    app.Use(cors.New(cors.Config{
-        AllowOrigins: "*",
-        AllowMethods: "GET,POST,PUT,PATCH,DELETE,OPTIONS",
-        AllowHeaders: "Origin,Content-Type,Authorization",
-    }))
-
-    // Health check
-    app.Get("/api/health", func(c *fiber.Ctx) error {
-        return c.JSON(fiber.Map{
-            "status":  "ok",
-            "version": "2.0.0",
-        })
-    })
-
-    // Start server
-    go func() {
-        fmt.Printf("HOSTKEEPER_PORT=%d\n", port)
-        log.Fatal(app.Listen(fmt.Sprintf(":%d", port)))
-    }()
-
-    // Graceful shutdown
-    quit := make(chan os.Signal, 1)
-    signal.Notify(quit, syscall.SIGINT, syscall.SIGTERM)
-    <-quit
-    app.Shutdown()
-}
-```
-
-**`app/electron/main.ts`**:
-```typescript
-import { app, BrowserWindow } from 'electron';
-import { spawn, ChildProcess } from 'child_process';
-import * as path from 'path';
-
-let mainWindow: BrowserWindow;
-let goProcess: ChildProcess;
-
-function startGoBackend() {
-    const goBinary = path.join(__dirname, '../../backend/hostkeeper-server');
-    goProcess = spawn(goBinary, [], { stdio: 'pipe' });
-    
-    goProcess.stdout?.on('data', (data) => {
-        const output = data.toString();
-        const match = output.match(/HOSTKEEPER_PORT=(\d+)/);
-        if (match) {
-            const port = match[1];
-            mainWindow.loadURL(`http://localhost:${port}`);
-        }
-    });
-}
-
-function createWindow() {
-    mainWindow = new BrowserWindow({
-        width: 1200,
-        height: 800,
-        title: 'Hostkeeper V2',
-        webPreferences: {
-            preload: path.join(__dirname, 'preload.js'),
-        },
-    });
-    
-    // Load from Go backend (or dev server in development)
-    if (process.env.NODE_ENV === 'development') {
-        mainWindow.loadURL('http://localhost:5173');
-    } else {
-        startGoBackend();
-    }
-}
-
-app.whenReady().then(createWindow);
-app.on('window-all-closed', () => {
-    goProcess?.kill();
-    app.quit();
-});
-```
-
-**`scripts/build.sh`**:
-```bash
-#!/bin/bash
-set -e
-
-echo "=== Building Hostkeeper V2 ==="
-
-# Build Go backend
-echo "Building Go backend..."
-cd app/backend
-CGO_ENABLED=0 GOOS=darwin GOARCH=arm64 go build -o ../electron/hostkeeper-server .
-cd ../..
-
-# Build frontend
-echo "Building frontend..."
-cd app/frontend
-npm run build
-cd ../..
-
-# Package Electron
-echo "Packaging Electron..."
-cd app/electron
-npx electron-builder --mac --arm64
-cd ../..
-
-echo "=== Build complete ==="
-```
-
---
-
-## Sprint 1 — Foundation (Day 1-5)
-
-**Goal**: Full CRUD for hosts/keys/snippets + web UI with host list.
-
-### Day 1-2: Data API Layer
-
-| # | Task | Files to Create | Verify |
-|---|------|----------------|--------|
-| 1.1 | Host CRUD handlers | `app/backend/bridge/hosts.go` | All 6 endpoints work via curl |
-| 1.2 | Key CRUD handlers | `app/backend/bridge/keys.go` | All 4 endpoints work via curl |
-| 1.3 | Snippet CRUD handlers | `app/backend/bridge/snippets.go` | All 4 endpoints work via curl |
-| 1.4 | Storage integration | Import `pkg/storage` | Read/write actual JSON files |
-| 1.5 | Error responses | `app/backend/bridge/errors.go` | Consistent error format |
-| 1.6 | Route registration | `app/backend/main.go` | All routes registered |
-
-**Example handler** (`bridge/hosts.go`):
-```go
-func ListHosts(c *fiber.Ctx) error {
-    hosts, err := storage.ListHosts(c.Context())
-    if err != nil {
-        return c.Status(500).JSON(fiber.Map{"error": err.Error()})
-    }
-    return c.JSON(fiber.Map{"items": hosts, "total": len(hosts)})
-}
-```
-
-### Day 3: Groups + Config API
-
-| # | Task | Files to Create | Verify |
-|---|------|----------------|--------|
-| 1.7 | Group CRUD handlers | `app/backend/bridge/groups.go` | Tree structure returned |
-| 1.8 | Config handlers | `app/backend/bridge/config.go` | Get/set config works |
-| 1.9 | Vault handlers | `app/backend/bridge/vault.go` | Lock/unlock/unlock status |
-| 1.10 | Group tree builder | `app/backend/bridge/groups.go` | Recursive tree populated |
-
-### Day 4: Web UI Scaffold
-
-| # | Task | Files to Create | Verify |
-|---|------|----------------|--------|
-| 1.11 | React Router | `app/frontend/src/router.tsx` | Navigate between screens |
-| 1.12 | Layout component | `app/frontend/src/components/Layout.tsx` | Sidebar + tab bar + content |
-| 1.13 | Sidebar component | `app/frontend/src/components/Sidebar.tsx` | Group tree + search |
-| 1.14 | Theme system | `app/frontend/src/styles/themes.css` | CSS variables for dark/light |
-| 1.15 | API client | `app/frontend/src/api/client.ts` | Fetch wrapper with errors |
-| 1.16 | Zustand stores | `app/frontend/src/stores/*.ts` | Host, tab, vault stores |
-| 1.17 | Keyboard shortcuts | `app/frontend/src/hooks/useKeyboard.ts` | Cmd+N, Cmd+K work |
-
-### Day 5: Host List Screen
-
-| # | Task | Files to Create | Verify |
-|---|------|----------------|--------|
-| 1.18 | HostList screen | `app/frontend/src/screens/HostListScreen.tsx` | Hosts displayed |
-| 1.19 | HostCard component | `app/frontend/src/components/HostCard.tsx` | Host info shown |
-| 1.20 | GroupTree component | `app/frontend/src/components/GroupTree.tsx` | Collapsible tree |
-| 1.21 | SearchBar component | `app/frontend/src/components/SearchBar.tsx` | Filter works |
-| 1.22 | EmptyState component | `app/frontend/src/components/EmptyState.tsx` | Shown when no hosts |
-| 1.23 | Context menu | `app/frontend/src/components/ContextMenu.tsx` | Right-click menu |
-
---
-
-## Sprint 2 — Core Features (Day 6-10)
-
-**Goal**: Host form + SSH terminal (the critical feature).
-
-### Day 6-7: Host Form + CRUD UI
-
-| # | Task | Files to Create | Verify |
-|---|------|----------------|--------|
-| 2.1 | HostForm screen | `app/frontend/src/screens/HostFormScreen.tsx` | Add/edit host works |
-| 2.2 | AuthSection component | `app/frontend/src/components/AuthSection.tsx` | Password/key selector |
-| 2.3 | TagsInput component | `app/frontend/src/components/TagsInput.tsx` | Add/remove tags |
-| 2.4 | GroupPicker component | `app/frontend/src/components/GroupPicker.tsx` | Tree picker |
-| 2.5 | Form validation | `app/frontend/src/utils/validation.ts` | All field validation |
-| 2.6 | Toast notifications | `app/frontend/src/components/Toast.tsx` | Success/error toasts |
-
-### Day 8-10: SSH Terminal (MOST CRITICAL)
-
-| # | Task | Files to Create | Verify |
-|---|------|----------------|--------|
-| 2.7 | WebSocket handler | `app/backend/ws/terminal.go` | WS connection accepted |
-| 2.8 | SSH session management | `app/backend/ws/session.go` | Connect, stream, disconnect |
-| 2.9 | Terminal resize | `app/backend/ws/terminal.go` | Resize messages handled |
-| 2.10 | XTermWrapper component | `app/frontend/src/components/XTermWrapper.tsx` | Terminal renders |
-| 2.11 | TerminalScreen | `app/frontend/src/screens/TerminalScreen.tsx` | Full terminal view |
-| 2.12 | TabBar component | `app/frontend/src/components/TabBar.tsx` | Multi-tab support |
-| 2.13 | Tab management | `app/frontend/src/stores/tabStore.ts` | Add/close/switch tabs |
-| 2.14 | SnippetPanel | `app/frontend/src/components/SnippetPanel.tsx` | Slide-in snippet list |
-| 2.15 | Connection overlay | `app/frontend/src/components/ConnectionOverlay.tsx` | Status + reconnect |
-| 2.16 | Terminal toolbar | `app/frontend/src/components/TerminalToolbar.tsx` | Host info + actions |
-
-**WebSocket handler** (`ws/terminal.go`):
-```go
-package ws
-
-import (
-    "encoding/json"
-    "log"
-    "time"
-
-    "github.com/gofiber/contrib/websocket"
-    "git.tukangketik.id/swanadiva/hostkeeper/pkg/ssh"
-)
-
-func HandleTerminal(c *websocket.Conn) {
-    hostID := c.Query("host_id")
-    cols := c.QueryInt("cols", 80)
-    rows := c.QueryInt("rows", 24)
-
-    // Get host from storage
-    host, err := storage.GetHost(c.Context(), hostID)
-    if err != nil {
-        c.WriteJSON(fiber.Map{"type": "error", "message": "Host not found"})
-        return
-    }
-
-    // Create SSH client
-    client := ssh.NewClient(host, 30*time.Second)
-    if err := client.Connect(c.Context()); err != nil {
-        c.WriteJSON(fiber.Map{"type": "error", "message": err.Error()})
-        return
-    }
-    defer client.Close()
-
-    // Create session + PTY
-    session, err := client.GetClient().NewSession()
-    if err != nil {
-        c.WriteJSON(fiber.Map{"type": "error", "message": "Session failed"})
-        return
-    }
-    defer session.Close()
-
-    modes := ssh.TerminalModes{ssh.ECHO: 1}
-    session.RequestPty("xterm-256color", rows, cols, modes)
-
-    stdin, _ := session.StdinPipe()
-    stdout, _ := session.StdoutPipe()
-
-    if err := session.Shell(); err != nil {
-        c.WriteJSON(fiber.Map{"type": "error", "message": "Shell failed"})
-        return
-    }
-
-    c.WriteJSON(fiber.Map{"type": "status", "state": "connected"})
-
-    // Goroutine: SSH stdout -> WebSocket
-    go func() {
-        buf := make([]byte, 4096)
-        for {
-            n, err := stdout.Read(buf)
-            if err != nil {
-                break
-            }
-            if err := c.WriteMessage(websocket.BinaryMessage, buf[:n]); err != nil {
-                break
-            }
-        }
-    }()
-
-    // Main loop: WebSocket -> SSH stdin
-    for {
-        _, msg, err := c.ReadMessage()
-        if err != nil {
-            break
-        }
-
-        // Check for resize message
-        if len(msg) > 0 && msg[0] == '{' {
-            var ctrl struct {
-                Type string `json:"type"`
-                Cols int    `json:"cols"`
-                Rows int    `json:"rows"`
-            }
-            if json.Unmarshal(msg, &ctrl) == nil && ctrl.Type == "resize" {
-                session.WindowChange(ctrl.Rows, ctrl.Cols)
-                continue
-            }
-        }
-
-        // Regular input
-        stdin.Write(msg)
-    }
-}
-```
-
---
-
-## Sprint 3 — SFTP + Polish (Day 11-15)
-
-**Goal**: SFTP browser + security + settings.
-
-### Day 11-12: SFTP Browser
-
-| # | Task | Files to Create | Verify |
-|---|------|----------------|--------|
-| 3.1 | SFTP REST handlers | `app/backend/bridge/sftp.go` | All 7 endpoints work |
-| 3.2 | SFTPScreen | `app/frontend/src/screens/SFTPScreen.tsx` | Dual pane visible |
-| 3.3 | FileList component | `app/frontend/src/components/FileList.tsx` | Files listed with columns |
-| 3.4 | LocalPane component | `app/frontend/src/components/LocalPane.tsx` | Local files |
-| 3.5 | RemotePane component | `app/frontend/src/components/RemotePane.tsx` | Remote files |
-| 3.6 | TransferQueue | `app/frontend/src/components/TransferQueue.tsx` | Transfer progress |
-| 3.7 | SFTPToolbar | `app/frontend/src/components/SFTPToolbar.tsx` | Upload/download buttons |
-| 3.8 | Context menu | `app/frontend/src/components/SFTPContextMenu.tsx` | File operations |
-
-### Day 13: Security + Vault
-
-| # | Task | Files to Create | Verify |
-|---|------|----------------|--------|
-| 3.9 | VaultScreen | `app/frontend/src/screens/VaultScreen.tsx` | Password prompt |
-| 3.10 | KnownHostDialog | `app/frontend/src/components/KnownHostDialog.tsx` | Fingerprint verify |
-| 3.11 | PasswordPrompt | `app/frontend/src/components/PasswordPrompt.tsx` | Reusable prompt |
-| 3.12 | Auto-lock logic | `app/frontend/src/hooks/useAutoLock.ts` | Locks after inactivity |
-
-### Day 14: Settings Screen
-
-| # | Task | Files to Create | Verify |
-|---|------|----------------|--------|
-| 3.13 | SettingsScreen | `app/frontend/src/screens/SettingsScreen.tsx` | Tabbed settings |
-| 3.14 | AppearanceSettings | `app/frontend/src/components/settings/Appearance.tsx` | Theme, font |
-| 3.15 | TerminalSettings | `app/frontend/src/components/settings/Terminal.tsx` | Scrollback, cursor |
-| 3.16 | ConnectionSettings | `app/frontend/src/components/settings/Connection.tsx` | Timeout, keepalive |
-| 3.17 | VaultSettings | `app/frontend/src/components/settings/Vault.tsx` | Password, auto-lock |
-| 3.18 | GeneralSettings | `app/frontend/src/components/settings/General.tsx` | About, data dir |
-
-### Day 15: Mobile Setup
-
-| # | Task | Files to Create | Verify |
-|---|------|----------------|--------|
-| 3.19 | gomobile build script | `mobile/gomobile/build.sh` | Compiles to .aar/.xcframework |
-| 3.20 | Android WebView app | `mobile/android/` | App runs on emulator |
-| 3.21 | iOS WebView app | `mobile/ios/` | App runs on simulator |
-| 3.22 | Mobile responsive CSS | `app/frontend/src/styles/mobile.css` | Touch-friendly |
-
---
-
-## Sprint 4 — Advanced Features (Day 16-20)
-
-**Goal**: Port forwarding + import/export + jump hosts.
-
-### Day 16-17: Port Forwarding
-
-| # | Task | Files to Create | Verify |
-|---|------|----------------|--------|
-| 4.1 | Forward model + storage | `app/backend/bridge/portforward.go` | CRUD works |
-| 4.2 | Local forwarding | `app/backend/ws/portforward.go` | Local tunnel works |
-| 4.3 | Remote forwarding | `app/backend/ws/portforward.go` | Remote tunnel works |
-| 4.4 | Dynamic forwarding | `app/backend/ws/portforward.go` | SOCKS5 proxy works |
-| 4.5 | PortForwardScreen | `app/frontend/src/screens/PortForwardScreen.tsx` | List + add form |
-| 4.6 | ForwardCard component | `app/frontend/src/components/ForwardCard.tsx` | Status + controls |
-
-### Day 18: Import/Export
-
-| # | Task | Files to Create | Verify |
-|---|------|----------------|--------|
-| 4.7 | SSH config parser | `app/backend/bridge/import.go` | Parses ~/.ssh/config |
-| 4.8 | CSV import | `app/backend/bridge/import.go` | Parses CSV |
-| 4.9 | Export handler | `app/backend/bridge/export.go` | Encrypted JSON export |
-| 4.10 | ImportScreen | `app/frontend/src/screens/ImportScreen.tsx` | Drag & drop UI |
-
-### Day 19-20: Jump Hosts + Proxy
-
-| # | Task | Files to Create | Verify |
-|---|------|----------------|--------|
-| 4.11 | Jump host chain | `app/backend/ws/jump.go` | Multi-hop SSH works |
-| 4.12 | SOCKS5 proxy | `app/backend/ws/proxy.go` | Proxy before SSH |
-| 4.13 | AdvancedHostForm | `app/frontend/src/components/AdvancedHostForm.tsx` | Jump host selector |
-
---
-
-## Sprint 5 — Platform Polish (Day 21-25)
-
-**Goal**: Desktop polish + performance + mobile.
-
-### Day 21-22: Desktop Enhancements
-
-| # | Task | Files to Create | Verify |
-|---|------|----------------|--------|
-| 5.1 | Native menu bar | `app/electron/menu.ts` | File/Edit/View/Help |
-| 5.2 | System tray | `app/electron/tray.ts` | Tray icon + menu |
-| 5.3 | Global shortcuts | `app/electron/shortcuts.ts` | Cmd+`, Cmd+N |
-| 5.4 | Window state | `app/electron/state.ts` | Position/size saved |
-| 5.5 | Auto-update | `app/electron/updater.ts` | Update prompt |
-| 5.6 | OS Keychain | `app/electron/keychain.ts` | Store vault key |
-
-### Day 23: Performance Optimization
-
-| # | Task | Files to Create | Verify |
-|---|------|----------------|--------|
-| 5.7 | SSH connection pool | `app/backend/ws/pool.go` | Reuse connections |
-| 5.8 | Buffer pools | `app/backend/ws/buffers.go` | sync.Pool for buffers |
-| 5.9 | Virtual scrolling | `app/frontend/src/components/VirtualList.tsx` | 1000+ hosts smooth |
-| 5.10 | Code splitting | `app/frontend/src/router.tsx` | Lazy load screens |
-| 5.11 | React.memo | Various components | No unnecessary re-renders |
-| 5.12 | WebGL renderer | `app/frontend/src/components/XTermWrapper.tsx` | Fast terminal render |
-
-### Day 24-25: Mobile Polish
-
-| # | Task | Files to Create | Verify |
-|---|------|----------------|--------|
-| 5.13 | Android gomobile | `mobile/android/` | .aar compiled |
-| 5.14 | iOS gomobile | `mobile/ios/` | .xcframework compiled |
-| 5.15 | Mobile keyboard | `app/frontend/src/components/MobileKeyboard.tsx` | Terminal toolbar |
-| 5.16 | Gesture navigation | `app/frontend/src/hooks/useGesture.ts` | Swipe to switch tabs |
-| 5.17 | Landscape handling | `app/frontend/src/styles/mobile.css` | Responsive layout |
-| 5.18 | Bluetooth keyboard | `app/frontend/src/hooks/useKeyboard.ts` | External keyboard |
-
---
-
-## Dependency Graph
-
-```
-Sprint 0 (Scaffolding)
-    │
-    ├── Sprint 1 (Foundation)
-    │       │
-    │       ├── Sprint 2 (Core Features)
-    │       │       │
-    │       │       ├── Sprint 3 (SFTP + Polish)
-    │       │       │       │
-    │       │       │       └── Sprint 5 (Platform Polish)
-    │       │       │
-    │       │       └── Sprint 4 (Advanced Features)
-    │       │               │
-    │       │               └── Sprint 5 (Platform Polish)
-```
-
-**Critical path**: Sprint 0 → Sprint 1 → Sprint 2 → Sprint 5
-
-**Parallel tracks**:
- Sprint 3 and Sprint 4 can be done in parallel
- Sprint 5 can start after Sprint 2 (desktop polish), Sprint 3 (SFTP mobile), Sprint 4 (advanced mobile)
-
---
-
-## File Creation Summary
-
-| Sprint | New Files | Directories |
-|--------|-----------|-------------|
-| Sprint 0 | 12 | 6 |
-| Sprint 1 | 23 | 2 |
-| Sprint 2 | 16 | 2 |
-| Sprint 3 | 22 | 4 |
-| Sprint 4 | 13 | 1 |
-| Sprint 5 | 18 | 2 |
-| **Total** | **104** | **17** |
@@ -1,316 +0,0 @@
-# Hostkeeper V2 — Timeline & Milestones
-
-> **Status**: V2 Planning Complete
-> **Last Updated**: 2026-06-29
-> **Start Date**: 2026-06-30 (estimated)
-> **Target MVP**: 2026-08-07 (estimated)
-
---
-
-## 1. Timeline Overview
-
-Total estimated: **25-30 working days** (~6 minggu calendar, 1-2 minggu buffer)
-
-```
-Minggu 1  │ Sprint 0 ─ Sprint 1 ─ │──── Foundation
-Minggu 2  │ Sprint 2 ─────────────│──── Core (Terminal)
-Minggu 3  │ Sprint 3 ─────────────│──── SFTP + Polish
-Minggu 4  │ Sprint 4 ─────────────│──── Advanced
-Minggu 5  │ Sprint 5 ── Buffer ───│──── Polish + Release
-          └────────────────────────┘
-          26 Jun   10 Jul   24 Jul   7 Aug
-```
-
---
-
-## 2. Detailed Timeline
-
-### Phase 0: Foundation (Sprint 0 + Sprint 1)
-**6 working days — 30 Jun s.d. 7 Jul**
-
-| Day | Date | Sprint | Deliverable | Milestone |
-|-----|------|--------|-------------|-----------|
-| 1 | 30 Jun | Sprint 0 | Go module, Electron shell, Vite scaffold | App starts, shows "Hostkeeper V2" |
-| 2 | 1 Jul | Sprint 0 | Health endpoint, middleware, build script | `curl /api/health` returns OK |
-| 3 | 2 Jul | Sprint 1 | Host CRUD API (6 endpoints) | `curl POST /api/hosts` returns 201 |
-| 4 | 3 Jul | Sprint 1 | Key + Snippet CRUD API | All CRUD works via curl |
-| 5 | 4 Jul | Sprint 1 | Groups + Config + Vault API | Group tree returned |
-| 6 | 7 Jul | Sprint 1 | Web UI scaffold (layout, router, theme) | Navigation works, sidebar visible |
-
-**Milestone M1 — API Complete (7 Jul)**
- All REST API endpoints functional
- Storage integration with V1 `pkg/storage`
- Web UI layout renders
-
---
-
-### Phase 1: Core Features (Sprint 2)
-**5 working days — 8 Jul s.d. 14 Jul**
-
-| Day | Date | Deliverable | Milestone |
-|-----|------|-------------|-----------|
-| 7 | 8 Jul | Host List screen + HostForm UI | Add/edit host from browser |
-| 8 | 9 Jul | HostForm: auth, tags, group picker | All form fields work |
-| 9 | 10 Jul | WebSocket handler (Go) | Terminal WS connects |
-| 10 | 11 Jul | XTermWrapper + terminal UI | Terminal renders, keystrokes work |
-| 11 | 14 Jul | TabBar + multi-tab + snippet panel | Multi-tab terminal with snippets |
-
-**Milestone M2 — Terminal Works (14 Jul)**
- SSH terminal via WebSocket
- Multi-tab support
- Snippet injection
-
---
-
-### Phase 2: SFTP + Security (Sprint 3)
-**5 working days — 15 Jul s.d. 21 Jul**
-
-| Day | Date | Deliverable | Milestone |
-|-----|------|-------------|-----------|
-| 12 | 15 Jul | SFTP REST handlers (ls, upload, download) | SFTP API works via curl |
-| 13 | 16 Jul | SFTP: mkdir, rm, rename, chmod | File operations work |
-| 14 | 17 Jul | SFTPScreen + dual pane UI | SFTP browser functional |
-| 15 | 18 Jul | Vault unlock + known hosts dialog | Security flow works |
-| 16 | 21 Jul | Settings screen (all tabs) | Settings persist |
-
-**Milestone M3 — SFTP + Vault (21 Jul)**
- SFTP file browser with upload/download
- Vault lock/unlock flow
- Settings customization
-
---
-
-### Phase 3: Advanced Features (Sprint 4)
-**5 working days — 22 Jul s.d. 28 Jul**
-
-| Day | Date | Deliverable | Milestone |
-|-----|------|-------------|-----------|
-| 17 | 22 Jul | PortForward CRUD + local tunnel | Local port forward works |
-| 18 | 23 Jul | Remote + dynamic forwarding | All forward types work |
-| 19 | 24 Jul | Import: SSH config + CSV parser | Bulk import works |
-| 20 | 25 Jul | Export: all data encrypted | Export/import round-trip |
-| 21 | 28 Jul | Jump host + proxy support | Multi-hop SSH works |
-
-**Milestone M4 — Advanced Complete (28 Jul)**
- Port forwarding (local/remote/dynamic)
- Import/export
- Jump hosts + proxy
-
---
-
-### Phase 4: Polish & Release (Sprint 5)
-**5 working days — 29 Jul s.d. 4 Aug**
-
-| Day | Date | Deliverable | Milestone |
-|-----|------|-------------|-----------|
-| 22 | 29 Jul | Electron: menu, tray, shortcuts | Desktop polish complete |
-| 23 | 30 Jul | OS Keychain + auto-update | Keychain integration |
-| 24 | 31 Jul | Performance optimization | 1000 hosts smooth, memory < 200MB |
-| 25 | 1 Aug | Android gomobile + WebView | Android app runs |
-| 26 | 4 Aug | iOS gomobile + WKWebView | iOS app runs |
-
-**Milestone M5 — Release Candidate (4 Aug)**
- All features complete
- Desktop and mobile builds
- Performance targets met
-
---
-
-### Buffer: 3 days (5 Aug s.d. 7 Aug)
-
-| Day | Date | Activity |
-|-----|------|----------|
-| 27 | 5 Aug | Bug fixes from integration testing |
-| 28 | 6 Aug | Documentation finalization |
-| 29 | 7 Aug | Release v2.0.0 |
-
-**Milestone M6 — v2.0.0 Release (7 Aug)**
- All platforms built and signed
- Release notes complete
- Artifacts uploaded to GitHub
-
---
-
-## 3. Critical Path
-
-```
-Sprint 0 ── Sprint 1 ── Sprint 2 ── Sprint 5 ── Release
-  1 day       5 days      5 days      5 days      3 days
-  ─────────────────────────────────────────────────────────
-  19 days minimum (no parallel work)
-```
-
-### Parallel Work Opportunities
-
-| Sprint | Can run in parallel with | Notes |
-|--------|-------------------------|-------|
-| Sprint 1 | — | Must complete before Sprint 2 |
-| Sprint 2 | — | Must complete before Sprint 3/4/5 |
-| Sprint 3 | Sprint 4 | SFTP ≠ Port forwarding, different files |
-| Sprint 4 | Sprint 3 | Independent features |
-| Sprint 5 | Sprint 3, Sprint 4 | Desktop polish can start early |
-
-**Optimistic timeline** (with parallelism): 22 days
-**Conservative timeline** (sequential): 29 days
-
---
-
-## 4. Dependency Graph
-
-```
-Sprint 0 (Scaffolding)
-  │
-  ▼
-Sprint 1 (Foundation API)
-  │
-  ▼
-Sprint 2 (SSH Terminal) ⭐ CRITICAL PATH
-  │
-  ├────▶ Sprint 3 (SFTP + Security) ────▶ Sprint 5 (Desktop Polish)
-  │                                                │
-  └────▶ Sprint 4 (Advanced)           ────────────┘
-                                                      │
-                                                      ▼
-                                                  Release v2.0.0
-```
-
-**Critical path**: Sprint 0 → Sprint 1 → Sprint 2 → Sprint 5 → Release
-
-**Fastest possible**: 22 hari (Sprint 3 + 4 done in parallel with Sprint 5)
-
---
-
-## 5. Milestone Summary
-
-| Milestone | Date | Deliverable | Dependency |
-|-----------|------|-------------|------------|
-| **M1** | 7 Jul | All REST API endpoints + Web UI scaffold | Sprint 0 + Sprint 1 |
-| **M2** | 14 Jul | SSH terminal with multi-tab | M1 |
-| **M3** | 21 Jul | SFTP browser + vault + settings | M2 |
-| **M4** | 28 Jul | Port forwarding + import/export + jump hosts | M2 |
-| **M5** | 4 Aug | Desktop polish + mobile apps | M2, M3, M4 |
-| **M6** | 7 Aug | **v2.0.0 Release** | M5 |
-
---
-
-## 6. Weekly Breakdown
-
-### Week 1 (30 Jun - 4 Jul) — Foundation
-```
-Mon 30: [Sprint 0] Go scaffold + Electron shell
-Tue  1: [Sprint 0] Build script + middleware
-Wed  2: [Sprint 1] Host CRUD API
-Thu  3: [Sprint 1] Key + Snippet CRUD API
-Fri  4: [Sprint 1] Groups + Config + Vault API
-```
-
-### Week 2 (7 Jul - 11 Jul) — API + UI Scaffold
-```
-Mon  7: [Sprint 1] Web UI scaffold (layout, router, theme)    ← M1
-Tue  8: [Sprint 2] Host List screen + HostForm
-Wed  9: [Sprint 2] HostForm complete (auth, tags, groups)
-Thu 10: [Sprint 2] WebSocket handler (Go)
-Fri 11: [Sprint 2] XTermWrapper + terminal rendering
-```
-
-### Week 3 (14 Jul - 18 Jul) — Terminal + SFTP
-```
-Mon 14: [Sprint 2] TabBar + multi-tab + snippet panel          ← M2
-Tue 15: [Sprint 3] SFTP REST handlers
-Wed 16: [Sprint 3] File operations (mkdir, rm, rename)
-Thu 17: [Sprint 3] SFTPScreen + dual pane UI
-Fri 18: [Sprint 3] Vault unlock + known hosts dialog
-```
-
-### Week 4 (21 Jul - 25 Jul) — SFTP Settings + Advanced
-```
-Mon 21: [Sprint 3] Settings screen (all tabs)                  ← M3
-Tue 22: [Sprint 4] PortForward CRUD + local tunnel
-Wed 23: [Sprint 4] Remote + dynamic forwarding
-Thu 24: [Sprint 4] Import (SSH config, CSV)
-Fri 25: [Sprint 4] Export + jump hosts
-```
-
-### Week 5 (28 Jul - 1 Aug) — Advanced + Polish
-```
-Mon 28: [Sprint 4] Proxy support                               ← M4
-Tue 29: [Sprint 5] Electron: menu, tray, shortcuts
-Wed 30: [Sprint 5] OS Keychain + auto-update
-Thu 31: [Sprint 5] Performance optimization
-Fri  1: [Sprint 5] Android gomobile + WebView
-```
-
-### Week 6 (4 Aug - 7 Aug) — Mobile + Release
-```
-Mon  4: [Sprint 5] iOS gomobile + WKWebView                    ← M5
-Tue  5: [Buffer] Bug fixes
-Wed  6: [Buffer] Documentation
-Thu  7: [Release] v2.0.0                                       ← M6
-```
-
---
-
-## 7. Risk Buffer
-
-| Risk | Impact | Probability | Mitigation | Buffer needed |
-|------|--------|-------------|------------|---------------|
-| Terminal WebSocket complexity | High | Medium | Use proven pattern from docs | +1 day |
-| Mobile gomobile compilation | Medium | Medium | Start early, test on emulator | +1 day |
-| Electron auto-update signing | Medium | Low | Prepare certificates early | — |
-| Performance issues (1000 hosts) | Medium | Low | Virtual scrolling already planned | — |
-| Unknown V1 package compatibility | Low | Low | V1 packages are framework-agnostic | — |
-| UX polish takes longer | Medium | Medium | Prioritize function over beauty | +1 day |
-
-**Total buffer**: 3 days (included in timeline as 5-7 Aug)
-
---
-
-## 8. Effort by Technology
-
-| Technology | Days | % of total | Sprint |
-|------------|------|------------|--------|
-| Go (backend) | 10 | 34% | S0, S1, S2, S3, S4 |
-| React/TypeScript (frontend) | 10 | 34% | S1, S2, S3, S4, S5 |
-| Electron (desktop) | 3 | 10% | S0, S5 |
-| Mobile (gomobile + WebView) | 2 | 7% | S3, S5 |
-| DevOps (build, CI/CD) | 2 | 7% | S0, S5 |
-| Testing + bug fixes | 2 | 7% | All |
-| **Total** | **29** | **100%** | |
-
---
-
-## 9. What NOT in Scope (Post-MVP)
-
-| Feature | Reason |
-|---------|--------|
-| Cloud sync | Requires backend server, Phase 3 |
-| Team vault | Requires multi-user auth, Phase 3 |
-| Multiplayer terminal | Requires relay server, Phase 3 |
-| AI command generation | LLM API integration, nice-to-have |
-| Serial console | Niche use case, low priority |
-| Mosh support | Requires additional library |
-| Telnet support | Legacy protocol, low priority |
-
---
-
-## 10. Progress Tracking
-
-**How to update this timeline**:
-1. At the end of each day, mark `[x]` for completed tasks
-2. If a task takes longer, adjust subsequent dates
-3. Update `docs/v2/PROGRESS.md` with actual completion dates
-
-```markdown
-### Week 1 Progress
-[x] Mon 30 Jun: [Sprint 0] Go scaffold + Electron shell
-[ ] Tue  1 Jul: [Sprint 0] Build script + middleware
-[ ] Wed  2 Jul: [Sprint 1] Host CRUD API
-[ ] Thu  3 Jul: [Sprint 1] Key + Snippet CRUD API
-[ ] Fri  4 Jul: [Sprint 1] Groups + Config + Vault API
-```
-
---
-
-**Target**: v2.0.0 Release by **7 August 2026**
-**Best case**: 22 July (parallel work, no blockers)
-**Worst case**: 14 August (1 week buffer used + delays)
@@ -0,0 +1,37 @@
+# Hostkeeper V1 — CLI/TUI
+
+> **Status**: FROZEN — no further development.
+> Pembuatan V2 dilakukan di folder `../app/` dan `../mobile/`.
+
+Hostkeeper V1 adalah SSH/SFTP management tool berbasis CLI + TUI (Bubble Tea).
+
+## Quick Start
+
+```bash
+cd v1
+make build
+./hostkeeper tui
+```
+
+## Dokumentasi
+
+- [Architecture](docs/ARCHITECTURE.md)
+- [Installation](docs/INSTALLATION.md)
+- [Usage](docs/USAGE.md)
+- [Test Plan](docs/TEST_PLAN.md)
+- [Project State](PROJECT_STATE.md)
+
+## Tech Stack
+
+- Go 1.26+
+- Cobra (CLI)
+- Bubble Tea (TUI)
+- golang.org/x/crypto/ssh
+
+## Test
+
+```bash
+cd v1
+make test
+# 105 tests passing
+```
@@ -0,0 +1,128 @@
+# Architecture
+
+## Overview
+
+Hostkeeper follows a layered architecture:
+
+```
+CLI Layer (cmd/hostkeeper/)
+  |
+  | calls
+  v
+Application Layer (pkg/)
+  |
+  | calls
+  v
+Storage Layer (pkg/config/, pkg/storage/)
+  |
+  | reads/writes
+  v
+File System (~/.config/hostkeeper/)
+```
+
+## Directory Structure
+
+```
+cmd/hostkeeper/       — CLI commands (Cobra)
+  ├── main.go         — Entry point
+  ├── root.go         — Root command setup
+  ├── add.go          — Add host command
+  ├── list.go         — List hosts command
+  ├── connect.go      — Connect command
+  ├── edit.go         — Edit host command
+  ├── delete.go       — Delete host command
+  ├── export.go       — Export command
+  ├── import.go       — Import command
+  ├── tui.go          — TUI command entry
+  ├── version.go      — Version command
+  ├── completion.go   — Shell completion
+  └── *_test.go       — CLI command tests
+
+pkg/                  — Library code
+  ├── config/         — Configuration and data directory
+  ├── models/         — Data models (Host, Key, Snippet)
+  ├── storage/        — File and export/import operations
+  ├── errors/         — Error types
+  └── tui/            — TUI implementation (Bubble Tea)
+
+test/                 — Test suites
+  ├── integration/    — End-to-end integration tests
+  └── storage/        — Storage tests
+
+docs/                 — Documentation
+  ├── plans/          — Design and implementation plans
+  ├── INSTALLATION.md
+  ├── USAGE.md
+  └── ARCHITECTURE.md
+```
+
+## Key Components
+
+### Models (`pkg/models/`)
+
+The core data structures:
+
+- **Host** — SSH host with address, credentials, group, tags
+- **Key** — SSH key metadata
+- **Snippet** — Reusable connection snippets
+
+### Configuration (`pkg/config/`)
+
+Manages application configuration, data directory path, and initialization.
+
+### Storage (`pkg/storage/`)
+
+Handles persistent storage:
+- File-based JSON storage per data type
+- Export/import with replace and merge strategies
+- File permission enforcement (0600)
+
+### CLI Layer (`cmd/hostkeeper/`)
+
+Each command follows a consistent pattern:
+1. Parse flags
+2. Load config and storage
+3. Execute business logic
+4. Format output
+
+### TUI (`pkg/tui/`)
+
+Bubble Tea model with:
+- Screen-based navigation (extensible for future screens)
+- Host list view with styled output
+- Keyboard-driven interaction
+
+## Data Flow
+
+### Adding a Host
+
+```
+User → hostkeeper add (flags) → parse args → Host model → storage.SaveHost() → JSON file
+```
+
+### Connecting to a Host
+
+```
+User → hostkeeper connect <name> → findHost() by ID → resolve key → exec native SSH or Go SSH
+```
+
+### Export/Import
+
+```
+Export: storage → marshal JSON → write file
+Import: read file → unmarshal → strategy (merge/replace) → save all
+```
+
+## Security
+
+- Credential files stored with `0600` permissions
+- SSH key content stored within host credentials
+- Direct mode uses Go SSH client (no shell, command execution only)
+- Native SSH mode delegates all terminal handling to system SSH
+
+## Future Architecture
+
+- SQLite database for improved query capabilities
+- Encrypted credential storage (age/gpg)
+- Configuration encryption
+- Plugin system for custom authentication methods
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
swanadiva	43a19b723a	feat: Sprint 0 — GoFiber + HTMX + TailwindCSS v4 scaffolding - Go module: git.tukangketik.id/swanadiva/hostkeeper/v2 - GoFiber v2 server with static, template engine, middleware - HTMX + Alpine.js (downloaded from CDN) - TailwindCSS v4 with custom theme (Lumina System colors) - Custom CSS: dot-grid, glassmorphism, animations, toggle, modal - Layout template (sidebar nav + header + main) - Dashboard page with host list, search, filter, view toggle - Health endpoint: GET /api/health	2026-07-07 12:18:39 +07:00
swanadiva	a0c8483c0e	docs: migrate all planning docs from React to GoFiber + HTMX - New ARCHITECTURE_HTMX.md — comprehensive HTMX architecture doc - ARCHITECTURE.md — updated to point to HTMX version - UI_COMPONENTS.md — replaced React tree with HTMX partials - SPRINT_PLAN.md — all sprint tasks updated for HTMX - BUILD_SYSTEM.md — simplified (no Vite, no npm) - TIMELINE.md — 3.5 week HTMX timeline - PROGRESS.md — updated status + HTMX - AGENTS.md — updated checkpoint with HTMX decision	2026-07-07 12:15:19 +07:00
swanadiva	c215d68c81	refactor: flatten docs/ — move V2 docs from docs/v2/ to docs/ - git mv docs/v2/*.md docs/ (11 planning documents) - Remove empty docs/v2/ directory - Update all references: AGENTS.md, CHANGELOG.md, README.md, ARCHITECTURE.md - Fix outdated repo tree in ARCHITECTURE.md to match actual structure	2026-07-07 12:04:59 +07:00
swanadiva	7794ca554b	chore: move V1 plans to v1/docs/plans/ + create root AGENTS.md - git mv docs/plans/ (V1 planning docs) into v1/docs/plans/ - Create AGENTS.md as AI session checkpoint for seamless continuation - Root now clean: only V2-related files remain	2026-07-07 12:01:52 +07:00
swanadiva	847989df75	refactor: move V1 code into v1/ subdirectory - git mv cmd/ internal/ pkg/ test/ go.mod go.sum Makefile build.sh docs/ v1/ - Create v1/README.md with V1 documentation - Update root README for V1 + V2 structure - V1 still builds (cd v1 && go build ./cmd/hostkeeper) and 105 tests pass - Root is now clean for V2 development	2026-07-07 11:56:27 +07:00