fix: handle null hostOptions when no active hosts exist

fix: terminal WebSocket connection — manage xterm containers in JS
- Remove Alpine x-for template for xterm containers (async rendering bug) - Add static #xterm-wrapper div, JS creates/removes container elements directly - addTab() uses document.createElement + appendChild for instant DOM - switchTab() toggles display:block/none, closeTab() removes from DOM - Add console.log for WebSocket open/close/error debugging - Terminal now connects on page load
2026-07-09 19:41:59 +07:00 · 2026-07-09 19:28:15 +07:00 · 2026-07-09 18:40:35 +07:00 · 2026-07-09 18:32:33 +07:00 · 2026-07-09 18:27:47 +07:00 · 2026-07-09 18:21:45 +07:00
146 changed files with 8907 additions and 3575 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,221 @@
 # Hostkeeper V2 — AI Session Checkpoint
 > **Purpose**: Memungkinkan AI agent berikutnya melanjutkan development tanpa mengulang atau merusak.
 > **Last Updated**: 2026-07-07
 > **Current Phase**: UI Fix — memperbaiki 107 visual issue dari `docs/PERBAIKANUI.md`
 ---
 ## 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/                             ← 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
 │   └── PERBAIKANUI.md               UI fix checklist (107 task)
 ├── 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 — Sprint 0—6 Complete
 ### ✅ 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)
 - **Sprint 0**: GoFiber v2 server + HTMX + Alpine.js + TailwindCSS v4 + custom CSS + layout + nav + health endpoint
 - **Sprint 1**: Host model (8 mock hosts), dashboard CRUD, search/filter HTMX, grid/list Alpine toggle, add host modal (Alpine events), delete host (hx-delete), transfers panel
 - **Sprint 2**: Snippets + Keychain CRUD, clipboard.js, utils.js
 - **Sprint 3**: Settings + Brief, tabs, toggles, danger zone
 - **Sprint 4**: SFTP Dual-Pane, breadcrumb, file icons by type, create/delete
 - **Sprint 5**: Terminal + xterm.js + WebSocket mock shell, tab management
 - **Sprint 6**: JSON file persistence (store package), `go.mod replace` directive for V1 crypto+knownhosts, model SSH fields, real SSH client for terminal (falls back to mock), dynamic host list from server
 ### 🐛 UI Fix Checklist — Lihat `docs/PERBAIKANUI.md`
 - **107 task** teridentifikasi dari audit visual vs template React
 - Acuan utama: 7 file di `template/src/components/`
 - Setiap task dihapus dari checklist setelah selesai
 - Urutan: Dashboard (P0) → Terminal (P0) → Snippets (P0) → Keychain/SFTP/Settings/Brief (P1)
 ---
 ## 5. Struktur Folder V2 (Aktual)
 ```
 app/backend/
 ├── main.go                    ← Fiber app entry
 ├── go.mod                     ← module git.tukangketik.id/swanadiva/hostkeeper/v2
 ├── internal/
 │   ├── handler/               ← HTTP handlers (render HTML)
 │   │   ├── dashboard.go
 │   │   ├── snippets.go
 │   │   ├── keychain.go
 │   │   ├── terminal.go
 │   │   ├── sftp.go
 │   │   ├── settings.go
 │   │   ├── brief.go
 │   │   └── health.go
 │   ├── model/                 ← Go structs (Host, Snippet, Key, dll)
 │   │   ├── host.go
 │   │   ├── snippet.go
 │   │   └── keychain.go
 │   ├── store/                 ← JSON file persistence (store package)
 │   │   ├── store.go
 │   │   ├── host.go
 │   │   ├── snippet.go
 │   │   ├── key.go
 │   │   ├── settings.go
 │   │   └── devices.go
 │   ├── sshconn/               ← Real SSH client for terminal
 │   │   └── client.go
 │   ├── template/              ← Template helper funcs
 │   └── middleware/             ← View data injection
 ├── static/
 │   ├── css/                   ← output.css + custom.css
 │   ├── js/                    ← htmx.min.js, alpine.min.js, utils.js, clipboard.js, terminal.js
 │   └── xterm/                 ← xterm.js lib
 └── views/                     ← Semua template flat (tidak ada subfolder partials/)
    ├── nav.html
    ├── index.html
    ├── host_list.html
    ├── host_modal.html
    ├── snippets.html
    ├── snippet_grid.html
    ├── snippet_modal.html
    ├── keychain.html
    ├── key_grid.html
    ├── key_modal.html
    ├── terminal.html
    ├── sftp.html
    ├── settings.html
    └── brief.html
 ```
 ---
 ## 6. Yang Harus Dilakukan Selanjutnya (UI Fix)
 1. Baca `docs/PERBAIKANUI.md` — 107 task teridentifikasi
 2. Urutan: Dashboard (P0) → Terminal (P0) → Snippets (P0) → Keychain (P1) → SFTP (P1) → Settings (P1) → Brief (P1) → Global (P1)
 3. Setiap selesai satu task, hapus dari checklist `docs/PERBAIKANUI.md`
 4. Verify: `cd app/backend && go build && ./backend` lalu buka http://localhost:1947
 ---
 ## 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` |
 | UI fix checklist | `docs/PERBAIKANUI.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/PROGRESS.md` — Status tracker for V2 development
- `docs/v2/ARCHITECTURE.md` — System architecture (GoFiber + React + Electron)
+- `docs/ARCHITECTURE.md` — System architecture (GoFiber + React + Electron)
- `docs/v2/API.md` — REST API + WebSocket specification
+- `docs/API.md` — REST API + WebSocket specification
- `docs/v2/DATA_MODELS.md` — Extended data models (Groups, PortForward, Workspace)
+- `docs/DATA_MODELS.md` — Extended data models (Groups, PortForward, Workspace)
- `docs/v2/UI_COMPONENTS.md` — React component tree + state management
+- `docs/UI_COMPONENTS.md` — React component tree + state management
- `docs/v2/UI_TERMIUS_REFERENCE.md` — Termius visual reference
+- `docs/UI_TERMIUS_REFERENCE.md` — Termius visual reference
- `docs/v2/SPRINT_PLAN.md` — Sprint-by-sprint task breakdown
+- `docs/SPRINT_PLAN.md` — Sprint-by-sprint task breakdown
- `docs/v2/BUILD_SYSTEM.md` — Cross-platform build pipeline
+- `docs/BUILD_SYSTEM.md` — Cross-platform build pipeline
- `docs/v2/PERFORMANCE.md` — Performance & stability guide
+- `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)
+V1 adalah versi CLI/TUI yang sudah selesai dan di-freeze. Semua kode ada di folder [`v1/`](v1/).
 - **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
 ```bash
-# Build from source
+cd v1
 git clone https://git.tukangketik.id/swanadiva/HostKeeper.git
 cd hostkeeper
 make build
-
+./hostkeeper tui
 # Or install directly
 go install git.tukangketik.id/swanadiva/hostkeeper/cmd/hostkeeper@latest
 ```
-### Usage
+Lihat [`v1/README.md`](v1/README.md) untuk dokumentasi lengkap.
-```bash
+## V2 (In Development) — GoFiber + React + Electron
 # Add a host (interactive)
 hostkeeper add
-# Or with flags
+V2 adalah rewrite dengan arsitektur baru:
-hostkeeper add myserver --host 192.168.1.10 --user admin --password mypass
+- **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
+Lihat [docs/](docs/) untuk dokumentasi perencanaan.
 hostkeeper list
-# Connect to host
+## Struktur Repository
 hostkeeper connect myserver
 # Edit host
 hostkeeper edit myserver
 # Delete host
 hostkeeper delete myserver
 # Launch TUI
 hostkeeper tui
 ```
-
+hostkeeper/
-## Core Commands
+├── v1/          ← V1 CLI/TUI (frozen)
-
+├── app/         ← V2 backend + frontend + electron
-| Command | Description |
+├── mobile/      ← V2 mobile wrapper
-|---------|-------------|
+├── template/    ← Referensi UI React (Lumina System)
-| `hostkeeper add [name]` | Add a new SSH host |
+└── docs/        ← Dokumentasi perencanaan V2
 | `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
 ```
 ### 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,35 @@
 root = "."
 tmp_dir = "tmp"
 [build]
  cmd = "go build -o ./tmp/backend main.go"
  full_bin = "./tmp/backend"
  delay = 200
  exclude_dir = ["assets", "tmp", "vendor", "node_modules"]
  exclude_file = []
  exclude_regex = []
  exclude_unchanged = false
  follow_symlink = false
  include_dir = ["internal", "views", "static", "."]
  include_ext = ["go", "html", "css", "js"]
  include_file = ["main.go"]
  kill_delay = "0s"
  log = "build-errors.log"
  send_interrupt = false
  stop_on_error = false
 [color]
  app = ""
  build = "yellow"
  main = "green"
  runner = "cyan"
  watcher = "blue"
 [log]
  time = false
 [misc]
  clean_on_exit = true
 [screen]
  clear_on_rebuild = false
@@ -0,0 +1,4 @@
 # Air hot-reload build artifacts
 tmp/
 build-errors.log
@@ -0,0 +1,33 @@
 module git.tukangketik.id/swanadiva/hostkeeper/v2
 go 1.26.4
 require (
 	git.tukangketik.id/swanadiva/hostkeeper v1.0.0
 	github.com/gofiber/contrib/websocket v1.3.4
 	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/clipperhouse/stringish v0.1.1 // indirect
 	github.com/clipperhouse/uax29/v2 v2.5.0 // indirect
 	github.com/fasthttp/websocket v1.5.8 // 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.19 // indirect
 	github.com/savsgio/gotils v0.0.0-20240303185622-093b76447511 // indirect
 	github.com/valyala/bytebufferpool v1.0.0 // indirect
 	github.com/valyala/fasthttp v1.52.0 // indirect
 	github.com/valyala/tcplisten v1.0.0 // indirect
 	golang.org/x/crypto v0.53.0 // indirect
 	golang.org/x/net v0.55.0 // indirect
 	golang.org/x/sys v0.46.0 // indirect
 )
 replace git.tukangketik.id/swanadiva/hostkeeper => ../../v1
@@ -0,0 +1,53 @@
 github.com/andybalholm/brotli v1.1.0 h1:eLKJA0d02Lf0mVpIDgYnqXcUn0GqVmEFny3VuID1U3M=
 github.com/andybalholm/brotli v1.1.0/go.mod h1:sms7XGricyQI9K10gOSf56VKKWS4oLer58Q+mhRPtnY=
 github.com/clipperhouse/stringish v0.1.1 h1:+NSqMOr3GR6k1FdRhhnXrLfztGzuG+VuFDfatpWHKCs=
 github.com/clipperhouse/stringish v0.1.1/go.mod h1:v/WhFtE1q0ovMta2+m+UbpZ+2/HEXNWYXQgCt4hdOzA=
 github.com/clipperhouse/uax29/v2 v2.5.0 h1:x7T0T4eTHDONxFJsL94uKNKPHrclyFI0lm7+w94cO8U=
 github.com/clipperhouse/uax29/v2 v2.5.0/go.mod h1:Wn1g7MK6OoeDT0vL+Q0SQLDz/KpfsVRgg6W7ihQeh4g=
 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/fasthttp/websocket v1.5.8 h1:k5DpirKkftIF/w1R8ZzjSgARJrs54Je9YJK37DL/Ah8=
 github.com/fasthttp/websocket v1.5.8/go.mod h1:d08g8WaT6nnyvg9uMm8K9zMYyDjfKyj3170AtPRuVU0=
 github.com/gofiber/contrib/websocket v1.3.4 h1:tWeBdbJ8q0WFQXariLN4dBIbGH9KBU75s0s7YXplOSg=
 github.com/gofiber/contrib/websocket v1.3.4/go.mod h1:kTFBPC6YENCnKfKx0BoOFjgXxdz7E85/STdkmZPEmPs=
 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.19 h1:v++JhqYnZuu5jSKrk9RbgF5v4CGUjqRfBm05byFGLdw=
 github.com/mattn/go-runewidth v0.0.19/go.mod h1:XBkDxAl56ILZc9knddidhrOlY5R/pDhgLpndooCuJAs=
 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/savsgio/gotils v0.0.0-20240303185622-093b76447511 h1:KanIMPX0QdEdB4R3CiimCAbxFrhB3j7h0/OvpYGVQa8=
 github.com/savsgio/gotils v0.0.0-20240303185622-093b76447511/go.mod h1:sM7Mt7uEoCeFSCBM+qBrqvEo+/9vdmj19wzp3yzUhmg=
 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.52.0 h1:wqBQpxH71XW0e2g+Og4dzQM8pk34aFYlA1Ga8db7gU0=
 github.com/valyala/fasthttp v1.52.0/go.mod h1:hf5C4QnVMkNXMspnsUlfM3WitlgYflyhHYoKol/szxQ=
 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/crypto v0.53.0 h1:QZ4Muo8THX6CizN2vPPd5fBGHyogrdK9fG4wLPFUsto=
 golang.org/x/crypto v0.53.0/go.mod h1:DNLU434OwVakk9PzuwV8w62mAJpRJL3vsgcfp4Qnsio=
 golang.org/x/net v0.55.0 h1:bcvxaJn3e1U6InsFWt1JUq1aSjnRxLzT2rtD2KfkDF8=
 golang.org/x/net v0.55.0/go.mod h1:L5U2KuzuOe1lY7Z+aWVIKK6qEeJXnXV9yzGA+WCHJww=
 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.46.0 h1:noSf2Fq6F8DBgS+LysIkx7rIExoNHJsxOAtPp4rthXw=
 golang.org/x/sys v0.46.0/go.mod h1:4GL1E5IUh+htKOUEOaiffhrAeqysfVGipDYzABqnCmw=
 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,15 @@
 package handler
 import "github.com/gofiber/fiber/v2"
 func Brief(c *fiber.Ctx) error {
 	data := fiber.Map{
 		"View":     "brief",
 		"Title":    "Quick Brief",
 		"NavItems": navItems,
 	}
 	if c.Get("HX-Request") != "" {
 		return c.Render("brief_content", data)
 	}
 	return c.Render("brief", data)
 }
@@ -0,0 +1,172 @@
 package handler
 import (
 	"strconv"
 	"github.com/gofiber/fiber/v2"
 	"git.tukangketik.id/swanadiva/hostkeeper/v2/internal/model"
 	"git.tukangketik.id/swanadiva/hostkeeper/v2/internal/store"
 )
 var hostStore = store.NewHostStore()
 var 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"},
 }
 func Dashboard(c *fiber.Ctx) error {
 	hosts := hostStore.All()
 	transfers := []model.Transfer{
 		{ID: "1", FileName: "backup_v4.tar.gz", Source: "production-api-01", Destination: "Local Machine", Progress: 82, Speed: "12.4 MB/s", Type: "download", Status: "transferring"},
 		{ID: "2", FileName: "assets_deploy.zip", Source: "Local Storage", Destination: "web-frontend-02", Progress: 35, Speed: "4.8 MB/s", Type: "upload", Status: "transferring"},
 	}
 	return c.Render("index", fiber.Map{
 		"View":      "hosts",
 		"Title":     "Hosts",
 		"Hosts":     hosts,
 		"Active":    countByStatus(hosts, "active"),
 		"Offline":   countByStatus(hosts, "offline"),
 		"NavItems":  navItems,
 		"Transfers": transfers,
 	})
 }
 func DashboardList(c *fiber.Ctx) error {
 	q := c.Query("q")
 	filter := c.Query("filter", "all")
 	hosts := hostStore.Search(q, filter)
 	return c.Render("host_list", fiber.Map{
 		"Hosts":   hosts,
 		"Active":  countByStatus(hosts, "active"),
 		"Offline": countByStatus(hosts, "offline"),
 	})
 }
 func parsePort(s string, def int) int {
 	i, err := strconv.Atoi(s)
 	if err != nil || i < 1 || i > 65535 {
 		return def
 	}
 	return i
 }
 func CreateHost(c *fiber.Ctx) error {
 	hostID := c.FormValue("hostId")
 	if hostID != "" {
 		return UpdateHost(c)
 	}
 	name := c.FormValue("name")
 	ip := c.FormValue("ip")
 	if name == "" || ip == "" {
 		return c.Status(400).SendString("name and ip required")
 	}
 	h := model.Host{
 		Name:     name,
 		IP:       ip,
 		OS:       c.FormValue("os"),
 		Provider: c.FormValue("provider"),
 		Type:     c.FormValue("type"),
 		Port:     parsePort(c.FormValue("port"), 22),
 		Username: c.FormValue("username"),
 		AuthType: c.FormValue("authType"),
 		Password: c.FormValue("password"),
 		Hostname: c.FormValue("hostname"),
 		Notes:    c.FormValue("notes"),
 	}
 	if h.Username == "" {
 		h.Username = "root"
 	}
 	if h.AuthType == "" {
 		h.AuthType = "key"
 	}
 	hostStore.AddFull(h)
 	hosts := hostStore.All()
 	return c.Render("host_list", fiber.Map{
 		"Hosts":   hosts,
 		"Active":  countByStatus(hosts, "active"),
 		"Offline": countByStatus(hosts, "offline"),
 	})
 }
 func UpdateHost(c *fiber.Ctx) error {
 	id := c.Params("id")
 	if id == "" {
 		id = c.FormValue("hostId")
 	}
 	existing, found := hostStore.Get(id)
 	if !found {
 		return c.Status(404).SendString("host not found")
 	}
 	if v := c.FormValue("name"); v != "" {
 		existing.Name = v
 	}
 	if v := c.FormValue("ip"); v != "" {
 		existing.IP = v
 	}
 	if v := c.FormValue("os"); v != "" {
 		existing.OS = v
 	}
 	if v := c.FormValue("provider"); v != "" {
 		existing.Provider = v
 	}
 	if v := c.FormValue("type"); v != "" {
 		existing.Type = v
 	}
 	if v := c.FormValue("port"); v != "" {
 		existing.Port = parsePort(v, 22)
 	}
 	if v := c.FormValue("username"); v != "" {
 		existing.Username = v
 	}
 	if v := c.FormValue("authType"); v != "" {
 		existing.AuthType = v
 	}
 	if v := c.FormValue("password"); v != "" {
 		existing.Password = v
 	}
 	if v := c.FormValue("hostname"); v != "" {
 		existing.Hostname = v
 	}
 	if v := c.FormValue("notes"); v != "" {
 		existing.Notes = v
 	}
 	hostStore.Update(existing)
 	hosts := hostStore.All()
 	return c.Render("host_list", fiber.Map{
 		"Hosts":   hosts,
 		"Active":  countByStatus(hosts, "active"),
 		"Offline": countByStatus(hosts, "offline"),
 	})
 }
 func DeleteHost(c *fiber.Ctx) error {
 	id := c.Params("id")
 	hostStore.Delete(id)
 	hosts := hostStore.All()
 	return c.Render("host_list", fiber.Map{
 		"Hosts":   hosts,
 		"Active":  countByStatus(hosts, "active"),
 		"Offline": countByStatus(hosts, "offline"),
 	})
 }
 func countByStatus(hosts []model.Host, status string) int {
 	n := 0
 	for _, h := range hosts {
 		if h.Status == status {
 			n++
 		}
 	}
 	return n
 }
@@ -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,44 @@
 package handler
 import (
 	"github.com/gofiber/fiber/v2"
 	"git.tukangketik.id/swanadiva/hostkeeper/v2/internal/store"
 )
 var keyStore = store.NewKeyStore()
 func Keychain(c *fiber.Ctx) error {
 	if c.Get("HX-Request") != "" {
 		return KeyGrid(c)
 	}
 	keys := keyStore.All()
 	return c.Render("keychain", fiber.Map{
 		"View":      "keychain",
 		"Title":     "Keychain",
 		"Keys":      keys,
 		"NavItems":  navItems,
 	})
 }
 func KeyGrid(c *fiber.Ctx) error {
 	q := c.Query("q", "")
 	keys := keyStore.Search(q)
 	return c.Render("credential_grid", fiber.Map{"Keys": keys})
 }
 func CreateKey(c *fiber.Ctx) error {
 	name := c.FormValue("name")
 	username := c.FormValue("username")
 	url := c.FormValue("url")
 	passphrase := c.FormValue("passphrase")
 	keyStore.Add(name, username, url, passphrase)
 	keys := keyStore.All()
 	return c.Render("credential_grid", fiber.Map{"Keys": keys})
 }
 func DeleteKey(c *fiber.Ctx) error {
 	id := c.Params("id")
 	keyStore.Delete(id)
 	keys := keyStore.All()
 	return c.Render("credential_grid", fiber.Map{"Keys": keys})
 }
@@ -0,0 +1,49 @@
 package handler
 import (
 	"github.com/gofiber/fiber/v2"
 	"git.tukangketik.id/swanadiva/hostkeeper/v2/internal/model"
 	"git.tukangketik.id/swanadiva/hostkeeper/v2/internal/store"
 )
 var deviceStore = model.NewDeviceStore()
 var settingsStore = store.NewSettingsStore()
 func Settings(c *fiber.Ctx) error {
 	data := fiber.Map{
 		"View":      "settings",
 		"Title":     "Settings",
 		"Config":    settingsStore.Get(),
 		"Devices":   deviceStore.All(),
 		"NavItems":  navItems,
 	}
 	if c.Get("HX-Request") != "" {
 		return c.Render("settings_content", data)
 	}
 	return c.Render("settings", data)
 }
 func UpdateConfig(c *fiber.Ctx) error {
 	cfg := settingsStore.Get()
 	if v := c.FormValue("theme"); v != "" { cfg.Theme = v }
 	if v := c.FormValue("fontSize"); v != "" { cfg.FontSize = parseInt(v, 14) }
 	if v := c.FormValue("scrollback"); v != "" { cfg.Scrollback = parseInt(v, 5000) }
 	if v := c.FormValue("autoLock"); v != "" { cfg.AutoLock = parseInt(v, 5) }
 	cfg.Keepalive = c.FormValue("keepalive") == "on"
 	cfg.CopyOnSelect = c.FormValue("copyOnSelect") == "on"
 	cfg.BellEnabled = c.FormValue("bellEnabled") == "on"
 	cfg.AutoReconnect = c.FormValue("autoReconnect") == "on"
 	cfg.BlinkCursor = c.FormValue("blinkCursor") == "on"
 	settingsStore.Update(cfg)
 	return c.Redirect("/settings", 303)
 }
 func parseInt(s string, def int) int {
 	i := 0
 	for _, c := range s {
 		if c < '0' || c > '9' { return def }
 		i = i*10 + int(c-'0')
 	}
 	if i == 0 { return def }
 	return i
 }
@@ -0,0 +1,82 @@
 package handler
 import (
 	"github.com/gofiber/fiber/v2"
 	"git.tukangketik.id/swanadiva/hostkeeper/v2/internal/model"
 )
 var fileStore = model.NewFileStore()
 func SFTP(c *fiber.Ctx) error {
 	local, remote := fileStore.All()
 	data := fiber.Map{
 		"View":            "sftp",
 		"Title":           "SFTP",
 		"LocalFiles":      local,
 		"RemoteFiles":     remote,
 		"LocalBreadcrumb": fileStore.LocalBreadcrumb,
 		"RemoteBreadcrumb": fileStore.RemoteBreadcrumb,
 		"NavItems":        navItems,
 	}
 	if c.Get("HX-Request") != "" {
 		return c.Render("sftp_content", data)
 	}
 	return c.Render("sftp", data)
 }
 func SFTPPane(c *fiber.Ctx) error {
 	pane := c.Query("pane", "local")
 	dir := c.Query("dir", "/")
 	local, remote := fileStore.All()
 	files := local
 	breadcrumb := fileStore.LocalBreadcrumb
 	if pane == "remote" {
 		files = remote
 		breadcrumb = fileStore.RemoteBreadcrumb
 	}
 	return c.Render("sftp_pane", fiber.Map{
 		"Pane":       pane,
 		"Files":      files,
 		"Breadcrumb": breadcrumb,
 		"CurrentDir": dir,
 	})
 }
 func CreateFolder(c *fiber.Ctx) error {
 	pane := c.FormValue("pane", "local")
 	name := c.FormValue("name")
 	if name != "" {
 		item := model.FileItem{
 			Name: name, Size: "—", Modified: "Just now",
 			Type: "folder", Permissions: "drwxr-xr-x",
 		}
 		if pane == "remote" {
 			fileStore.Remote = append([]model.FileItem{item}, fileStore.Remote...)
 		} else {
 			fileStore.Local = append([]model.FileItem{item}, fileStore.Local...)
 		}
 	}
 	files := fileStore.Local
 	if pane == "remote" { files = fileStore.Remote }
 	return c.Render("sftp_pane", fiber.Map{
 		"Pane": pane, "Files": files,
 		"Breadcrumb": fileStore.LocalBreadcrumb,
 	})
 }
 func DeleteFile(c *fiber.Ctx) error {
 	pane := c.Query("pane", "local")
 	name := c.Query("name")
 	files := &fileStore.Local
 	if pane == "remote" { files = &fileStore.Remote }
 	for i, f := range *files {
 		if f.Name == name {
 			*files = append((*files)[:i], (*files)[i+1:]...)
 			break
 		}
 	}
 	return c.Render("sftp_pane", fiber.Map{
 		"Pane": pane, "Files": *files,
 		"Breadcrumb": fileStore.LocalBreadcrumb,
 	})
 }
@@ -0,0 +1,88 @@
 package handler
 import (
 	"encoding/json"
 	"github.com/gofiber/fiber/v2"
 	"git.tukangketik.id/swanadiva/hostkeeper/v2/internal/model"
 	"git.tukangketik.id/swanadiva/hostkeeper/v2/internal/store"
 )
 func jsonOrEmpty(v interface{}) string {
 	b, err := json.Marshal(v)
 	if err != nil {
 		return "[]"
 	}
 	return string(b)
 }
 func allTags(snippets []model.Snippet) []string {
 	seen := map[string]bool{}
 	var out []string
 	for _, sn := range snippets {
 		for _, t := range sn.Tags {
 			if !seen[t] {
 				seen[t] = true
 				out = append(out, t)
 			}
 		}
 	}
 	return out
 }
 var snippetStore = store.NewSnippetStore()
 func Snippets(c *fiber.Ctx) error {
 	if c.Get("HX-Request") != "" {
 		return SnippetGrid(c)
 	}
 	snippets := snippetStore.All()
 	return c.Render("snippets", fiber.Map{
 		"View":          "snippets",
 		"Title":         "Snippets",
 		"Snippets":      snippets,
 		"SnippetsJSON":  jsonOrEmpty(snippets),
 		"AllTags":       allTags(snippets),
 		"NavItems":      navItems,
 	})
 }
 func SnippetGrid(c *fiber.Ctx) error {
 	q := c.Query("q", "")
 	collection := c.Query("collection", "")
 	tag := c.Query("tag", "")
 	snippets := snippetStore.Search(q, collection, tag)
 	return c.Render("snippet_grid", fiber.Map{
 		"Snippets":     snippets,
 		"SnippetsJSON": jsonOrEmpty(snippets),
 	})
 }
 func CreateSnippet(c *fiber.Ctx) error {
 	name := c.FormValue("name")
 	content := c.FormValue("content")
 	language := c.FormValue("language")
 	description := c.FormValue("description")
 	collection := c.FormValue("collection")
 	tagStr := c.FormValue("tags")
 	var tags []string
 	if tagStr != "" {
 		tags = []string{tagStr}
 	}
 	snippetStore.Add(name, content, language, tags, description, collection)
 	snippets := snippetStore.All()
 	return c.Render("snippet_grid", fiber.Map{
 		"Snippets":     snippets,
 		"SnippetsJSON": jsonOrEmpty(snippets),
 	})
 }
 func DeleteSnippet(c *fiber.Ctx) error {
 	id := c.Params("id")
 	snippetStore.Delete(id)
 	snippets := snippetStore.All()
 	return c.Render("snippet_grid", fiber.Map{
 		"Snippets":     snippets,
 		"SnippetsJSON": jsonOrEmpty(snippets),
 	})
 }
@@ -0,0 +1,224 @@
 package handler
 import (
 	"bufio"
 	"encoding/json"
 	"fmt"
 	"io"
 	"log"
 	"strings"
 	"time"
 	"github.com/gofiber/contrib/websocket"
 	"github.com/gofiber/fiber/v2"
 	"git.tukangketik.id/swanadiva/hostkeeper/v2/internal/sshconn"
 )
 func Terminal(c *fiber.Ctx) error {
 	hosts := hostStore.All()
 	type hostItem struct {
 		ID   string `json:"id"`
 		Name string `json:"name"`
 		IP   string `json:"ip"`
 	}
 	var available []hostItem
 	for _, h := range hosts {
 		if h.Status == "active" {
 			available = append(available, hostItem{h.ID, h.Name, h.IP})
 		}
 	}
 	hostsJSON, _ := json.Marshal(available)
 	selectedHost := c.Query("host", "")
 	data := fiber.Map{
 		"View":         "terminal",
 		"Title":        "Terminal",
 		"NavItems":     navItems,
 		"Hosts":        available,
 		"HostsJSON":    string(hostsJSON),
 		"SelectedHost": selectedHost,
 	}
 	if c.Get("HX-Request") != "" {
 		return c.Render("terminal_content", data)
 	}
 	return c.Render("terminal", data)
 }
 func TerminalWS(c *websocket.Conn) {
 	hostID := c.Params("host", "unknown")
 	log.Printf("WS connected: host=%s", hostID)
 	host, found := hostStore.Get(hostID)
 	if !found {
 		log.Printf("Host %s not found, using mock", hostID)
 		mockTerminal(c, hostID)
 		return
 	}
 	if host.Hostname == "" {
 		log.Printf("Host %s has no hostname, using mock (name=%s, ip=%s)", hostID, host.Name, host.IP)
 		mockTerminal(c, host.Name+" ("+host.IP+")")
 		return
 	}
 	client, err := sshconn.Dial(host)
 	if err != nil {
 		log.Printf("SSH failed for %s: %v, falling back to mock", hostID, err)
 		mockTerminal(c, hostID)
 		return
 	}
 	defer client.Close()
 	welcome := fmt.Sprintf("\x1b[1;32mConnected to %s (%s)\x1b[0m\r\n", host.Name, host.IP)
 	c.WriteMessage(websocket.TextMessage, []byte(welcome))
 	stdinR, stdinW := io.Pipe()
 	stdoutR, stdoutW := io.Pipe()
 	go func() {
 		scanner := bufio.NewScanner(stdoutR)
 		for scanner.Scan() {
 			c.WriteMessage(websocket.TextMessage, []byte(scanner.Text()+"\r\n"))
 		}
 	}()
 	go func() {
 		defer stdinW.Close()
 		for {
 			_, msg, err := c.ReadMessage()
 			if err != nil {
 				return
 			}
 			input := string(msg)
 			if input == "\x03" {
 				client.Close()
 				return
 			}
 			stdinW.Write([]byte(input))
 		}
 	}()
 	if err := client.Shell(stdinR, stdoutW, stdoutW, 24, 80); err != nil {
 		log.Printf("SSH session ended: %v", err)
 	}
 	log.Printf("WS disconnected: host=%s", hostID)
 }
 func mockTerminal(c *websocket.Conn, host string) {
 	welcome := fmt.Sprintf("\x1b[1;33m%s (mock mode)\x1b[0m\r\n\x1b[2mConnected at %s\x1b[0m\r\n\r\n", host, time.Now().Format(time.RFC822))
 	c.WriteMessage(websocket.TextMessage, []byte(welcome))
 	prompt := fmt.Sprintf("\x1b[1;34m%s:~$\x1b[0m ", host)
 	c.WriteMessage(websocket.TextMessage, []byte(prompt))
 	cwd := "~"
 	buf := ""
 	for {
 		_, msg, err := c.ReadMessage()
 		if err != nil {
 			break
 		}
 		for _, ch := range string(msg) {
 			switch {
 			case ch == '\r':
 				output := handleCommand(buf, host, &cwd)
 				c.WriteMessage(websocket.TextMessage, []byte(output+prompt))
 				buf = ""
 			case ch == '\x7f':
 				if len(buf) > 0 {
 					buf = buf[:len(buf)-1]
 					c.WriteMessage(websocket.TextMessage, []byte("\b \b"))
 				}
 			case ch == '\x03':
 				buf = ""
 				c.WriteMessage(websocket.TextMessage, []byte("^C\r\n"+prompt))
 			case ch >= ' ' && ch <= '~':
 				buf += string(ch)
 				c.WriteMessage(websocket.TextMessage, []byte(string(ch)))
 			}
 		}
 	}
 	log.Printf("Mock WS disconnected: host=%s", host)
 }
 func handleCommand(cmd, host string, cwd *string) string {
 	cmd = strings.TrimSpace(cmd)
 	if cmd == "" { return "" }
 	parts := strings.Fields(cmd)
 	if len(parts) == 0 { return "" }
 	switch parts[0] {
 	case "clear":
 		return "\x1b[2J\x1b[H"
 	case "exit", "logout":
 		return "logout\r\n\x1b[2J\x1b[H\x1b[1;31mConnection closed.\x1b[0m\r\n"
 	case "help":
 		return "HostKeeper Mock SSH Interactive Command Parser:\r\n" +
 			"  help          - Display this support manifest list\r\n" +
 			"  ls            - List contents of the current working directory\r\n" +
 			"  docker ps     - List simulated running Docker containers on cluster\r\n" +
 			"  uname -a      - Show operating system and machine kernel data\r\n" +
 			"  ping 8.8.8.8  - Probe network gateway performance\r\n" +
 			"  cat server.js - Output snippet of remote index server configuration\r\n" +
 			"  keychain      - Query keychain credentials loaded for target session\r\n" +
 			"  clear         - Wipe the terminal display buffer clean\r\n"
 	case "ls":
 		if *cwd == "~" || *cwd == "/home/deploy" {
 			return "drwxr-xr-x  3 root  root  4096 Jul  6 12:00 controllers\r\n" +
 				"drwxr-xr-x  2 root  root  4096 Jul  6 12:00 models\r\n" +
 				"drwxr-xr-x  2 root  root  4096 Jul  6 12:00 routes\r\n" +
 				"-rw-r--r--  1 root  root   280 Jul  6 11:34 .env\r\n" +
 				"-rw-r--r--  1 root  root  1432 Jul  6 14:20 package.json\r\n" +
 				"-rwxr-xr-x  1 root  root  8412 Jul  6 15:43 server.js\r\n"
 		}
 		return "total 0\r\n"
 	case "cd":
 		if len(parts) > 1 { *cwd = parts[1] } else { *cwd = "~" }
 		return ""
 	case "docker ps":
 		return "CONTAINER ID   IMAGE                 COMMAND                  CREATED         STATUS         PORTS\r\n" +
 			"f87a2d12e9b0   node:18-alpine        \"docker-entrypoint.s…\"   2 hours ago     Up 2 hours     0.0.0.0:3000->3000/tcp\r\n" +
 			"c23e84bf9211   postgres:15-alpine    \"docker-entrypoint.s…\"   5 hours ago     Up 5 hours     0.0.0.0:5432->5432/tcp\r\n" +
 			"78da12b84e0c   redis:7-alpine        \"docker-entrypoint.s…\"   10 hours ago    Up 10 hours    0.0.0.0:6379->6379/tcp\r\n"
 	case "uname":
 		if len(parts) > 1 && parts[1] == "-a" {
 			return fmt.Sprintf("Linux %s 5.15.0-101-generic #111-Ubuntu SMP Wed Jul 6 21:27:00 UTC 2026 x86_64 GNU/Linux\r\n", host)
 		}
 		return "Linux\r\n"
 	case "ping":
 		return "64 bytes from 8.8.8.8: icmp_seq=1 ttl=116 time=12.4 ms\r\n" +
 			"64 bytes from 8.8.8.8: icmp_seq=2 ttl=116 time=14.1 ms\r\n" +
 			"64 bytes from 8.8.8.8: icmp_seq=3 ttl=116 time=11.8 ms\r\n" +
 			"--- 8.8.8.8 ping statistics ---\r\n" +
 			"3 packets transmitted, 3 received, 0% packet loss, rtt min/avg/max = 11.8/12.76/14.1 ms\r\n"
 	case "cat":
 		if len(parts) > 1 && parts[1] == "server.js" {
 			return "const express = require(\"express\");\r\n" +
 				"const app = express();\r\n" +
 				"const PORT = process.env.PORT || 3000;\r\n" +
 				"app.get(\"/api/health\", (req, res) => res.send({ status: \"healthy\" }));\r\n" +
 				"app.listen(PORT, () => console.log(\"Server active on cluster ingress\"));\r\n"
 		}
 		if len(parts) > 1 {
 			return fmt.Sprintf("# Content of %s\r\n(not implemented in mock shell)\r\n", parts[1])
 		}
 		return ""
 	case "keychain":
 		return "Keychain Credential Mapping Selected:\r\n" +
 			"  Active Key: id_ed25519_alex (ED25519 standard)\r\n" +
 			"  Encryption: AES-256 GCM cryptokey payload\r\n" +
 			"  Fingerprint: SHA256:7mP9K9+fVj5bW0vQ8zD1y2u3t4m5n6p7q8r9s0v1w2x\r\n"
 	case "whoami":
 		return "deploy\r\n"
 	case "hostname":
 		return host + "\r\n"
 	case "pwd":
 		return *cwd + "\r\n"
 	case "echo":
 		return strings.Join(parts[1:], " ") + "\r\n"
 	default:
 		return fmt.Sprintf("hostkeeper: command not found: \"%s\". Type \"help\" to view custom commands list.\r\n", parts[0])
 	}
 }
@@ -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,39 @@
 package model
 type AppConfig struct {
 	Theme            string `json:"theme"`            // light | dark
 	FontSize         int    `json:"fontSize"`         // 12-18
 	Scrollback       int    `json:"scrollback"`       // 1000-10000
 	AutoLock         int    `json:"autoLock"`         // minutes
 	Keepalive        bool   `json:"keepalive"`
 	CopyOnSelect     bool   `json:"copyOnSelect"`
 	BellEnabled      bool   `json:"bellEnabled"`
 	AutoReconnect    bool   `json:"autoReconnect"`
 	BlinkCursor      bool   `json:"blinkCursor"`
 }
 type ConfigStore struct {
 	Config AppConfig
 }
 func NewConfigStore() *ConfigStore {
 	return &ConfigStore{Config: defaultConfig()}
 }
 func (s *ConfigStore) Get() AppConfig { return s.Config }
 func (s *ConfigStore) Update(cfg AppConfig) { s.Config = cfg }
 func defaultConfig() AppConfig {
 	return AppConfig{
 		Theme:         "light",
 		FontSize:      14,
 		Scrollback:    5000,
 		AutoLock:      5,
 		Keepalive:     true,
 		CopyOnSelect:  true,
 		BellEnabled:   false,
 		AutoReconnect: true,
 		BlinkCursor:   false,
 	}
 }
@@ -0,0 +1,28 @@
 package model
 type Device struct {
 	ID        string `json:"id"`
 	Name      string `json:"name"`
 	Type      string `json:"type"` // desktop | mobile | tablet
 	OS        string `json:"os"`
 	LastSeen  string `json:"lastSeen"`
 	Current   bool   `json:"current"`
 }
 type DeviceStore struct {
 	Devices []Device
 }
 func NewDeviceStore() *DeviceStore {
 	return &DeviceStore{Devices: defaultDevices()}
 }
 func (s *DeviceStore) All() []Device { return s.Devices }
 func defaultDevices() []Device {
 	return []Device{
 		{ID: "d1", Name: "MacBook Pro M4", Type: "desktop", OS: "macOS 15 Sequoia", LastSeen: "Just now", Current: true},
 		{ID: "d2", Name: "iPhone 17 Pro", Type: "mobile", OS: "iOS 20", LastSeen: "2 hours ago", Current: false},
 		{ID: "d3", Name: "iPad Air M3", Type: "tablet", OS: "iPadOS 20", LastSeen: "Yesterday", Current: false},
 	}
 }
@@ -0,0 +1,60 @@
 package model
 type FileItem struct {
 	Name        string `json:"name"`
 	Size        string `json:"size"`
 	Modified    string `json:"modified"`
 	Type        string `json:"type"` // folder | file | image | code | lock
 	Extension   string `json:"extension"`
 	Permissions string `json:"permissions"`
 	Path        string `json:"path"`
 }
 type FileStore struct {
 	Local  []FileItem
 	Remote []FileItem
 	LocalBreadcrumb  []Breadcrumb
 	RemoteBreadcrumb []Breadcrumb
 }
 type Breadcrumb struct {
 	Name string
 	Path string
 }
 func NewFileStore() *FileStore {
 	return &FileStore{
 		Local:  defaultLocalFiles(),
 		Remote: defaultRemoteFiles(),
 		LocalBreadcrumb:  []Breadcrumb{{Name: "~", Path: "/home/user"}, {Name: "projects", Path: "/home/user/projects"}},
 		RemoteBreadcrumb: []Breadcrumb{{Name: "/", Path: "/"}, {Name: "var", Path: "/var"}, {Name: "www", Path: "/var/www"}},
 	}
 }
 func (s *FileStore) All() (local, remote []FileItem) { return s.Local, s.Remote }
 func defaultLocalFiles() []FileItem {
 	return []FileItem{
 		{Name: "Downloads", Size: "—", Modified: "2 hours ago", Type: "folder", Permissions: "drwxr-xr-x", Path: "/home/user/Downloads"},
 		{Name: "Documents", Size: "—", Modified: "Yesterday", Type: "folder", Permissions: "drwxr-xr-x", Path: "/home/user/Documents"},
 		{Name: "projects", Size: "—", Modified: "Just now", Type: "folder", Permissions: "drwxrwxr-x", Path: "/home/user/projects"},
 		{Name: "config.yml", Size: "1.4 KB", Modified: "Yesterday", Type: "code", Extension: "yml", Permissions: "-rw-r--r--", Path: "/home/user/projects/config.yml"},
 		{Name: "README.md", Size: "3.2 KB", Modified: "2 days ago", Type: "code", Extension: "md", Permissions: "-rw-r--r--", Path: "/home/user/projects/README.md"},
 		{Name: "screenshot.png", Size: "240 KB", Modified: "3 days ago", Type: "image", Extension: "png", Permissions: "-rw-r--r--", Path: "/home/user/Downloads/screenshot.png"},
 		{Name: "archive.zip", Size: "42 MB", Modified: "1 week ago", Type: "file", Extension: "zip", Permissions: "-rw-r--r--", Path: "/home/user/Downloads/archive.zip"},
 		{Name: "vault.enc", Size: "8 KB", Modified: "2 weeks ago", Type: "lock", Extension: "enc", Permissions: "-rw-------", Path: "/home/user/vault.enc"},
 	}
 }
 func defaultRemoteFiles() []FileItem {
 	return []FileItem{
 		{Name: "html", Size: "—", Modified: "2 hours ago", Type: "folder", Permissions: "drwxr-xr-x", Path: "/var/www/html"},
 		{Name: "assets", Size: "—", Modified: "Yesterday", Type: "folder", Permissions: "drwxr-xr-x", Path: "/var/www/assets"},
 		{Name: "index.html", Size: "4.1 KB", Modified: "Just now", Type: "code", Extension: "html", Permissions: "-rw-r--r--", Path: "/var/www/index.html"},
 		{Name: "app.py", Size: "12.8 KB", Modified: "2 hours ago", Type: "code", Extension: "py", Permissions: "-rwxr-xr-x", Path: "/var/www/app.py"},
 		{Name: "Dockerfile", Size: "512 B", Modified: "Yesterday", Type: "code", Extension: "Dockerfile", Permissions: "-rw-r--r--", Path: "/var/www/Dockerfile"},
 		{Name: "compose.yml", Size: "2.1 KB", Modified: "Yesterday", Type: "code", Extension: "yml", Permissions: "-rw-r--r--", Path: "/var/www/compose.yml"},
 		{Name: ".env", Size: "156 B", Modified: "3 days ago", Type: "lock", Extension: "env", Permissions: "-rw-------", Path: "/var/www/.env"},
 		{Name: "logo.svg", Size: "6.7 KB", Modified: "1 week ago", Type: "image", Extension: "svg", Permissions: "-rw-r--r--", Path: "/var/www/assets/logo.svg"},
 	}
 }
@@ -0,0 +1,22 @@
 package model
 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"`
 	LastSeen  string `json:"lastSeen"`
 	Type      string `json:"type"`
 	Hostname string `json:"hostname"`
 	Port     int    `json:"port"`
 	Username string `json:"username"`
 	AuthType string `json:"authType"` // password | key | both
 	Password string `json:"password,omitempty"`
 	KeyID    string `json:"keyId,omitempty"`
 	Group    string `json:"group,omitempty"`
 	Tags     string `json:"tags,omitempty"`
 	Notes    string `json:"notes,omitempty"`
 }
@@ -0,0 +1,15 @@
 package model
 type Key struct {
 	ID             string   `json:"id"`
 	Name           string   `json:"name"`
 	Username       string   `json:"username"`
 	Passphrase     string   `json:"passphrase"`
 	Strength       string   `json:"strength"`
 	Type           string   `json:"type"`
 	URL            string   `json:"url"`
 	Fingerprint    string   `json:"fingerprint"`
 	ConnectedHosts []string `json:"connectedHosts"`
 	KeyFile        string   `json:"keyFile"`
 	CreatedAt      string   `json:"createdAt"`
 }
@@ -0,0 +1,13 @@
 package model
 type Snippet struct {
 	ID          string   `json:"id"`
 	Name        string   `json:"name"`
 	Content     string   `json:"content"`
 	Language    string   `json:"language"`
 	Description string   `json:"description"`
 	Collection  string   `json:"collection"`
 	Icon        string   `json:"icon"`
 	Tags        []string `json:"tags"`
 	CreatedAt   string   `json:"createdAt"`
 }
@@ -0,0 +1,22 @@
 package model
 type Transfer struct {
 	ID          string `json:"id"`
 	FileName    string `json:"fileName"`
 	Source      string `json:"source"`
 	Destination string `json:"destination"`
 	Progress    int    `json:"progress"`
 	Speed       string `json:"speed"`
 	Type        string `json:"type"`   // upload | download
 	Status      string `json:"status"` // queued | transferring | completed | error
 }
 type TransferStore struct {
 	Transfers []Transfer
 }
 func NewTransferStore() *TransferStore {
 	return &TransferStore{}
 }
 func (s *TransferStore) All() []Transfer { return s.Transfers }
@@ -0,0 +1,138 @@
 package sshconn
 import (
 	"fmt"
 	"io"
 	"net"
 	"os"
 	"time"
 	"git.tukangketik.id/swanadiva/hostkeeper/v2/internal/model"
 	gossh "golang.org/x/crypto/ssh"
 )
 type Client struct {
 	Host     model.Host
 	client   *gossh.Client
 	session  *gossh.Session
 	stdin    io.WriteCloser
 	stdout   io.Reader
 	stderr   io.Reader
 }
 func Dial(host model.Host) (*Client, error) {
 	addr := net.JoinHostPort(host.Hostname, fmt.Sprintf("%d", host.Port))
 	if host.Hostname == "" {
 		addr = net.JoinHostPort(host.IP, "22")
 	}
 	config := &gossh.ClientConfig{
 		User:            host.Username,
 		HostKeyCallback: gossh.InsecureIgnoreHostKey(),
 		Timeout:         10 * time.Second,
 	}
 	switch host.AuthType {
 	case "password", "":
 		config.Auth = []gossh.AuthMethod{
 			gossh.Password(host.Password),
 		}
 	case "key":
 		key, err := loadPrivateKey(host.Password)
 		if err != nil {
 			return nil, fmt.Errorf("load key: %w", err)
 		}
 		config.Auth = []gossh.AuthMethod{
 			gossh.PublicKeys(key),
 		}
 	case "both":
 		key, err := loadPrivateKey(host.Password)
 		if err != nil {
 			return nil, fmt.Errorf("load key: %w", err)
 		}
 		config.Auth = []gossh.AuthMethod{
 			gossh.Password(host.Password),
 			gossh.PublicKeys(key),
 		}
 	default:
 		return nil, fmt.Errorf("unknown auth type: %s", host.AuthType)
 	}
 	client, err := gossh.Dial("tcp", addr, config)
 	if err != nil {
 		return nil, fmt.Errorf("dial: %w", err)
 	}
 	return &Client{
 		Host:   host,
 		client: client,
 	}, nil
 }
 func (c *Client) Shell(stdin io.Reader, stdout io.Writer, stderr io.Writer, rows, cols int) error {
 	session, err := c.client.NewSession()
 	if err != nil {
 		return fmt.Errorf("session: %w", err)
 	}
 	c.session = session
 	modes := gossh.TerminalModes{
 		gossh.ECHO:          1,
 		gossh.TTY_OP_ISPEED: 14400,
 		gossh.TTY_OP_OSPEED: 14400,
 	}
 	if err := session.RequestPty("xterm-256color", rows, cols, modes); err != nil {
 		return fmt.Errorf("pty: %w", err)
 	}
 	c.stdin, _ = session.StdinPipe()
 	c.stdout, _ = session.StdoutPipe()
 	c.stderr, _ = session.StderrPipe()
 	go io.Copy(stdout, c.stdout)
 	go io.Copy(stderr, c.stderr)
 	go io.Copy(c.stdin, stdin)
 	if err := session.Shell(); err != nil {
 		return fmt.Errorf("shell: %w", err)
 	}
 	return session.Wait()
 }
 func (c *Client) Resize(rows, cols int) error {
 	if c.session == nil {
 		return nil
 	}
 	return c.session.WindowChange(rows, cols)
 }
 func (c *Client) Close() error {
 	if c.session != nil {
 		c.session.Close()
 	}
 	return c.client.Close()
 }
 func (c *Client) IsConnected() bool {
 	return c.client != nil
 }
 func loadPrivateKey(keyContent string) (gossh.Signer, error) {
 	if keyContent == "" {
 		paths := []string{
 			os.ExpandEnv("$HOME/.ssh/id_ed25519"),
 			os.ExpandEnv("$HOME/.ssh/id_rsa"),
 			os.ExpandEnv("$HOME/.ssh/id_ecdsa"),
 		}
 		for _, p := range paths {
 			data, err := os.ReadFile(p)
 			if err == nil {
 				return gossh.ParsePrivateKey(data)
 			}
 		}
 		return nil, fmt.Errorf("no SSH key found")
 	}
 	return gossh.ParsePrivateKey([]byte(keyContent))
 }
@@ -0,0 +1,32 @@
 package store
 import "git.tukangketik.id/swanadiva/hostkeeper/v2/internal/model"
 type DeviceStore struct {
 	devices []model.Device
 }
 func NewDeviceStore() *DeviceStore {
 	s := &DeviceStore{devices: defaultDevices()}
 	mu.RLock()
 	readFile("devices.json", &s.devices)
 	mu.RUnlock()
 	if s.devices == nil {
 		s.devices = defaultDevices()
 	}
 	return s
 }
 func (s *DeviceStore) All() []model.Device {
 	mu.RLock()
 	defer mu.RUnlock()
 	return s.devices
 }
 func defaultDevices() []model.Device {
 	return []model.Device{
 		{ID: "d1", Name: "MacBook Pro M4", Type: "desktop", OS: "macOS 15 Sequoia", LastSeen: "Just now", Current: true},
 		{ID: "d2", Name: "iPhone 17 Pro", Type: "mobile", OS: "iOS 20", LastSeen: "2 hours ago", Current: false},
 		{ID: "d3", Name: "iPad Air M3", Type: "tablet", OS: "iPadOS 20", LastSeen: "Yesterday", Current: false},
 	}
 }
@@ -0,0 +1,129 @@
 package store
 import "git.tukangketik.id/swanadiva/hostkeeper/v2/internal/model"
 type HostStore struct {
 	hosts []model.Host
 }
 func NewHostStore() *HostStore {
 	s := &HostStore{}
 	mu.RLock()
 	readFile("hosts.json", &s.hosts)
 	mu.RUnlock()
 	if s.hosts == nil {
 		s.hosts = []model.Host{}
 	}
 	return s
 }
 func (s *HostStore) All() []model.Host {
 	mu.RLock()
 	defer mu.RUnlock()
 	return s.hosts
 }
 func (s *HostStore) Search(q, filter string) []model.Host {
 	mu.RLock()
 	defer mu.RUnlock()
 	var result []model.Host
 	for _, h := range s.hosts {
 		if filter != "" && filter != "all" && h.Status != filter {
 			continue
 		}
 		if q == "" || contains(h.Name, q) || contains(h.IP, q) || contains(h.OS, q) ||
 			contains(h.Hostname, q) || contains(h.Username, q) {
 			result = append(result, h)
 		}
 	}
 	if result == nil {
 		return []model.Host{}
 	}
 	return result
 }
 func (s *HostStore) Get(id string) (model.Host, bool) {
 	mu.RLock()
 	defer mu.RUnlock()
 	for _, h := range s.hosts {
 		if h.ID == id {
 			return h, true
 		}
 	}
 	return model.Host{}, false
 }
 func (s *HostStore) Add(name, ip, os, provider, hostType string) model.Host {
 	return s.AddFull(model.Host{
 		Name:     name,
 		IP:       ip,
 		OS:       os,
 		Provider: provider,
 		Type:     hostType,
 	})
 }
 func (s *HostStore) AddFull(h model.Host) model.Host {
 	mu.Lock()
 	defer mu.Unlock()
 	if h.ID == "" {
 		h.ID = randID()
 	}
 	if h.Status == "" {
 		h.Status = "active"
 	}
 	s.hosts = append(s.hosts, h)
 	writeFile("hosts.json", &s.hosts)
 	return h
 }
 func (s *HostStore) Update(h model.Host) bool {
 	mu.Lock()
 	defer mu.Unlock()
 	for i, existing := range s.hosts {
 		if existing.ID == h.ID {
 			s.hosts[i] = h
 			writeFile("hosts.json", &s.hosts)
 			return true
 		}
 	}
 	return false
 }
 func (s *HostStore) Delete(id string) {
 	mu.Lock()
 	defer mu.Unlock()
 	for i, h := range s.hosts {
 		if h.ID == id {
 			s.hosts = append(s.hosts[:i], s.hosts[i+1:]...)
 			writeFile("hosts.json", &s.hosts)
 			return
 		}
 	}
 }
 func contains(s, q string) bool {
 	if len(s) < len(q) {
 		return false
 	}
 	for i := 0; i <= len(s)-len(q); i++ {
 		match := true
 		for j := 0; j < len(q); j++ {
 			sc, qc := s[i+j], q[j]
 			if sc >= 'A' && sc <= 'Z' {
 				sc += 32
 			}
 			if qc >= 'A' && qc <= 'Z' {
 				qc += 32
 			}
 			if sc != qc {
 				match = false
 				break
 			}
 		}
 		if match {
 			return true
 		}
 	}
 	return false
 }
@@ -0,0 +1,112 @@
 package store
 import (
 	"time"
 	"git.tukangketik.id/swanadiva/hostkeeper/v2/internal/model"
 )
 type KeyStore struct {
 	keys []model.Key
 }
 func NewKeyStore() *KeyStore {
 	s := &KeyStore{}
 	mu.RLock()
 	readFile("keys.json", &s.keys)
 	mu.RUnlock()
 	if s.keys == nil {
 		s.keys = []model.Key{}
 	}
 	return s
 }
 func (s *KeyStore) All() []model.Key {
 	mu.RLock()
 	defer mu.RUnlock()
 	return s.keys
 }
 func (s *KeyStore) Search(q string) []model.Key {
 	mu.RLock()
 	defer mu.RUnlock()
 	if q == "" {
 		return s.keys
 	}
 	var res []model.Key
 	for _, k := range s.keys {
 		if contains(k.Name, q) || contains(k.Username, q) || contains(k.URL, q) {
 			res = append(res, k)
 		}
 	}
 	return res
 }
 func (s *KeyStore) Add(name, username, url, passphrase string) model.Key {
 	mu.Lock()
 	defer mu.Unlock()
 	keyType := guessKeyType(name, passphrase)
 	k := model.Key{
 		ID:         randID(),
 		Name:       name,
 		Username:   username,
 		Passphrase: passphrase,
 		Strength:   calcStrength(passphrase),
 		Type:       keyType,
 		URL:        url,
 		KeyFile:    "— " + keyType + " credential —",
 		CreatedAt:  time.Now().Format("Jan 2, 2006"),
 	}
 	s.keys = append(s.keys, k)
 	writeFile("keys.json", &s.keys)
 	return k
 }
 func guessKeyType(name, passphrase string) string {
 	switch {
 	case len(passphrase) >= 25:
 		return "ED25519"
 	case contains(name, "aws") || contains(name, "AWS"):
 		return "AWS Key"
 	case contains(name, "token") || contains(name, "bearer") || contains(name, "TOKEN"):
 		return "Bearer Token"
 	case len(passphrase) <= 3:
 		return "PASSWORD"
 	default:
 		return "SSH RSA"
 	}
 }
 func (s *KeyStore) Delete(id string) {
 	mu.Lock()
 	defer mu.Unlock()
 	for i, k := range s.keys {
 		if k.ID == id {
 			s.keys = append(s.keys[:i], s.keys[i+1:]...)
 			writeFile("keys.json", &s.keys)
 			return
 		}
 	}
 }
 func calcStrength(p string) string {
 	l, d, u, s := 0, 0, 0, 0
 	for _, c := range p {
 		switch {
 		case c >= 'a' && c <= 'z':
 			l++
 		case c >= 'A' && c <= 'Z':
 			u++
 		case c >= '0' && c <= '9':
 			d++
 		default:
 			s++
 		}
 	}
 	if len(p) >= 12 && u >= 1 && d >= 1 && s >= 1 {
 		return "secure"
 	}
 	if len(p) >= 8 && u+d+s >= 2 {
 		return "moderate"
 	}
 	return "weak"
 }
@@ -0,0 +1,42 @@
 package store
 import "git.tukangketik.id/swanadiva/hostkeeper/v2/internal/model"
 type SettingsStore struct {
 	cfg model.AppConfig
 }
 func NewSettingsStore() *SettingsStore {
 	s := &SettingsStore{cfg: defaultConfig()}
 	mu.RLock()
 	readFile("settings.json", &s.cfg)
 	mu.RUnlock()
 	return s
 }
 func (s *SettingsStore) Get() model.AppConfig {
 	mu.RLock()
 	defer mu.RUnlock()
 	return s.cfg
 }
 func (s *SettingsStore) Update(cfg model.AppConfig) {
 	mu.Lock()
 	defer mu.Unlock()
 	s.cfg = cfg
 	writeFile("settings.json", &s.cfg)
 }
 func defaultConfig() model.AppConfig {
 	return model.AppConfig{
 		Theme:         "light",
 		FontSize:      14,
 		Scrollback:    5000,
 		AutoLock:      5,
 		Keepalive:     true,
 		CopyOnSelect:  true,
 		BellEnabled:   false,
 		AutoReconnect: true,
 		BlinkCursor:   false,
 	}
 }
@@ -0,0 +1,86 @@
 package store
 import (
 	"time"
 	"git.tukangketik.id/swanadiva/hostkeeper/v2/internal/model"
 )
 type SnippetStore struct {
 	snippets []model.Snippet
 }
 func NewSnippetStore() *SnippetStore {
 	s := &SnippetStore{}
 	mu.RLock()
 	readFile("snippets.json", &s.snippets)
 	mu.RUnlock()
 	if s.snippets == nil {
 		s.snippets = []model.Snippet{}
 	}
 	return s
 }
 func (s *SnippetStore) All() []model.Snippet {
 	mu.RLock()
 	defer mu.RUnlock()
 	return s.snippets
 }
 func (s *SnippetStore) Search(q, collection, tag string) []model.Snippet {
 	mu.RLock()
 	defer mu.RUnlock()
 	var res []model.Snippet
 	for _, sn := range s.snippets {
 		if q != "" && !contains(sn.Name, q) && !contains(sn.Content, q) && !contains(sn.Language, q) {
 			continue
 		}
 		if collection != "" && sn.Collection != collection {
 			continue
 		}
 		if tag != "" {
 			found := false
 			for _, t := range sn.Tags {
 				if t == tag {
 					found = true
 					break
 				}
 			}
 			if !found {
 				continue
 			}
 		}
 		res = append(res, sn)
 	}
 	return res
 }
 func (s *SnippetStore) Add(name, content, language string, tags []string, description, collection string) model.Snippet {
 	mu.Lock()
 	defer mu.Unlock()
 	sn := model.Snippet{
 		ID:          randID(),
 		Name:        name,
 		Content:     content,
 		Language:    language,
 		Description: description,
 		Collection:  collection,
 		Icon:        "FileText",
 		Tags:        tags,
 		CreatedAt:   time.Now().Format("Jan 2, 2006"),
 	}
 	s.snippets = append(s.snippets, sn)
 	writeFile("snippets.json", &s.snippets)
 	return sn
 }
 func (s *SnippetStore) Delete(id string) {
 	mu.Lock()
 	defer mu.Unlock()
 	for i, sn := range s.snippets {
 		if sn.ID == id {
 			s.snippets = append(s.snippets[:i], s.snippets[i+1:]...)
 			writeFile("snippets.json", &s.snippets)
 			return
 		}
 	}
 }
@@ -0,0 +1,59 @@
 package store
 import (
 	"encoding/json"
 	"math/rand"
 	"os"
 	"path/filepath"
 	"sync"
 	"git.tukangketik.id/swanadiva/hostkeeper/pkg/crypto"
 )
 var dataDir string
 var mu sync.RWMutex
 func init() {
 	configDir, err := os.UserConfigDir()
 	if err != nil {
 		configDir = os.TempDir()
 	}
 	dataDir = filepath.Join(configDir, "hostkeeper", "v2")
 	os.MkdirAll(dataDir, 0755)
 }
 func readFile(name string, v any) error {
 	path := filepath.Join(dataDir, name)
 	data, err := os.ReadFile(path)
 	if err != nil {
 		if os.IsNotExist(err) {
 			return nil
 		}
 		return err
 	}
 	if len(data) == 0 {
 		return nil
 	}
 	if crypto.IsEncrypted(string(data)) {
 		return nil
 	}
 	return json.Unmarshal(data, v)
 }
 func writeFile(name string, v any) error {
 	path := filepath.Join(dataDir, name)
 	data, err := json.MarshalIndent(v, "", "  ")
 	if err != nil {
 		return err
 	}
 	return os.WriteFile(path, data, 0644)
 }
 func randID() string {
 	const letters = "abcdefghijklmnopqrstuvwxyz0123456789"
 	b := make([]byte, 8)
 	for i := range b {
 		b[i] = letters[rand.Intn(len(letters))]
 	}
 	return string(b)
 }
@@ -0,0 +1,93 @@
 package main
 import (
 	"html/template"
 	"log"
 	"github.com/gofiber/contrib/websocket"
 	"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) template.HTML {
 		switch name {
 		case "server":
 			return `<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5 12h14M12 5l7 7-7 7"/></svg>`
 		case "terminal":
 			return `<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>`
 		case "folder-sync":
 			return `<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"/></svg>`
 		case "code2":
 			return `<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/></svg>`
 		case "key-round":
 			return `<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15.75 5.25a3 3 0 013 3m3 0a6 6 0 01-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1121.75 8.25z"/></svg>`
 		case "settings2":
 			return `<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>`
 		default:
 			return `<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8.25 6.75h12M8.25 12h12m-12 5.25h12M3.75 6.75h.007v.008H3.75V6.75zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zM3.75 12h.007v.008H3.75V12zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm-.375 5.25h.007v.008H3.75v-.008zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z"/></svg>`
 		}
 	})
 	engine.AddFunc("dict", func(values ...interface{}) map[string]interface{} {
 		m := make(map[string]interface{})
 		for i := 0; i < len(values)-1; i += 2 {
 			if key, ok := values[i].(string); ok {
 				m[key] = values[i+1]
 			}
 		}
 		return m
 	})
 	engine.AddFunc("default", func(def, val interface{}) interface{} {
 		if val == nil || val == "" {
 			return def
 		}
 		return val
 	})
 	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("/hosts/list", handler.DashboardList)
 	app.Post("/hosts", handler.CreateHost)
 	app.Put("/hosts/:id", handler.UpdateHost)
 	app.Delete("/hosts/:id", handler.DeleteHost)
 	app.Get("/snippets", handler.Snippets)
 	app.Get("/snippets/grid", handler.SnippetGrid)
 	app.Post("/snippets", handler.CreateSnippet)
 	app.Delete("/snippets/:id", handler.DeleteSnippet)
 	app.Get("/keychain", handler.Keychain)
 	app.Get("/keys/grid", handler.KeyGrid)
 	app.Post("/keys", handler.CreateKey)
 	app.Delete("/keys/:id", handler.DeleteKey)
 	app.Get("/settings", handler.Settings)
 	app.Post("/settings", handler.UpdateConfig)
 	app.Get("/brief", handler.Brief)
 	app.Get("/terminal", handler.Terminal)
 	app.Get("/terminal/ws/:host", websocket.New(func(c *websocket.Conn) {
 		handler.TerminalWS(c)
 	}, websocket.Config{
 		Origins: []string{"*"},
 	}))
 	app.Get("/sftp", handler.SFTP)
 	app.Get("/sftp/pane", handler.SFTPPane)
 	app.Post("/sftp/mkdir", handler.CreateFolder)
 	app.Delete("/sftp/rm", handler.DeleteFile)
 	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,206 @@
 /* Lumina System — Custom CSS */
 /* Alpine cloak — hide until initialized */
 [x-cloak] { display: none !important; }
 /* 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;
 }
 /* xterm.js container */
 .xterm { padding: 8px 0; }
 .xterm-viewport::-webkit-scrollbar { width: 6px; }
 .xterm-viewport::-webkit-scrollbar-thumb { background: #c2c6d8; border-radius: 3px; }
 /* 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,22 @@
 document.addEventListener('click', function(e) {
  const btn = e.target.closest('[data-copy]');
  if (!btn) return;
  const text = btn.getAttribute('data-copy');
  if (!text) return;
  if (navigator.clipboard && navigator.clipboard.writeText) {
    navigator.clipboard.writeText(text).catch(() => fallbackCopy(text));
  } else {
    fallbackCopy(text);
  }
 });
 function fallbackCopy(text) {
  const ta = document.createElement('textarea');
  ta.value = text;
  ta.style.position = 'fixed';
  ta.style.opacity = '0';
  document.body.appendChild(ta);
  ta.select();
  try { document.execCommand('copy'); } catch (e) {}
  document.body.removeChild(ta);
 }
@@ -0,0 +1,192 @@
 document.addEventListener('alpine:init', () => {
  const el = document.getElementById('hosts-data');
  const hostOptions = el ? (JSON.parse(el.textContent) || []) : [];
  const selEl = document.getElementById('selected-host');
  const selectedHostId = selEl ? JSON.parse(selEl.textContent) : '';
  const termTheme = {
    background: '#ffffff',
    foreground: '#191c1e',
    cursor: '#0050cb',
    cursorAccent: '#ffffff',
    selectionBackground: '#0050cb33',
    black: '#191c1e',
    red: '#b3261e',
    green: '#006e2f',
    yellow: '#a86e0a',
    blue: '#0050cb',
    magenta: '#7e23cc',
    cyan: '#006493',
    white: '#191c1e',
    brightBlack: '#727686',
    brightRed: '#dc362e',
    brightGreen: '#008a42',
    brightYellow: '#c58800',
    brightBlue: '#2962d5',
    brightMagenta: '#9a40e8',
    brightCyan: '#007ab5',
    brightWhite: '#424656',
  };
  Alpine.data('terminalManager', () => ({
    tabs: [],
    activeTab: 0,
    command: '',
    _terminals: {},
    _sockets: {},
    _containers: {},
    init() {
      this._wrapper = document.getElementById('xterm-wrapper');
      this.addTab();
    },
    _getHostForTab() {
      let host;
      if (selectedHostId) {
        host = hostOptions.find((h) => h.id === selectedHostId) || hostOptions[0];
      }
      if (!host) {
        host = hostOptions.length > 0
          ? hostOptions[Math.floor(Math.random() * hostOptions.length)]
          : { id: 'h1', name: 'localhost', ip: '127.0.0.1' };
      }
      return host;
    },
    addTab() {
      const host = this._getHostForTab();
      const id = 'tab-' + Date.now() + '-' + Math.random().toString(36).slice(2, 6);
      this.tabs.push({ id, name: host.name, host: host.ip, hostID: host.id });
      // Create xterm container DOM element directly
      const container = document.createElement('div');
      container.id = 'xterm-' + id;
      container.className = 'absolute inset-0';
      container.style.display = 'none';
      this._wrapper.appendChild(container);
      this._containers[id] = container;
      // Create xterm.js terminal
      const term = new Terminal({
        theme: termTheme,
        fontFamily: "'JetBrains Mono', monospace",
        fontSize: 13,
        lineHeight: 1.5,
        cursorBlink: true,
        cursorStyle: 'bar',
        allowProposedApi: true,
        scrollback: 5000,
      });
      this._terminals[id] = term;
      term.open(container);
      // Connect WebSocket
      const wsUrl =
        (location.protocol === 'https:' ? 'wss:' : 'ws:') +
        '//' + location.host + '/terminal/ws/' + host.id;
      console.log('[terminal] connecting to', wsUrl);
      const ws = new WebSocket(wsUrl);
      this._sockets[id] = ws;
      ws.onopen = () => {
        console.log('[terminal] ws open for', host.id);
        term.focus();
      };
      ws.onmessage = (ev) => {
        term.write(ev.data);
      };
      ws.onclose = () => {
        console.log('[terminal] ws closed for', host.id);
        term.write('\r\n\x1b[33m[Connection closed]\x1b[0m\r\n');
      };
      ws.onerror = (err) => {
        console.error('[terminal] ws error for', host.id, err);
        term.write('\r\n\x1b[31m[Connection error]\x1b[0m\r\n');
      };
      term.onData((data) => {
        if (ws.readyState === WebSocket.OPEN) {
          ws.send(data);
        }
      });
      // Switch to new tab
      this.activeTab = this.tabs.length - 1;
      this._showActiveTerminal();
    },
    switchTab(i) {
      this.activeTab = i;
      this._showActiveTerminal();
    },
    _showActiveTerminal() {
      const cur = this.tabs[this.activeTab];
      if (!cur) return;
      Object.keys(this._containers).forEach((key) => {
        this._containers[key].style.display = key === cur.id ? 'block' : 'none';
      });
      if (this._terminals[cur.id]) {
        this._terminals[cur.id].focus();
        this._terminals[cur.id].refresh(0, this._terminals[cur.id].rows);
      }
    },
    closeTab(i) {
      if (this.tabs.length <= 1) return;
      const tab = this.tabs[i];
      const id = tab.id;
      if (this._sockets[id]) {
        this._sockets[id].close();
        delete this._sockets[id];
      }
      if (this._terminals[id]) {
        this._terminals[id].dispose();
        delete this._terminals[id];
      }
      if (this._containers[id]) {
        this._containers[id].remove();
        delete this._containers[id];
      }
      this.tabs.splice(i, 1);
      if (this.activeTab >= this.tabs.length) {
        this.activeTab = this.tabs.length - 1;
      }
      this._showActiveTerminal();
    },
    submitCommand() {
      const cmd = this.command.trim();
      if (!cmd) return;
      const cur = this.tabs[this.activeTab];
      if (!cur) return;
      const ws = this._sockets[cur.id];
      if (ws && ws.readyState === WebSocket.OPEN) {
        ws.send(cmd + '\r');
      }
      this.command = '';
    },
    insertCommand(cmd) {
      this.command = cmd;
      this.$nextTick(() => this.submitCommand());
    },
    clearBuffer() {
      const cur = this.tabs[this.activeTab];
      if (!cur) return;
      const term = this._terminals[cur.id];
      if (term) {
        term.clear();
        term.write('\x1b[2J\x1b[H');
      }
    },
  }));
 });
@@ -0,0 +1,13 @@
 document.addEventListener('alpine:init', () => {
  Alpine.data('switchToggle', (initial) => ({
    on: initial,
    toggle() {
      this.on = !this.on;
      this.$el.classList.toggle('active', this.on);
      this.$nextTick(() => {
        const hidden = this.$el.nextElementSibling;
        if (hidden) hidden.value = this.on ? 'on' : '';
      });
    }
  }));
 });
@@ -0,0 +1,6 @@
 document.addEventListener('alpine:init', () => {
  Alpine.data('passphraseToggle', () => ({
    show: false,
    toggle() { this.show = !this.show; }
  }));
 });
@@ -0,0 +1,209 @@
 /**
 * Copyright (c) 2014 The xterm.js authors. All rights reserved.
 * Copyright (c) 2012-2013, Christopher Jeffrey (MIT License)
 * https://github.com/chjj/term.js
 * @license MIT
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 * THE SOFTWARE.
 *
 * Originally forked from (with the author's permission):
 *   Fabrice Bellard's javascript vt100 for jslinux:
 *   http://bellard.org/jslinux/
 *   Copyright (c) 2011 Fabrice Bellard
 *   The original design remains. The terminal itself
 *   has been extended to include xterm CSI codes, among
 *   other features.
 */
 /**
 *  Default styles for xterm.js
 */
 .xterm {
    cursor: text;
    position: relative;
    user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
 }
 .xterm.focus,
 .xterm:focus {
    outline: none;
 }
 .xterm .xterm-helpers {
    position: absolute;
    top: 0;
    /**
     * The z-index of the helpers must be higher than the canvases in order for
     * IMEs to appear on top.
     */
    z-index: 5;
 }
 .xterm .xterm-helper-textarea {
    padding: 0;
    border: 0;
    margin: 0;
    /* Move textarea out of the screen to the far left, so that the cursor is not visible */
    position: absolute;
    opacity: 0;
    left: -9999em;
    top: 0;
    width: 0;
    height: 0;
    z-index: -5;
    /** Prevent wrapping so the IME appears against the textarea at the correct position */
    white-space: nowrap;
    overflow: hidden;
    resize: none;
 }
 .xterm .composition-view {
    /* TODO: Composition position got messed up somewhere */
    background: #000;
    color: #FFF;
    display: none;
    position: absolute;
    white-space: nowrap;
    z-index: 1;
 }
 .xterm .composition-view.active {
    display: block;
 }
 .xterm .xterm-viewport {
    /* On OS X this is required in order for the scroll bar to appear fully opaque */
    background-color: #000;
    overflow-y: scroll;
    cursor: default;
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
 }
 .xterm .xterm-screen {
    position: relative;
 }
 .xterm .xterm-screen canvas {
    position: absolute;
    left: 0;
    top: 0;
 }
 .xterm .xterm-scroll-area {
    visibility: hidden;
 }
 .xterm-char-measure-element {
    display: inline-block;
    visibility: hidden;
    position: absolute;
    top: 0;
    left: -9999em;
    line-height: normal;
 }
 .xterm.enable-mouse-events {
    /* When mouse events are enabled (eg. tmux), revert to the standard pointer cursor */
    cursor: default;
 }
 .xterm.xterm-cursor-pointer,
 .xterm .xterm-cursor-pointer {
    cursor: pointer;
 }
 .xterm.column-select.focus {
    /* Column selection mode */
    cursor: crosshair;
 }
 .xterm .xterm-accessibility,
 .xterm .xterm-message {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 10;
    color: transparent;
    pointer-events: none;
 }
 .xterm .live-region {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
 }
 .xterm-dim {
    /* Dim should not apply to background, so the opacity of the foreground color is applied
     * explicitly in the generated class and reset to 1 here */
    opacity: 1 !important;
 }
 .xterm-underline-1 { text-decoration: underline; }
 .xterm-underline-2 { text-decoration: double underline; }
 .xterm-underline-3 { text-decoration: wavy underline; }
 .xterm-underline-4 { text-decoration: dotted underline; }
 .xterm-underline-5 { text-decoration: dashed underline; }
 .xterm-overline {
    text-decoration: overline;
 }
 .xterm-overline.xterm-underline-1 { text-decoration: overline underline; }
 .xterm-overline.xterm-underline-2 { text-decoration: overline double underline; }
 .xterm-overline.xterm-underline-3 { text-decoration: overline wavy underline; }
 .xterm-overline.xterm-underline-4 { text-decoration: overline dotted underline; }
 .xterm-overline.xterm-underline-5 { text-decoration: overline dashed underline; }
 .xterm-strikethrough {
    text-decoration: line-through;
 }
 .xterm-screen .xterm-decoration-container .xterm-decoration {
 	z-index: 6;
 	position: absolute;
 }
 .xterm-screen .xterm-decoration-container .xterm-decoration.xterm-decoration-top-layer {
 	z-index: 7;
 }
 .xterm-decoration-overview-ruler {
    z-index: 8;
    position: absolute;
    top: 0;
    right: 0;
    pointer-events: none;
 }
 .xterm-decoration-top {
    z-index: 2;
    position: relative;
 }
@@ -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>Quick Brief · 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">
        {{template "brief_content" .}}
      </main>
    </div>
  </div>
 </body>
 </html>
@@ -0,0 +1,78 @@
 {{define "brief_content"}}
 <div class="max-w-3xl mx-auto space-y-6">
  <!-- Color Palette -->
  <div class="bg-white rounded-2xl border border-outline-variant/30 p-6 space-y-4">
    <h3 class="font-bold text-on-surface flex items-center gap-2">
      <svg class="w-5 h-5 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"/></svg>
      Color Palette — Lumina System
    </h3>
    <div class="grid grid-cols-2 sm:grid-cols-4 gap-3">
      <div class="rounded-xl p-3" style="background:#0050cb"><span class="text-white text-xs font-mono font-bold">Primary #0050cb</span></div>
      <div class="rounded-xl p-3" style="background:#006e2f"><span class="text-white text-xs font-mono font-bold">Secondary #006e2f</span></div>
      <div class="rounded-xl p-3" style="background:#7e23cc"><span class="text-white text-xs font-mono font-bold">Tertiary #7e23cc</span></div>
      <div class="rounded-xl p-3" style="background:#b3261e"><span class="text-white text-xs font-mono font-bold">Error #b3261e</span></div>
      <div class="rounded-xl p-3 border border-outline-variant/30" style="background:#f7f9fb"><span class="text-[#191c1e] text-xs font-mono font-bold">Surface #f7f9fb</span></div>
      <div class="rounded-xl p-3" style="background:#191c1e"><span class="text-white text-xs font-mono font-bold">On-Surface #191c1e</span></div>
      <div class="rounded-xl p-3" style="background:#424656"><span class="text-white text-xs font-mono font-bold">On-Surface-Var #424656</span></div>
      <div class="rounded-xl p-3" style="background:#c2c6d8"><span class="text-[#191c1e] text-xs font-mono font-bold">Outline-Var #c2c6d8</span></div>
    </div>
  </div>
  <!-- Typography -->
  <div class="bg-white rounded-2xl border border-outline-variant/30 p-6 space-y-4">
    <h3 class="font-bold text-on-surface flex items-center gap-2">
      <svg class="w-5 h-5 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h7"/></svg>
      Typography
    </h3>
    <div class="space-y-3">
      <div><p class="text-xl font-bold tracking-tight">Heading XL — Inter 800</p><p class="text-xs text-on-surface-variant font-mono">text-xl font-bold tracking-tight</p></div>
      <div><p class="text-base font-bold">Heading Base — Inter 700</p><p class="text-xs text-on-surface-variant font-mono">text-base font-bold</p></div>
      <div><p class="text-sm font-medium">Body — Inter 500</p><p class="text-xs text-on-surface-variant font-mono">text-sm font-medium</p></div>
      <div><p class="text-xs text-on-surface-variant">Caption — Inter 400/500</p><p class="text-xs text-on-surface-variant font-mono">text-xs text-on-surface-variant</p></div>
      <div><p class="text-xs font-mono">Monospace — JetBrains Mono 400/600</p><p class="text-xs text-on-surface-variant font-mono">text-xs font-mono</p></div>
    </div>
  </div>
  <!-- Elevation -->
  <div class="bg-white rounded-2xl border border-outline-variant/30 p-6 space-y-4">
    <h3 class="font-bold text-on-surface flex items-center gap-2">
      <svg class="w-5 h-5 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/></svg>
      Elevation & Layout
    </h3>
    <div class="space-y-3 text-sm">
      <div class="flex items-center gap-4 p-3 rounded-lg bg-surface-container-low">
        <span class="w-16 text-xs font-mono text-on-surface-variant">shadow-sm</span>
        <div class="flex-1 h-8 rounded-lg bg-white shadow-sm border border-outline-variant/20"></div>
      </div>
      <div class="flex items-center gap-4 p-3 rounded-lg bg-surface-container-low">
        <span class="w-16 text-xs font-mono text-on-surface-variant">shadow-md</span>
        <div class="flex-1 h-8 rounded-lg bg-white shadow-md border border-outline-variant/20"></div>
      </div>
      <div class="flex items-center gap-4 p-3 rounded-lg bg-surface-container-low">
        <span class="w-16 text-xs font-mono text-on-surface-variant">shadow-lg</span>
        <div class="flex-1 h-8 rounded-lg bg-white shadow-lg border border-outline-variant/20"></div>
      </div>
      <div class="flex items-center gap-4 p-3 rounded-lg bg-surface-container-low">
        <span class="w-16 text-xs font-mono text-on-surface-variant">shadow-2xl</span>
        <div class="flex-1 h-8 rounded-lg bg-white shadow-2xl border border-outline-variant/20"></div>
      </div>
    </div>
  </div>
  <!-- Keyboard Shortcuts -->
  <div class="bg-white rounded-2xl border border-outline-variant/30 p-6 space-y-4">
    <h3 class="font-bold text-on-surface flex items-center gap-2">
      <svg class="w-5 h-5 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
      Keyboard Shortcuts
    </h3>
    <div class="space-y-2 text-sm">
      <div class="flex items-center justify-between py-1.5 border-b border-outline-variant/10"><span class="text-on-surface-variant">New Host</span><kbd class="px-2 py-0.5 rounded bg-surface-container-low text-xs font-mono text-on-surface">Cmd + N</kbd></div>
      <div class="flex items-center justify-between py-1.5 border-b border-outline-variant/10"><span class="text-on-surface-variant">New Snippet</span><kbd class="px-2 py-0.5 rounded bg-surface-container-low text-xs font-mono text-on-surface">Cmd + I</kbd></div>
      <div class="flex items-center justify-between py-1.5 border-b border-outline-variant/10"><span class="text-on-surface-variant">Toggle View</span><kbd class="px-2 py-0.5 rounded bg-surface-container-low text-xs font-mono text-on-surface">Cmd + T</kbd></div>
      <div class="flex items-center justify-between py-1.5 border-b border-outline-variant/10"><span class="text-on-surface-variant">Search</span><kbd class="px-2 py-0.5 rounded bg-surface-container-low text-xs font-mono text-on-surface">Cmd + P</kbd></div>
      <div class="flex items-center justify-between py-1.5 border-b border-outline-variant/10"><span class="text-on-surface-variant">Quick Terminal</span><kbd class="px-2 py-0.5 rounded bg-surface-container-low text-xs font-mono text-on-surface">Cmd + K</kbd></div>
      <div class="flex items-center justify-between py-1.5 border-b border-outline-variant/10"><span class="text-on-surface-variant">Close Panel</span><kbd class="px-2 py-0.5 rounded bg-surface-container-low text-xs font-mono text-on-surface">Esc</kbd></div>
    </div>
  </div>
 </div>
 {{end}}
@@ -0,0 +1,107 @@
 {{define "host_list"}}
 <div id="host-list" class="flex flex-col gap-4">
  <div x-show="view === 'grid'" x-cloak
       class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
    {{range .Hosts}}
    <div class="group bg-white p-5 rounded-2xl border border-outline-variant hover:border-primary hover:shadow-lg transition-all relative overflow-hidden">
      <div class="flex justify-between items-start mb-4">
        <div class="w-11 h-11 rounded-xl bg-surface-container-low flex items-center justify-center text-primary border border-outline-variant/20 group-hover:bg-primary-container/10 group-hover:border-primary/20 transition-colors">
          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5 12h14M12 5l7 7-7 7"/></svg>
        </div>
        <div class="flex items-center gap-1.5">
          <span class="w-2 h-2 rounded-full {{if eq .Status "active"}}bg-secondary animate-pulse{{else}}bg-outline{{end}}"></span>
          <span class="text-[10px] font-bold uppercase tracking-wider {{if eq .Status "active"}}text-secondary{{else}}text-outline{{end}}">{{.Status}}</span>
        </div>
      </div>
      <h4 class="font-bold text-on-surface group-hover:text-primary transition-colors text-base truncate">{{.Name}}</h4>
      <p class="font-mono text-xs text-outline mb-1">{{.IP}}</p>
      <p class="text-[10px] text-on-surface-variant mb-3" x-data="{ show: false }">
        <span class="font-medium">{{.Username | default "root"}}@{{if .Hostname}}{{.Hostname}}{{else}}{{.IP}}{{end}}{{if ne .Port 22}}:{{.Port}}{{end}}</span>
      </p>
      {{if .Type}}<div class="flex flex-wrap gap-1.5 mb-4">
        <span class="px-2 py-0.5 bg-primary-container/10 text-primary rounded text-[10px] font-bold uppercase">{{.Type}}</span>
      </div>{{end}}
      <div class="pt-3 border-t border-outline-variant/30 flex justify-between items-center text-xs">
        <span class="text-outline italic">Last seen {{.LastSeen}}</span>
        <div class="flex gap-1">
          <a href="/terminal?host={{.ID}}" class="bg-primary text-white hover:bg-primary-container hover:text-on-primary-container font-bold text-xs py-1.5 px-3 rounded-lg transition-all">Connect</a>
          <button type="button"
                  @click="$dispatch('edit-host', { ID: '{{.ID}}', Name: '{{.Name}}', IP: '{{.IP}}', Hostname: '{{.Hostname}}', Port: {{.Port}}, Username: '{{.Username}}', Type: '{{.Type}}', AuthType: '{{.AuthType}}', Password: '{{.Password}}', Notes: '{{.Notes}}' })"
                  class="p-1.5 rounded-lg hover:bg-surface-container text-on-surface-variant hover:text-primary transition-colors" title="Edit">
            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"/></svg>
          </button>
          <button class="p-1.5 rounded-lg hover:bg-red-50 text-on-surface-variant hover:text-red-500 transition-colors"
                  hx-delete="/hosts/{{.ID}}" hx-target="#host-list" hx-confirm="Delete {{.Name}}?" title="Delete"
                  @click="$dispatch('toast-message', { message: 'Host deleted' })">
            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
          </button>
        </div>
      </div>
    </div>
    {{end}}
    <div @click="$dispatch('open-modal')"
         class="group border-2 border-dashed border-outline-variant hover:border-primary hover:bg-primary/5 rounded-2xl flex flex-col items-center justify-center p-8 transition-all cursor-pointer text-center text-outline hover:text-primary min-h-[200px]">
      <svg class="w-8 h-8 mb-2 group-active:scale-90 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 4v16m8-8H4"/></svg>
      <span class="font-bold text-sm text-on-surface-variant group-hover:text-primary">Add New Host</span>
      <p class="text-[10px] uppercase tracking-widest mt-1 opacity-70">Manual Config or Discovery</p>
    </div>
  </div>
  <div x-show="view === 'list'" x-cloak
       class="bg-white border border-outline-variant rounded-2xl overflow-hidden shadow-sm divide-y divide-outline-variant/30">
    {{range .Hosts}}
    <div class="flex items-center justify-between p-4 hover:bg-primary/5 transition-colors group">
      <div class="flex items-center gap-4 min-w-0 flex-1">
        <div class="w-10 h-10 rounded-lg bg-surface-container-low flex items-center justify-center text-primary shrink-0 border border-outline-variant/20">
          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5 12h14M12 5l7 7-7 7"/></svg>
        </div>
        <div class="min-w-0 flex-1 sm:grid sm:grid-cols-2 sm:gap-4 items-center">
          <div>
            <h4 class="font-bold text-on-surface group-hover:text-primary transition-colors text-sm truncate">{{.Name}}</h4>
            <span class="font-mono text-xs text-outline">{{.IP}}</span>
          </div>
          <div class="hidden md:block">
            <span class="text-xs text-outline italic">Seen {{.LastSeen}}</span>
          </div>
        </div>
      </div>
      <div class="flex items-center gap-2 ml-4 shrink-0">
        <span class="px-2 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wider flex items-center gap-1 {{if eq .Status "active"}}bg-secondary-container/20 text-secondary{{else}}bg-surface-container text-outline{{end}}">
          <span class="w-1.5 h-1.5 rounded-full {{if eq .Status "active"}}bg-secondary animate-pulse{{else}}bg-outline{{end}}"></span>
          {{.Status}}
        </span>
        <a href="/terminal?host={{.ID}}" class="bg-primary text-white hover:bg-primary-container hover:text-on-primary-container font-bold text-xs py-1.5 px-4 rounded-lg transition-all">Connect</a>
        <button type="button"
                @click="$dispatch('edit-host', { ID: '{{.ID}}', Name: '{{.Name}}', IP: '{{.IP}}', Hostname: '{{.Hostname}}', Port: {{.Port}}, Username: '{{.Username}}', Type: '{{.Type}}', AuthType: '{{.AuthType}}', Password: '{{.Password}}', Notes: '{{.Notes}}' })"
                class="p-1.5 rounded-lg hover:bg-surface-container text-on-surface-variant hover:text-primary transition-colors" title="Edit">
          <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"/></svg>
        </button>
        <button class="p-1.5 rounded-lg hover:bg-red-50 text-on-surface-variant hover:text-red-500 transition-colors"
                hx-delete="/hosts/{{.ID}}" hx-target="#host-list" hx-confirm="Delete {{.Name}}?" title="Delete"
                @click="$dispatch('toast-message', { message: 'Host deleted' })">
          <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
        </button>
      </div>
    </div>
    {{end}}
    <div @click="$dispatch('open-modal')"
         class="p-4 hover:bg-primary/5 transition-colors cursor-pointer flex items-center justify-center gap-2 text-outline hover:text-primary font-bold text-sm">
      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 4v16m8-8H4"/></svg>
      Add New Host
    </div>
  </div>
  {{if eq (len .Hosts) 0}}
  <div class="text-center py-12 text-on-surface-variant">
    <svg class="w-12 h-12 mx-auto mb-3 text-outline/40" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5 12h14M12 5l7 7-7 7"/></svg>
    <p class="text-lg font-medium">No hosts found</p>
    <p class="text-sm mt-1">Add your first server to get started</p>
  </div>
  {{end}}
 </div>
 {{end}}
@@ -0,0 +1,181 @@
 {{define "host_modal"}}
 <div id="host-modal" class="fixed inset-0 z-50" x-data="hostForm()" x-show="open" x-cloak
     @open-modal.window="reset(); open = true"
     @edit-host.window="populate($event.detail); open = true"
     @keydown.escape.window="open = false">
  <div class="absolute inset-0 bg-black/40 backdrop-blur-sm" @click="open = false"></div>
  <div class="absolute inset-0 overflow-y-auto p-4" x-show="open" x-transition>
    <div class="flex min-h-full items-center justify-center">
      <div class="bg-white rounded-2xl max-w-lg w-full border border-outline-variant/30 shadow-2xl max-h-[90vh] overflow-y-auto">
      <div class="flex justify-between items-center border-b border-outline-variant/30 p-6 pb-4">
        <h3 class="font-bold text-lg text-on-surface" x-text="editing ? 'Edit Host' : 'Add Host'"></h3>
        <button @click="open = false"
                class="text-outline hover:text-primary cursor-pointer p-1 rounded-lg">
          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
        </button>
      </div>
      <form hx-post="/hosts"
            hx-target="#host-list" hx-swap="innerHTML"
            @submit="open = false; $dispatch('toast-message', { message: editing ? 'Host updated' : 'Host added' })"
            class="p-6 space-y-4 text-sm">
        <input type="hidden" name="hostId" :value="editing ? hostId : ''">
        <div class="grid grid-cols-2 gap-4">
          <div class="flex flex-col gap-1.5">
            <label class="text-xs font-bold text-on-surface-variant uppercase">Host Identifier</label>
            <input type="text" name="name" x-model="form.name" required placeholder="e.g. prod-db-replica"
                   class="w-full bg-surface-container-low border border-outline-variant/40 rounded-lg py-2.5 px-4 focus:ring-2 focus:ring-primary/20 focus:border-primary focus:outline-none transition-all font-medium text-on-surface">
          </div>
          <div class="flex flex-col gap-1.5">
            <label class="text-xs font-bold text-on-surface-variant uppercase">IP Address / Domain</label>
            <input type="text" name="ip" x-model="form.ip" required placeholder="e.g. 10.0.12.19"
                   class="w-full bg-surface-container-low border border-outline-variant/40 rounded-lg py-2.5 px-4 focus:ring-2 focus:ring-primary/20 focus:border-primary focus:outline-none transition-all font-mono text-on-surface">
          </div>
        </div>
        <div class="grid grid-cols-2 gap-4">
          <div class="flex flex-col gap-1.5">
            <label class="text-xs font-bold text-on-surface-variant uppercase">Hostname (SSH)</label>
            <input type="text" name="hostname" x-model="form.hostname" placeholder="e.g. prod.example.com"
                   class="w-full bg-surface-container-low border border-outline-variant/40 rounded-lg py-2.5 px-4 focus:ring-2 focus:ring-primary/20 focus:border-primary focus:outline-none transition-all font-mono text-on-surface text-xs">
          </div>
          <div class="flex flex-col gap-1.5">
            <label class="text-xs font-bold text-on-surface-variant uppercase">SSH Port</label>
            <input type="number" name="port" x-model="form.port" min="1" max="65535" placeholder="22"
                   class="w-full bg-surface-container-low border border-outline-variant/40 rounded-lg py-2.5 px-4 focus:ring-2 focus:ring-primary/20 focus:border-primary focus:outline-none transition-all font-mono text-on-surface text-xs">
          </div>
        </div>
        <div class="flex flex-col gap-1.5">
          <label class="text-xs font-bold text-on-surface-variant uppercase">SSH Username</label>
          <input type="text" name="username" x-model="form.username" placeholder="root"
                 class="w-full bg-surface-container-low border border-outline-variant/40 rounded-lg py-2.5 px-4 focus:ring-2 focus:ring-primary/20 focus:border-primary focus:outline-none transition-all font-medium text-on-surface">
        </div>
        <div class="flex flex-col gap-1.5">
          <label class="text-xs font-bold text-on-surface-variant uppercase">Host Purpose / Type</label>
          <div class="grid grid-cols-3 gap-2">
            <button type="button" @click="form.type = 'api'"
                    :class="form.type === 'api' ? 'bg-primary text-white border-primary' : 'bg-surface-container-low border-outline-variant/40 text-on-surface-variant hover:bg-surface-container'"
                    class="py-2.5 px-3 border rounded-lg font-bold text-xs uppercase tracking-wider transition-all">API Node</button>
            <button type="button" @click="form.type = 'db'"
                    :class="form.type === 'db' ? 'bg-primary text-white border-primary' : 'bg-surface-container-low border-outline-variant/40 text-on-surface-variant hover:bg-surface-container'"
                    class="py-2.5 px-3 border rounded-lg font-bold text-xs uppercase tracking-wider transition-all">DB Node</button>
            <button type="button" @click="form.type = 'web'"
                    :class="form.type === 'web' ? 'bg-primary text-white border-primary' : 'bg-surface-container-low border-outline-variant/40 text-on-surface-variant hover:bg-surface-container'"
                    class="py-2.5 px-3 border rounded-lg font-bold text-xs uppercase tracking-wider transition-all">Web Node</button>
          </div>
          <input type="hidden" name="type" :value="form.type">
        </div>
        <div class="flex flex-col gap-1.5">
          <label class="text-xs font-bold text-on-surface-variant uppercase">Authentication</label>
          <div class="grid grid-cols-2 gap-2">
            <button type="button" @click="form.authType = 'key'"
                    :class="form.authType === 'key' ? 'bg-primary text-white border-primary' : 'bg-surface-container-low border-outline-variant/40 text-on-surface-variant hover:bg-surface-container'"
                    class="py-2 px-3 border rounded-lg font-bold text-xs uppercase tracking-wider transition-all flex items-center justify-center gap-1.5">
              <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.75 5.25a3 3 0 013 3m3 0a6 6 0 01-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1121.75 8.25z"/></svg>
              SSH Key
            </button>
            <button type="button" @click="form.authType = 'password'"
                    :class="form.authType === 'password' ? 'bg-primary text-white border-primary' : 'bg-surface-container-low border-outline-variant/40 text-on-surface-variant hover:bg-surface-container'"
                    class="py-2 px-3 border rounded-lg font-bold text-xs uppercase tracking-wider transition-all flex items-center justify-center gap-1.5">
              <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z"/></svg>
              Password
            </button>
          </div>
          <input type="hidden" name="authType" :value="form.authType">
        </div>
        <div x-show="form.authType === 'key'" x-cloak class="flex flex-col gap-1.5">
          <label class="text-xs font-bold text-on-surface-variant uppercase">SSH Private Key</label>
          <textarea name="password" rows="5" placeholder="Paste your SSH private key here...&#10;&#10;-----BEGIN OPENSSH PRIVATE KEY-----&#10;...&#10;-----END OPENSSH PRIVATE KEY-----"
                    class="w-full bg-surface-container-low border border-outline-variant/40 rounded-lg py-2.5 px-4 focus:ring-2 focus:ring-primary/20 focus:border-primary focus:outline-none transition-all font-mono text-on-surface text-xs resize-none leading-relaxed"></textarea>
          <div class="flex items-center gap-3 mt-1">
            <label class="flex items-center gap-1.5 text-xs text-on-surface-variant cursor-pointer hover:text-primary 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="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"/></svg>
              Or upload a key file
            </label>
            <input type="file" class="hidden" accept=".pem,.key,.pub,.txt,.ppk" @change="readKeyFile($event)">
            <span class="text-[10px] text-outline">.pem .key .ppk</span>
          </div>
        </div>
        <div x-show="form.authType === 'password'" x-cloak class="flex flex-col gap-1.5">
          <label class="text-xs font-bold text-on-surface-variant uppercase">Password</label>
          <input type="password" name="password" x-model="form.password" placeholder="SSH password"
                 class="w-full bg-surface-container-low border border-outline-variant/40 rounded-lg py-2.5 px-4 focus:ring-2 focus:ring-primary/20 focus:border-primary focus:outline-none transition-all font-mono text-on-surface text-xs">
        </div>
        <div class="flex flex-col gap-1.5">
          <label class="text-xs font-bold text-on-surface-variant uppercase">Notes</label>
          <textarea name="notes" x-model="form.notes" rows="2" placeholder="Optional notes about this host"
                    class="w-full bg-surface-container-low border border-outline-variant/40 rounded-lg py-2.5 px-4 focus:ring-2 focus:ring-primary/20 focus:border-primary focus:outline-none transition-all text-xs resize-none"></textarea>
        </div>
        <div class="pt-4 flex justify-end gap-3 border-t border-outline-variant/20">
          <button type="button" @click="open = false"
                  class="px-4 py-2 text-xs font-bold text-outline hover:text-on-surface transition-colors">Cancel</button>
          <button type="submit"
                  class="bg-primary text-white py-2 px-5 rounded-lg font-bold text-xs shadow-md hover:bg-primary-container hover:text-on-primary-container transition-all"
                  x-text="editing ? 'Save Changes' : 'Add Host'"></button>
        </div>
      </form>
    </div>
    </div>
  </div>
 </div>
 <script>
 function hostForm() {
  return {
    open: false,
    editing: false,
    hostId: '',
    form: {
      name: '', ip: '', hostname: '', port: '22', username: '',
      type: 'api', authType: 'key', password: '', notes: ''
    },
    reset() {
      this.editing = false;
      this.hostId = '';
      this.form = {
        name: '', ip: '', hostname: '', port: '22', username: '',
        type: 'api', authType: 'key', password: '', notes: ''
      };
      var ta = document.querySelector('#host-modal textarea[name=password]');
      if (ta) ta.value = '';
    },
    populate(host) {
      this.editing = true;
      this.hostId = host.ID;
      this.form = {
        name: host.Name || '',
        ip: host.IP || '',
        hostname: host.Hostname || '',
        port: String(host.Port || 22),
        username: host.Username || 'root',
        type: host.Type || 'api',
        authType: host.AuthType || 'key',
        password: host.Password || '',
        notes: host.Notes || ''
      };
      var ta = document.querySelector('#host-modal textarea[name=password]');
      if (ta) ta.value = host.Password || '';
    },
    readKeyFile($event) {
      var file = $event.target.files[0];
      if (!file) return;
      var reader = new FileReader();
      var ta = document.querySelector('#host-modal textarea[name=password]');
      reader.onload = function(e) {
        if (ta) ta.value = e.target.result;
      };
      reader.readAsText(file);
    }
  };
 }
 </script>
 {{end}}
@@ -0,0 +1,182 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hosts · 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>
  <script src="/static/js/clipboard.js"></script>
  <script src="/static/js/utils.js"></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">Hosts</h1>
      </header>
      <main id="main-content" class="flex-1 overflow-auto p-6">
        <div id="dashboard-page" class="max-w-7xl mx-auto space-y-8">
          <div class="border-b border-outline-variant/30 pb-4">
            <h2 class="text-xl font-bold text-on-surface tracking-tight">Hosts</h2>
            <p class="text-xs text-on-surface-variant mt-0.5">Manage connections, monitor uptime, and deploy</p>
          </div>
          <div class="grid grid-cols-1 md:grid-cols-12 gap-6">
            <div class="md:col-span-8 p-6 rounded-2xl bg-white border border-outline-variant shadow-sm flex items-center justify-between overflow-hidden relative group">
              <div class="relative z-10 space-y-2">
                <h3 class="text-on-surface-variant font-bold text-xs uppercase tracking-wider">Active Connections</h3>
                <div class="flex items-end gap-3">
                  <span class="text-4xl font-black text-primary">{{.Active}}</span>
                  <span class="text-secondary font-bold text-sm mb-1 flex items-center bg-secondary-container/20 px-2 py-0.5 rounded-full">
                    <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.25 18L9 11.25l4.306 4.307a11.95 11.95 0 015.814-5.519l2.74-1.22m0 0l-5.94-2.28m5.94 2.28l-2.28 5.941"/></svg>
                    +2 today
                  </span>
                </div>
                <p class="text-xs text-on-surface-variant">Global performance metrics sync integrity active.</p>
              </div>
              <div class="absolute right-0 top-0 w-1/3 h-full bg-gradient-to-l from-primary/5 to-transparent pointer-events-none"></div>
              <div class="flex gap-2 items-end h-16 shrink-0">
                <div class="w-2.5 h-10 bg-primary/20 rounded-full animate-pulse"></div>
                <div class="w-2.5 h-14 bg-primary/40 rounded-full animate-pulse delay-75"></div>
                <div class="w-2.5 h-8 bg-primary/10 rounded-full animate-pulse delay-150"></div>
                <div class="w-2.5 h-16 bg-primary/60 rounded-full animate-pulse delay-200"></div>
              </div>
            </div>
            <div class="md:col-span-4 p-6 rounded-2xl bg-primary text-on-primary shadow-xl shadow-primary/15 flex flex-col justify-between relative overflow-hidden">
              <div class="relative z-10">
                <svg class="w-8 h-8 opacity-90 text-white mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z"/></svg>
                <p class="font-bold text-lg leading-tight">Fastest Access Enabled</p>
              </div>
              <p class="text-xs opacity-85 mt-2 relative z-10">Smart routing engine successfully reduces terminal latency by <span class="font-bold">24ms</span> across European and Asian clusters.</p>
              <div class="absolute -right-6 -bottom-6 opacity-10">
                <svg class="w-32 h-32 rotate-12" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z"/></svg>
              </div>
            </div>
          </div>
          <div x-data="{ view: 'grid' }">
            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 border-b border-outline-variant/30 pb-4 mb-6">
              <div class="flex items-center gap-3">
                <h3 class="text-lg font-bold text-on-surface">Recent Hosts</h3>
                <div class="flex bg-surface-container rounded-lg p-0.5 text-xs font-semibold border border-outline-variant/20"
                     x-data="{ filter: 'all' }">
                  <button @click="filter = 'all'"
                          :class="filter === 'all' ? 'bg-white text-primary shadow-sm' : 'text-on-surface-variant hover:text-on-surface'"
                          class="px-2.5 py-1 rounded-md transition-all"
                          hx-get="/hosts/list?filter=all" hx-target="#host-list">All</button>
                  <button @click="filter = 'active'"
                          :class="filter === 'active' ? 'bg-white text-primary shadow-sm' : 'text-on-surface-variant hover:text-on-surface'"
                          class="px-2.5 py-1 rounded-md transition-all"
                          hx-get="/hosts/list?filter=active" hx-target="#host-list">Active</button>
                  <button @click="filter = 'offline'"
                          :class="filter === 'offline' ? 'bg-white text-primary shadow-sm' : 'text-on-surface-variant hover:text-on-surface'"
                          class="px-2.5 py-1 rounded-md transition-all"
                          hx-get="/hosts/list?filter=offline" hx-target="#host-list">Offline</button>
                </div>
              </div>
              <div class="flex items-center gap-3">
                <div class="relative">
                  <svg class="absolute left-3 top-1/2 -translate-y-1/2 text-outline w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
                   <input type="search" name="q" placeholder="Search hosts..."
                         hx-get="/hosts/list" hx-trigger="keyup delay:200ms"
                         hx-target="#host-list"
                         class="pl-9 pr-4 py-1.5 rounded-full bg-surface-container-low border border-outline-variant/30 text-sm focus:border-primary focus:bg-white focus:outline-none focus:ring-1 focus:ring-primary w-48 sm:w-60 transition-all text-on-surface placeholder-on-surface-variant">
                </div>
                <div class="flex border border-outline-variant/50 rounded-lg p-0.5 bg-white">
                  <button @click="view = 'grid'"
                          :class="view === 'grid' ? 'bg-surface-container text-primary' : 'text-on-surface-variant'"
                          class="p-1.5 rounded transition-colors" title="Grid View">
                    <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-surface-container text-primary' : 'text-on-surface-variant'"
                          class="p-1.5 rounded transition-colors" title="List View">
                    <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>
            {{template "host_list" .}}
          </div>
        </div>
        <!-- Transfer Activity Panel -->
        <div class="space-y-4 mt-8">
          <div class="flex items-center gap-4">
            <h3 class="text-base font-bold text-on-surface tracking-tight shrink-0">Background Transfers</h3>
            <div class="flex-1 h-px bg-outline-variant/30"></div>
          </div>
          <div class="bg-white/50 backdrop-blur-sm border border-outline-variant rounded-2xl overflow-hidden shadow-sm">
            <div class="p-4 border-b border-outline-variant flex items-center justify-between bg-surface-container-low">
              <div class="flex gap-12 text-xs font-bold text-on-surface-variant uppercase tracking-tight">
                <span>Source &amp; File</span>
                <span>Destination</span>
              </div>
              <span class="text-xs font-bold text-on-surface-variant uppercase tracking-tight">Progress</span>
            </div>
            <div class="divide-y divide-outline-variant/30 bg-white">
              {{range .Transfers}}
              <div class="p-4 flex flex-col sm:flex-row sm:items-center justify-between gap-4 hover:bg-primary/5 transition-colors">
                <div class="flex items-center gap-4 min-w-0 flex-1">
                  <div class="p-2 rounded-lg {{if eq .Type "download"}}bg-tertiary/10 text-tertiary{{else}}bg-primary/10 text-primary{{end}}">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                  </div>
                  <div class="min-w-0 flex-1 grid grid-cols-1 sm:grid-cols-2 gap-2">
                    <div>
                      <p class="text-sm font-bold truncate text-on-surface">{{.FileName}}</p>
                      <span class="text-[10px] font-mono text-outline block">{{.Source}}</span>
                    </div>
                    <div class="flex items-center gap-1 text-on-surface-variant text-xs">
                      <svg class="w-4 h-4 text-outline shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
                      <span class="truncate">{{.Destination}}</span>
                    </div>
                  </div>
                </div>
                <div class="w-full sm:w-48 shrink-0">
                  <div class="flex justify-between items-center mb-1">
                    <span class="text-[10px] font-bold text-secondary">{{.Progress}}%</span>
                    <span class="text-[10px] text-outline font-mono">{{.Speed}}</span>
                  </div>
                  <div class="h-1.5 w-full bg-surface-container-high rounded-full overflow-hidden">
                    <div class="h-full bg-secondary rounded-full transition-all duration-500 shadow-[0_0_8px_rgba(0,110,47,0.3)]"
                         style="width: {{.Progress}}%"></div>
                  </div>
                </div>
              </div>
              {{end}}
              {{if not .Transfers}}
              <div class="p-8 text-center text-on-surface-variant">
                <svg class="w-10 h-10 mx-auto mb-2 text-outline/30" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"/></svg>
                <p class="text-sm font-medium">No active transfers</p>
              </div>
              {{end}}
            </div>
          </div>
        </div>
        {{template "host_modal" .}}
      </main>
    </div>
  </div>
  <!-- Toast -->
  <div x-data="{ show: false, msg: '' }" x-cloak
       @toast-message.window="msg = $event.detail.message; show = true; setTimeout(() => show = false, 3000)"
       x-show="show" x-transition
       class="fixed bottom-6 right-6 z-[200] bg-inverse-surface text-inverse-on-surface px-5 py-3 rounded-xl shadow-xl flex items-center gap-3 text-sm font-medium">
    <svg class="w-4 h-4 text-secondary shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
    <span x-text="msg"></span>
  </div>
 </body>
 </html>
@@ -0,0 +1,88 @@
 {{define "credential_grid"}}
 {{range $i, $key := .Keys}}
 <div class="bg-white p-5 rounded-2xl border border-outline-variant/30 hover:border-primary hover:shadow-lg transition-all flex flex-col justify-between space-y-4"
     x-data="{ reveal: false }">
  <div class="flex justify-between items-start gap-3">
    <div class="flex items-center gap-3">
      <div class="w-10 h-10 rounded-xl bg-surface-container-low border border-outline-variant/20 flex items-center justify-center text-primary">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>
      </div>
      <div>
        <h3 class="font-bold text-on-surface text-base truncate max-w-[180px]">{{.Name}}</h3>
        <span class="text-[10px] font-mono text-outline uppercase tracking-wider">{{.Type}}</span>
      </div>
    </div>
    {{if eq .Strength "secure"}}
    <span class="shrink-0 px-2.5 py-0.5 bg-secondary/10 text-secondary border border-secondary/20 rounded-full text-[10px] font-bold uppercase tracking-wider flex items-center gap-1">
      <svg class="w-3.5 h-3.5 text-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
      SECURE
    </span>
    {{else if eq .Strength "moderate"}}
    <span class="shrink-0 px-2.5 py-0.5 bg-purple-50 text-tertiary border border-tertiary/20 rounded-full text-[10px] font-bold uppercase tracking-wider flex items-center gap-1">
      <svg class="w-3.5 h-3.5 text-tertiary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
      MODERATE
    </span>
    {{else}}
    <span class="shrink-0 px-2.5 py-0.5 bg-red-50 text-error border border-error/20 rounded-full text-[10px] font-bold uppercase tracking-wider flex items-center gap-1">
      <svg class="w-3.5 h-3.5 text-error" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg>
      WEAK
    </span>
    {{end}}
  </div>
  <div class="space-y-2 text-xs">
    <div class="flex justify-between items-center py-1 border-b border-outline-variant/10">
      <span class="text-outline font-semibold uppercase tracking-wider text-[10px]">User Login</span>
      <span class="font-mono text-on-surface font-semibold">{{.Username}}</span>
    </div>
    <div class="flex justify-between items-center py-1 border-b border-outline-variant/10">
      <span class="text-outline font-semibold uppercase tracking-wider text-[10px]">Credential Secrets</span>
      <div class="flex items-center gap-2">
        <span x-show="!reveal" class="font-mono text-on-surface-variant">••••••••••••••••</span>
        <button @click="reveal = !reveal"
                class="p-1 hover:bg-surface-container rounded text-outline transition-colors" title="Toggle visibility">
          <svg x-show="reveal" class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a10.06 10.06 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88L6.59 6.59m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"/></svg>
          <svg x-show="!reveal" class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
        </button>
        <button data-copy="{{.Passphrase}}"
                class="p-1 hover:bg-surface-container rounded text-outline transition-colors" title="Copy secret">
          <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg>
        </button>
      </div>
    </div>
    <div x-show="reveal" x-cloak class="py-1">
      <code class="text-[10px] text-on-surface-variant font-mono block break-all bg-surface-container-low p-2 rounded border border-outline-variant/20 max-h-32 overflow-y-auto select-all whitespace-pre-wrap">{{.Passphrase}}</code>
    </div>
    {{if .Fingerprint}}
    <div class="py-1">
      <span class="text-outline font-semibold uppercase tracking-wider text-[10px] block mb-0.5">SHA256 FINGERPRINT</span>
      <code class="text-[10px] text-on-surface-variant font-mono block break-all bg-surface-container-low p-2 rounded border border-outline-variant/20 select-all">{{.Fingerprint}}</code>
    </div>
    {{end}}
  </div>
  <div class="pt-3 border-t border-outline-variant/30 flex flex-col sm:flex-row sm:items-center justify-between gap-3 text-[10px] text-outline">
    <span class="shrink-0">Created {{.CreatedAt}}</span>
    <div class="flex items-center justify-between sm:justify-end gap-2 flex-1 min-w-0 w-full">
      <div class="flex items-center gap-1.5 min-w-0 flex-1 justify-start sm:justify-end">
        {{if .URL}}
        <span class="bg-primary-container/15 text-primary px-1.5 py-0.5 rounded font-mono text-[9px] shrink-0">{{.URL}}</span>
        {{end}}
      </div>
      <button hx-delete="/keys/{{.ID}}" hx-target="#key-grid" hx-confirm="Delete {{.Name}}?"
              class="p-1 hover:bg-red-50 hover:text-error rounded text-outline transition-colors shrink-0 ml-1">
        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
      </button>
    </div>
  </div>
 </div>
 {{end}}
 {{if eq (len .Keys) 0}}
 <div class="col-span-full p-12 border border-dashed border-outline-variant/40 rounded-2xl text-center text-outline">
  No credentials found. Add your first credential.
 </div>
 {{end}}
 {{end}}
@@ -0,0 +1,143 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Keychain · 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>
  <script src="/static/js/clipboard.js"></script>
  <script src="/static/js/utils.js"></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" x-data>
        <div class="max-w-7xl mx-auto space-y-8">
          <!-- Header Panel -->
          <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 border-b border-outline-variant/30 pb-4">
            <div>
              <h2 class="text-xl font-bold text-on-surface tracking-tight">Keychain & Credentials</h2>
              <p class="text-xs text-on-surface-variant mt-0.5">Secure sandbox containing cluster credentials, private SSH keys, and tokens</p>
            </div>
            <div class="flex items-center gap-3">
              <div class="relative">
                <svg class="absolute left-3 top-1/2 -translate-y-1/2 text-outline w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
                <input type="search" name="q" placeholder="Search credentials..."
                       hx-get="/keys/grid" hx-trigger="keyup delay:200ms" hx-target="#key-grid"
                       class="pl-9 pr-4 py-1.5 rounded-full bg-surface-container-low border border-outline-variant/30 text-sm focus:border-primary focus:bg-white focus:outline-none focus:ring-1 focus:ring-primary w-48 sm:w-60 transition-all">
              </div>
              <button @click="$dispatch('open-key-modal')"
                      class="flex items-center gap-1.5 bg-primary text-white hover:bg-primary/90 font-bold text-xs py-2 px-4 rounded-xl shadow-md transition-all">
                <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="M12 4v16m8-8H4"/></svg>
                Add Key
              </button>
            </div>
          </div>
          <!-- Grid List -->
          <div class="grid grid-cols-1 md:grid-cols-2 gap-6" id="key-grid">
            {{template "credential_grid" .}}
          </div>
          <!-- Security Advisory Bento -->
          <div class="p-5 border border-outline-variant/60 rounded-2xl bg-white/40 flex items-start gap-4 text-xs text-on-surface">
            <svg class="w-5 h-5 text-primary shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
            <div class="space-y-1">
              <h4 class="font-bold text-on-surface">HostKeeper Security Policy & Local Sandbox</h4>
              <p class="text-on-surface-variant leading-relaxed">
                Keys are parsed locally inside your isolated browser environment and transmitted strictly within cryptographically verified SSH tunnels. Passphrases are hashed with Argon2id instantly and never touch intermediate telemetry systems.
              </p>
            </div>
          </div>
        </div>
        <!-- Add Credential Modal -->
        <div id="key-modal" class="fixed inset-0 z-50" x-show="open" x-cloak
             x-data="{ open: false, readFile($event) {
               const file = $event.target.files[0];
               if (!file) return;
               const reader = new FileReader();
               reader.onload = (e) => {
                 document.querySelector('textarea[name=passphrase]').value = e.target.result;
                 document.querySelector('textarea[name=passphrase]').dispatchEvent(new Event('input'));
               };
               reader.readAsText(file);
             }}"
             @open-key-modal.window="open = true" @keydown.escape.window="open = false">
          <div class="absolute inset-0 bg-black/40 backdrop-blur-sm" @click="open = false"></div>
          <div class="absolute inset-0 flex items-center justify-center p-4" x-show="open" x-transition>
            <div class="bg-white rounded-2xl max-w-lg w-full border border-outline-variant/30 shadow-2xl max-h-[90vh] overflow-y-auto">
              <div class="flex justify-between items-center border-b border-outline-variant/30 p-6 pb-4">
                <h3 class="font-bold text-lg text-on-surface">Register Secure Credential</h3>
                <button @click="open = false" class="text-outline hover:text-primary cursor-pointer p-1 rounded-lg">
                  <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
                </button>
              </div>
              <form hx-post="/keys" hx-target="#key-grid" hx-swap="innerHTML"
                    @submit="open = false" class="p-6 space-y-4 text-sm">
                <div class="flex flex-col gap-1.5">
                  <label class="text-xs font-bold text-on-surface-variant uppercase">Credential Name / Label</label>
                  <input type="text" name="name" required placeholder="e.g. key_aws_alex"
                         class="w-full bg-surface-container-low border border-outline-variant/40 rounded-lg py-2.5 px-4 focus:ring-2 focus:ring-primary/20 focus:border-primary focus:outline-none transition-all font-medium text-on-surface">
                </div>
                <div class="grid grid-cols-2 gap-4">
                  <div class="flex flex-col gap-1.5">
                    <label class="text-xs font-bold text-on-surface-variant uppercase">Credential Type</label>
                    <select name="type"
                            class="bg-surface-container-low border border-outline-variant/40 rounded-lg py-2 px-3 focus:outline-none focus:border-primary text-sm text-on-surface">
                      <option value="ED25519">ED25519 (Modern)</option>
                      <option value="SSH RSA">SSH RSA (Legacy)</option>
                      <option value="PASSWORD">Master Password</option>
                      <option value="Bearer Token">Bearer Token</option>
                      <option value="AWS Key">AWS Access Key</option>
                    </select>
                  </div>
                  <div class="flex flex-col gap-1.5">
                    <label class="text-xs font-bold text-on-surface-variant uppercase">Login Username</label>
                    <input type="text" name="username" required placeholder="e.g. root or ubuntu"
                           class="w-full bg-surface-container-low border border-outline-variant/40 rounded-lg py-2.5 px-3 focus:outline-none focus:border-primary text-on-surface">
                  </div>
                </div>
                <div class="flex flex-col gap-1.5">
                  <label class="text-xs font-bold text-on-surface-variant uppercase">Key / Secret Value</label>
                  <textarea name="passphrase" required rows="5"
                            placeholder="Paste your key or secret here...&#10;&#10;Example SSH key:&#10;-----BEGIN OPENSSH PRIVATE KEY-----&#10;b3BlbnNzaC1rZXktdjEAAAAIA...&#10;-----END OPENSSH PRIVATE KEY-----"
                            class="w-full bg-surface-container-low border border-outline-variant/40 rounded-lg py-2.5 px-4 focus:ring-2 focus:ring-primary/20 focus:border-primary focus:outline-none transition-all font-mono text-on-surface text-xs resize-none leading-relaxed"></textarea>
                  <div class="flex items-center gap-3 mt-1">
                    <label class="flex items-center gap-1.5 text-xs text-on-surface-variant cursor-pointer hover:text-primary 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="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"/></svg>
                      Or upload a key file
                    </label>
                    <input type="file" class="hidden" accept=".pem,.key,.pub,.txt,.ppk,.p12,.pfx" @change="readFile($event)">
                    <span class="text-[10px] text-outline">.pem .key .ppk .pub .txt</span>
                  </div>
                </div>
                <div class="pt-4 flex justify-end gap-3 border-t border-outline-variant/20">
                  <button type="button" @click="open = false"
                          class="px-4 py-2 text-xs font-bold text-outline hover:text-on-surface transition-colors">Cancel</button>
                  <button type="submit"
                          class="bg-primary text-white py-2 px-5 rounded-lg font-bold text-xs shadow-md hover:bg-primary-container hover:text-on-primary-container transition-all">Save Credential</button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </main>
    </div>
  </div>
 </body>
 </html>
@@ -0,0 +1,37 @@
 {{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"
     x-data="{ page: '{{.View}}' }">
  <div class="p-3 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}}"
       :class="page === '{{.ID}}' ? 'bg-primary/10 text-primary font-medium' : 'text-on-surface-variant hover:bg-surface-container-low hover:text-on-surface'"
       class="flex items-center gap-3 px-3 py-2 rounded-lg transition-colors text-sm">
      <span class="w-5 h-5 flex items-center justify-center">{{svg .Icon}}</span>
      <span>{{.Label}}</span>
    </a>
    {{end}}
  </div>
  <div class="px-3 py-3 border-t border-outline-variant/20">
    <p class="text-xs font-medium text-on-surface-variant uppercase tracking-wide mb-2 px-3">Transfers</p>
    <div class="px-3 py-2 rounded-lg bg-surface-container-low/50 text-xs text-on-surface-variant flex items-center gap-2">
      <span class="w-1.5 h-1.5 rounded-full bg-on-surface-variant/30"></span>
      No active transfers
    </div>
  </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}}
@@ -0,0 +1,29 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Settings · 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>
  <script src="/static/js/clipboard.js"></script>
  <script src="/static/js/utils.js"></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">
        {{template "settings_content" .}}
      </main>
    </div>
  </div>
 </body>
 </html>
@@ -0,0 +1,244 @@
 {{define "settings_content"}}
 <div class="max-w-7xl mx-auto space-y-8 text-sm" x-data="{ toast: '', showToast: false, saveSuccess: false }"
     x-init="$watch('showToast', v => v && setTimeout(() => showToast = false, 3000))">
  <!-- Toast -->
  <div x-show="showToast" x-cloak
       class="fixed bottom-6 right-6 z-[180] bg-inverse-surface text-inverse-on-surface px-5 py-3.5 rounded-xl shadow-xl flex items-center gap-3 border border-outline/20 animate-slide-in text-xs font-semibold">
    <svg class="w-4 h-4 text-secondary animate-bounce" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
    <span x-text="toast"></span>
  </div>
  <!-- Header -->
  <div class="border-b border-outline-variant/30 pb-4">
    <h2 class="text-xl font-bold text-on-surface tracking-tight">Workspace Preferences</h2>
    <p class="text-xs text-on-surface-variant mt-0.5">Configure authentication sync protocols and cloud billing</p>
  </div>
  <div class="grid grid-cols-1 lg:grid-cols-12 gap-8">
    <!-- Left: profile + toggles -->
    <div class="lg:col-span-8 space-y-8">
      <!-- Profile Form -->
      <div class="bg-white p-6 rounded-2xl border border-outline-variant/30 shadow-sm space-y-6">
        <h3 class="font-bold text-on-surface text-base flex items-center gap-2">
          <svg class="w-5 h-5 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
          Developer Profile
        </h3>
        <form method="post" action="/settings" class="grid grid-cols-1 sm:grid-cols-2 gap-5">
          <div class="flex flex-col gap-1.5">
            <label class="text-xs font-bold text-on-surface-variant">FULL NAME</label>
            <input type="text" name="name" value="User"
                   class="w-full bg-surface-container-low border border-outline-variant/40 rounded-lg py-2.5 px-4 focus:ring-2 focus:ring-primary/20 focus:border-primary focus:outline-none transition-all font-semibold text-on-surface">
          </div>
          <div class="flex flex-col gap-1.5">
            <label class="text-xs font-bold text-on-surface-variant">EMAIL ADDRESS</label>
            <input type="email" name="email" value="user@hostkeeper.io"
                   class="w-full bg-surface-container-low border border-outline-variant/40 rounded-lg py-2.5 px-4 focus:ring-2 focus:ring-primary/20 focus:border-primary focus:outline-none transition-all font-medium text-on-surface">
          </div>
          <div class="flex flex-col gap-1.5 sm:col-span-2">
            <label class="text-xs font-bold text-on-surface-variant">WORKPLACE DESIGNATION / ROLE</label>
            <input type="text" name="role" value="DevOps Engineer"
                   class="w-full bg-surface-container-low border border-outline-variant/40 rounded-lg py-2.5 px-4 focus:ring-2 focus:ring-primary/20 focus:border-primary focus:outline-none transition-all font-medium text-on-surface">
          </div>
          <div class="sm:col-span-2 pt-2 flex justify-end">
            <button type="submit"
                    class="flex items-center gap-2 bg-primary text-white hover:bg-primary/90 font-bold text-xs py-2.5 px-6 rounded-xl shadow-md transition-all">
              <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="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4"/></svg>
              Save Changes
            </button>
          </div>
        </form>
      </div>
      <!-- Feature Toggles -->
      <div class="bg-white p-6 rounded-2xl border border-outline-variant/30 shadow-sm space-y-6">
        <h3 class="font-bold text-on-surface text-base flex items-center gap-2">
          <svg class="w-5 h-5 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>
          Security & Transmission Protocols
        </h3>
        <div class="space-y-4 divide-y divide-outline-variant/20">
          <label class="flex items-center justify-between py-3">
            <div class="space-y-0.5 pr-4">
              <h4 class="font-bold text-on-surface text-xs sm:text-sm">Cryptographic Keychain Backup</h4>
              <p class="text-xs text-on-surface-variant">Synchronize securely encrypted keys automatically inside iCloud/Google drive sandboxes.</p>
            </div>
            <button type="button" role="switch"
                    x-data="{ on: true }"
                    @click="on = !on; $el.classList.toggle('active')"
                    :class="on ? 'active' : ''"
                    class="toggle-switch" style="width:44px;height:24px">
              <span class="toggle-knob"></span>
            </button>
          </label>
          <label class="flex items-center justify-between pt-3">
            <div class="space-y-0.5 pr-4">
              <h4 class="font-bold text-on-surface text-xs sm:text-sm">Real-time SFTP Connection Polling</h4>
              <p class="text-xs text-on-surface-variant">Enable background file watchers to automatically refresh the directory tree upon local file modifications.</p>
            </div>
            <button type="button" role="switch"
                    x-data="{ on: true }"
                    @click="on = !on; $el.classList.toggle('active')"
                    :class="on ? 'active' : ''"
                    class="toggle-switch" style="width:44px;height:24px">
              <span class="toggle-knob"></span>
            </button>
          </label>
          <label class="flex items-center justify-between pt-3">
            <div class="space-y-0.5 pr-4">
              <h4 class="font-bold text-on-surface text-xs sm:text-sm">Desktop Push Notifications</h4>
              <p class="text-xs text-on-surface-variant">Trigger native system indicators upon complete transmissions of download/upload streams.</p>
            </div>
            <button type="button" role="switch"
                    x-data="{ on: false }"
                    @click="on = !on; $el.classList.toggle('active')"
                    :class="on ? 'active' : ''"
                    class="toggle-switch" style="width:44px;height:24px">
              <span class="toggle-knob"></span>
            </button>
          </label>
        </div>
      </div>
      <!-- Terminal Settings -->
      <div class="bg-white p-6 rounded-2xl border border-outline-variant/30 shadow-sm space-y-6">
        <h3 class="font-bold text-on-surface text-base flex items-center gap-2">
          <svg class="w-5 h-5 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
          Terminal Preferences
        </h3>
        <form method="post" action="/settings" class="space-y-5">
          <div class="grid grid-cols-2 gap-4">
            <div class="flex flex-col gap-1">
              <label class="text-xs font-bold text-on-surface-variant">FONT SIZE</label>
              <select name="fontSize"
                      class="w-full bg-surface-container-low border border-outline-variant/40 rounded-lg py-2.5 px-3 focus:outline-none focus:border-primary">
                <option value="12">12px</option>
                <option value="13">13px</option>
                <option value="14" selected>14px</option>
                <option value="15">15px</option>
                <option value="16">16px</option>
                <option value="18">18px</option>
              </select>
            </div>
            <div class="flex flex-col gap-1">
              <label class="text-xs font-bold text-on-surface-variant">SCROLLBACK</label>
              <select name="scrollback"
                      class="w-full bg-surface-container-low border border-outline-variant/40 rounded-lg py-2.5 px-3 focus:outline-none focus:border-primary">
                <option value="1000">1,000</option>
                <option value="5000" selected>5,000</option>
                <option value="10000">10,000</option>
              </select>
            </div>
          </div>
          <label class="flex items-center justify-between py-2">
            <span class="text-sm font-medium text-on-surface">Blinking Cursor</span>
            <button type="button" role="switch"
                    x-data="{ on: true }"
                    @click="on = !on; $el.classList.toggle('active')"
                    :class="on ? 'active' : ''"
                    class="toggle-switch" style="width:44px;height:24px">
              <span class="toggle-knob"></span>
            </button>
          </label>
          <label class="flex items-center justify-between py-2">
            <span class="text-sm font-medium text-on-surface">Terminal Bell</span>
            <button type="button" role="switch"
                    x-data="{ on: false }"
                    @click="on = !on; $el.classList.toggle('active')"
                    :class="on ? 'active' : ''"
                    class="toggle-switch" style="width:44px;height:24px">
              <span class="toggle-knob"></span>
            </button>
          </label>
          <label class="flex items-center justify-between py-2">
            <span class="text-sm font-medium text-on-surface">Auto-Reconnect</span>
            <button type="button" role="switch"
                    x-data="{ on: true }"
                    @click="on = !on; $el.classList.toggle('active')"
                    :class="on ? 'active' : ''"
                    class="toggle-switch" style="width:44px;height:24px">
              <span class="toggle-knob"></span>
            </button>
          </label>
          <div class="pt-2 flex justify-end">
            <button type="submit"
                    class="bg-primary text-white py-2 px-6 rounded-xl font-bold text-xs shadow-md hover:bg-primary/90 transition-all">Save Settings</button>
          </div>
        </form>
      </div>
    </div>
    <!-- Right: billing + devices + danger -->
    <div class="lg:col-span-4 space-y-8">
      <!-- Billing Card -->
      <div class="bg-primary text-on-primary p-6 rounded-2xl shadow-lg relative overflow-hidden flex flex-col justify-between h-48">
        <div class="relative z-10">
          <div class="flex justify-between items-start">
            <span class="px-2.5 py-1 bg-white/20 rounded-full font-bold text-[9px] uppercase tracking-wider text-white">HostKeeper Pro</span>
            <svg class="w-5 h-5 text-white fill-white" viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
          </div>
          <h3 class="font-black text-2xl tracking-tight mt-3">Active Workspace</h3>
        </div>
        <div class="relative z-10 flex justify-between items-end">
          <div>
            <span class="text-xs opacity-80 uppercase font-semibold">RENEWAL CYCLE</span>
            <p class="text-xs font-bold text-white">July 2026</p>
          </div>
          <span class="text-[10px] font-bold bg-white text-primary rounded-lg px-2.5 py-1 flex items-center gap-1">
            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
            PAID ACCOUNT
          </span>
        </div>
        <div class="absolute right-0 bottom-0 opacity-10 pointer-events-none">
          <svg class="w-48 h-48 -rotate-45" viewBox="0 0 24 24" fill="currentColor"><path d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
        </div>
      </div>
      <!-- Devices -->
      <div class="bg-white p-5 rounded-2xl border border-outline-variant/30 shadow-sm space-y-4">
        <h3 class="font-bold text-on-surface text-sm flex items-center gap-2">
          <svg class="w-4 h-4 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"/></svg>
          Synchronized Devices
        </h3>
        <div class="space-y-3.5">
          {{range .Devices}}
          <div class="flex items-center justify-between text-xs">
            <div class="flex items-center gap-2.5 min-w-0">
              <div class="p-1.5 bg-surface-container-low border border-outline-variant/20 rounded-lg shrink-0">
                <svg class="w-4 h-4 {{if eq .Type "desktop"}}text-primary{{else}}text-outline{{end}}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  {{if eq .Type "desktop"}}<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>{{end}}
                  {{if eq .Type "mobile"}}<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"/>{{end}}
                  {{if eq .Type "tablet"}}<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z"/>{{end}}
                </svg>
              </div>
              <span class="font-bold text-on-surface truncate pr-2">{{.Name}}</span>
            </div>
            <span class="px-2 py-0.5 rounded-full text-[9px] font-bold uppercase tracking-wider flex items-center gap-1 shrink-0 {{if .Current}}bg-secondary/10 text-secondary{{else}}bg-surface-container text-outline{{end}}">
              <span class="w-1 h-1 rounded-full {{if .Current}}bg-secondary animate-pulse{{else}}bg-outline{{end}}"></span>
              {{if .Current}}Online{{else}}Offline{{end}}
            </span>
          </div>
          {{end}}
        </div>
      </div>
      <!-- Danger Zone -->
      <div class="p-4 border border-error-container/40 rounded-2xl bg-error-container/5 space-y-3 text-xs" x-data="{ confirm: false }">
        <h4 class="font-bold text-error flex items-center gap-2">
          <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="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/></svg>
          Reset Local State
        </h4>
        <p class="text-on-surface-variant">Resetting will clear all your locally loaded keystores, snippets, and connection cache buffers from the browser storage.</p>
        <button @click="if(confirm('Are you sure you want to flush all local storage configurations?')) { localStorage.clear(); alert('Workspace storage cleared successfully.'); window.location.reload(); }"
                class="w-full py-2 border border-error/30 rounded-xl font-bold text-error hover:bg-error/10 transition-colors">
          Flush All App State
        </button>
      </div>
    </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>SFTP · 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">
        {{template "sftp_content" .}}
      </main>
    </div>
  </div>
 </body>
 </html>
@@ -0,0 +1,141 @@
 {{define "sftp_content"}}
 <div id="sftp-page" class="max-w-7xl mx-auto space-y-6 relative"
     x-data="{ toast: '', showToast: false, showFolderModal: false, folderPane: 'local' }"
     x-init="$watch('showToast', v => v && setTimeout(() => showToast = false, 3500))"
     @toast-message.window="toast = $event.detail.message; showToast = true">
  <!-- Toast -->
  <div x-show="showToast" x-cloak
       class="fixed bottom-6 right-6 z-[180] bg-inverse-surface text-inverse-on-surface px-5 py-3.5 rounded-xl shadow-xl flex items-center gap-3 border border-outline/20 animate-slide-in text-xs font-semibold">
    <svg class="w-4 h-4 text-secondary animate-bounce" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
    <span x-text="toast"></span>
  </div>
  <!-- Header Panel -->
  <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 border-b border-outline-variant/30 pb-4">
    <div>
      <h2 class="text-xl font-bold text-on-surface tracking-tight">SFTP Secure File Sync</h2>
      <p class="text-xs text-on-surface-variant mt-0.5">Dual streams for real-time asset transmission and file editing</p>
    </div>
    <div class="flex items-center gap-2">
      <button hx-get="/sftp" hx-target="#main-content"
              class="flex items-center gap-2 px-3 py-1.5 rounded-lg border border-outline-variant/30 hover:border-primary text-xs font-semibold text-on-surface bg-white transition-all hover:bg-surface-container">
        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
        Reset State
      </button>
    </div>
  </div>
  <!-- Dual Panel Body -->
  <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
    <!-- Local Pane -->
    <div class="bg-white rounded-2xl border border-outline-variant/30 overflow-hidden shadow-sm flex flex-col h-[520px]">
      <div class="p-4 border-b border-outline-variant/50 bg-surface-container-low flex items-center justify-between">
        <div class="flex items-center gap-2 min-w-0">
          <svg class="w-4 h-4 text-outline shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/></svg>
          <span class="font-bold text-xs text-on-surface truncate uppercase tracking-wider">Local Workstation</span>
        </div>
        <button @click="$dispatch('open-folder-modal', { pane: 'local' })"
                class="text-primary hover:text-primary/80 p-1 rounded hover:bg-primary/5 transition-all" title="New Local Folder">
          <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="M9 13h6m-3-3v6m-5-8H5a2 2 0 00-2 2v8a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2v2"/></svg>
        </button>
      </div>
      <!-- Breadcrumb -->
      <div class="px-4 py-2 border-b border-outline-variant/20 bg-surface-container-lowest flex items-center gap-1.5 text-xs text-outline font-mono overflow-x-auto">
        {{range .LocalBreadcrumb}}
        <a href="#" hx-get="/sftp/pane?pane=local&dir={{.Path}}" hx-target="#local-pane"
           class="text-primary hover:underline cursor-pointer">{{.Name}}</a>
        <svg class="w-3 h-3 text-outline/40 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
        {{end}}
      </div>
      <!-- Search -->
      <div class="p-3 border-b border-outline-variant/10 relative">
        <svg class="absolute left-6 top-1/2 -translate-y-1/2 text-outline w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
        <input type="search" name="q" placeholder="Filter local files..."
               hx-get="/sftp/pane?pane=local" hx-trigger="keyup delay:200ms" hx-target="#local-pane"
               class="w-full bg-surface-container-low pl-10 pr-4 py-1.5 border border-outline-variant/30 rounded-lg text-xs font-medium focus:outline-none focus:border-primary focus:bg-white">
      </div>
      <div id="local-pane" class="flex-1 overflow-y-auto min-h-0">
        {{template "sftp_pane" dict "Pane" "local" "Files" .LocalFiles "Breadcrumb" .LocalBreadcrumb}}
      </div>
    </div>
    <!-- Remote Pane -->
    <div class="bg-white rounded-2xl border border-outline-variant/30 overflow-hidden shadow-sm flex flex-col h-[520px]">
      <div class="p-4 border-b border-outline-variant/50 bg-surface-container-low flex items-center justify-between">
        <div class="flex items-center gap-2 min-w-0">
          <svg class="w-4 h-4 text-primary shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"/></svg>
          <span class="font-bold text-xs text-on-surface truncate uppercase tracking-wider">Remote Cluster Node</span>
        </div>
        <button @click="$dispatch('open-folder-modal', { pane: 'remote' })"
                class="text-primary hover:text-primary/80 p-1 rounded hover:bg-primary/5 transition-all" title="New Remote Folder">
          <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="M9 13h6m-3-3v6m-5-8H5a2 2 0 00-2 2v8a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2v2"/></svg>
        </button>
      </div>
      <!-- Breadcrumb -->
      <div class="px-4 py-2 border-b border-outline-variant/20 bg-surface-container-lowest flex items-center gap-1.5 text-xs text-outline font-mono overflow-x-auto">
        {{range .RemoteBreadcrumb}}
        <a href="#" hx-get="/sftp/pane?pane=remote&dir={{.Path}}" hx-target="#remote-pane"
           class="text-primary hover:underline cursor-pointer">{{.Name}}</a>
        <svg class="w-3 h-3 text-outline/40 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
        {{end}}
      </div>
      <!-- Search -->
      <div class="p-3 border-b border-outline-variant/10 relative">
        <svg class="absolute left-6 top-1/2 -translate-y-1/2 text-outline w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
        <input type="search" name="q" placeholder="Filter remote files..."
               hx-get="/sftp/pane?pane=remote" hx-trigger="keyup delay:200ms" hx-target="#remote-pane"
               class="w-full bg-surface-container-low pl-10 pr-4 py-1.5 border border-outline-variant/30 rounded-lg text-xs font-medium focus:outline-none focus:border-primary focus:bg-white">
      </div>
      <div id="remote-pane" class="flex-1 overflow-y-auto min-h-0">
        {{template "sftp_pane" dict "Pane" "remote" "Files" .RemoteFiles "Breadcrumb" .RemoteBreadcrumb}}
      </div>
    </div>
  </div>
  <!-- Drop Zone -->
  <div class="p-8 border-2 border-dashed border-outline-variant/40 rounded-2xl text-center bg-white/40 flex flex-col items-center justify-center space-y-2 relative group hover:border-primary transition-colors cursor-pointer">
    <svg class="w-10 h-10 text-outline group-hover:text-primary group-hover:scale-110 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"/></svg>
    <h3 class="font-bold text-sm text-on-surface">Drag files directly here to start batch upload</h3>
    <p class="text-xs text-on-surface-variant max-w-sm">
      Files are automatically split into parallel streams of 5MB chunks and secured with AES-256 keychain keys.
    </p>
  </div>
  <!-- Folder Modal -->
  <div id="folder-modal" class="fixed inset-0 z-50" x-data="{ open: false }" x-show="open" x-cloak
       @open-folder-modal.window="open = true; folderPane = $event.detail.pane" @keydown.escape.window="open = false">
    <div class="absolute inset-0 bg-black/40 backdrop-blur-sm" @click="open = false"></div>
    <div class="absolute inset-0 flex items-center justify-center p-4" x-show="open" x-transition>
      <div class="bg-white rounded-2xl max-w-sm w-full border border-outline-variant/30 shadow-2xl p-6 space-y-4">
        <div class="flex justify-between items-center border-b border-outline-variant/30 pb-3">
          <h3 class="font-bold text-lg text-on-surface">New Folder</h3>
          <button @click="open = false" class="text-outline hover:text-primary p-1 rounded">Cancel</button>
        </div>
        <form hx-post="/sftp/mkdir" hx-target="#local-pane" hx-swap="outerHTML"
              @submit="open = false" class="space-y-4 text-sm">
          <input type="hidden" name="pane" :value="folderPane">
          <div class="flex flex-col gap-1">
            <label class="text-xs font-bold text-on-surface-variant">FOLDER NAME</label>
            <input type="text" name="name" required placeholder="e.g. new-project"
                   class="w-full bg-surface-container-low border border-outline-variant/40 rounded-lg py-2.5 px-4 focus:ring-2 focus:ring-primary/20 focus:border-primary focus:outline-none transition-all font-medium">
          </div>
          <div class="pt-4 flex justify-end gap-3 border-t border-outline-variant/20">
            <button type="button" @click="open = false"
                    class="px-4 py-2 text-xs font-bold text-outline hover:text-on-surface">Cancel</button>
            <button type="submit"
                    class="bg-primary text-white py-2 px-5 rounded-lg font-bold text-xs shadow-md hover:bg-primary/90 transition-all">Create Folder</button>
          </div>
        </form>
      </div>
    </div>
  </div>
 </div>
 {{end}}
@@ -0,0 +1,77 @@
 {{define "sftp_pane"}}
 <div id="{{.Pane}}-pane-content" x-data="{ pane: '{{.Pane}}' }">
  <table class="w-full text-left border-collapse text-xs">
    <thead>
      <tr class="border-b border-outline-variant/20 text-outline uppercase tracking-wider font-bold">
        <th class="py-2.5 px-4 font-semibold text-[10px]">Name</th>
        <th class="py-2.5 px-4 font-semibold text-[10px] text-right">Size</th>
        <th class="py-2.5 px-4 font-semibold text-[10px] text-right">Modified</th>
        <th class="py-2.5 px-4 font-semibold text-[10px]"></th>
      </tr>
    </thead>
    <tbody>
      {{range .Files}}
      <tr class="border-b border-outline-variant/10 hover:bg-primary/5 transition-colors group cursor-pointer"
          hx-get="/sftp/pane?pane={{$.Pane}}&dir={{.Name}}" hx-target="#{{$.Pane}}-pane-content" hx-swap="outerHTML">
        <td class="py-2.5 px-4">
          <div class="font-semibold text-on-surface flex items-center gap-2.5 max-w-[180px] cursor-pointer">
            <span class="shrink-0
              {{if eq .Type "folder"}}text-yellow-500{{else if eq .Type "code"}}text-purple-500{{else if eq .Type "image"}}text-secondary{{else if eq .Type "lock"}}text-red-400{{else}}text-outline/50{{end}}">
              {{if eq .Type "folder"}}
              <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="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/></svg>
              {{else if eq .Type "code"}}
              <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="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/></svg>
              {{else if eq .Type "image"}}
              <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 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
              {{else if eq .Type "lock"}}
              <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="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>
              {{else}}
              <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="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"/></svg>
              {{end}}
            </span>
            <span class="truncate group-hover:text-primary transition-colors">{{.Name}}</span>
          </div>
        </td>
        <td class="py-2.5 px-4 text-right text-on-surface-variant font-mono">{{.Size}}</td>
        <td class="py-2.5 px-4 text-right text-outline">{{.Modified}}</td>
        <td class="py-2.5 px-4 text-right" @click.stop>
          <div class="flex items-center justify-end gap-1.5 opacity-0 group-hover:opacity-100 transition-opacity">
            {{if ne .Type "folder"}}
            {{if eq $.Pane "local"}}
            <button @click="$dispatch('toast-message', { message: 'Uploading {{.Name}}...' })"
                    class="p-1 hover:bg-primary/10 rounded text-primary transition-colors" title="Upload to remote">
              <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5-5m0 0l5 5m-5-5v12"/></svg>
            </button>
            {{end}}
            {{if eq $.Pane "remote"}}
            <button @click="$dispatch('toast-message', { message: 'Downloading {{.Name}}...' })"
                    class="p-1 hover:bg-primary/10 rounded text-primary transition-colors" title="Download to local">
              <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
            </button>
            {{end}}
            {{end}}
            <button hx-delete="/sftp/rm?pane={{$.Pane}}&name={{.Name}}" hx-target="#{{$.Pane}}-pane-content" hx-swap="outerHTML"
                    hx-confirm="Delete {{.Name}}?"
                    class="p-1 hover:bg-red-50 hover:text-error rounded text-outline transition-colors" title="Delete file">
              <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
            </button>
          </div>
        </td>
      </tr>
      {{end}}
    </tbody>
  </table>
  {{if eq (len .Files) 0}}
  <div class="text-center py-8 text-on-surface-variant">
    <p class="text-sm">This directory is empty</p>
  </div>
  {{end}}
  {{if gt (len .Files) 0}}
  <div class="p-3 bg-surface-container-low border-t border-outline-variant/30 text-[10px] text-outline text-center font-bold">
    TIP: Click file or {{if eq .Pane "local"}}upload{{else}}download{{end}} button to transmit to server
  </div>
  {{end}}
 </div>
 {{end}}
@@ -0,0 +1,57 @@
 {{define "snippet_grid"}}
 <script id="snippet-data" type="application/json">{{.SnippetsJSON}}</script>
 {{range .Snippets}}
 <div class="bg-white border border-outline-variant/30 rounded-2xl overflow-hidden shadow-sm flex flex-col group">
  <div class="p-5 flex justify-between items-start gap-4">
    <div class="space-y-1">
      <div class="flex flex-wrap items-center gap-2">
        <h3 class="font-bold text-on-surface text-base group-hover:text-primary transition-colors">{{.Name}}</h3>
        <div class="flex flex-wrap gap-1">
          {{range .Tags}}
          <span class="px-2 py-0.5 bg-surface-container text-[10px] font-bold rounded text-on-surface-variant">{{.}}</span>
          {{end}}
        </div>
      </div>
      {{if .Description}}
      <p class="text-xs text-on-surface-variant leading-relaxed">{{.Description}}</p>
      {{end}}
    </div>
    <div class="flex items-center gap-2 shrink-0">
      <button data-copy="{{.Content}}"
              class="p-1.5 border border-outline-variant/40 rounded-lg bg-surface-container-low hover:border-primary text-outline hover:text-primary transition-colors"
              title="Copy code to clipboard">
        <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="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg>
      </button>
      <button hx-delete="/snippets/{{.ID}}" hx-target="#snippet-grid" hx-confirm="Delete {{.Name}}?"
              class="p-1.5 border border-outline-variant/40 rounded-lg bg-surface-container-low hover:border-error text-outline hover:text-error transition-colors"
              title="Delete code snippet">
        <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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
      </button>
    </div>
  </div>
  <div class="bg-surface-container-low border-t border-outline-variant/40 p-4 font-mono text-xs text-on-surface relative group/code overflow-x-auto">
    <pre class="text-on-surface select-all leading-relaxed whitespace-pre font-medium">{{.Content}}</pre>
    <button data-copy="{{.Content}}"
            class="absolute right-4 top-4 bg-white/90 backdrop-blur border border-outline-variant/30 shadow px-2.5 py-1 rounded text-[10px] font-mono font-bold hover:border-primary hover:text-primary transition-colors opacity-0 group-hover/code:opacity-100">
      COPY
    </button>
  </div>
  <div class="px-5 py-2 border-t border-outline-variant/20 bg-surface-container-lowest flex justify-between items-center text-[10px] text-outline font-semibold">
    <span>Last adjusted {{.CreatedAt}}</span>
    <span class="flex items-center gap-1 text-primary">
      <svg class="w-3 h-3" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
      Ready to inject to shell
    </span>
  </div>
 </div>
 {{end}}
 {{if eq (len .Snippets) 0}}
 <div class="p-12 border border-dashed border-outline-variant/40 rounded-2xl text-center text-outline">
  No matching snippet found.
 </div>
 {{end}}
 {{end}}
@@ -0,0 +1,184 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Snippets · 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>
  <script src="/static/js/clipboard.js"></script>
  <script src="/static/js/utils.js"></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">
        <div class="max-w-7xl mx-auto space-y-8">
          <!-- Search Header Panel -->
          <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 border-b border-outline-variant/30 pb-4">
            <div>
              <h2 class="text-xl font-bold text-on-surface tracking-tight">Snippets & Scripts Library</h2>
              <p class="text-xs text-on-surface-variant mt-0.5">Quickly reuse and catalog command line shortcuts across remote clusters</p>
            </div>
            <div class="flex items-center gap-3">
              <div class="relative">
                <svg class="absolute left-3 top-1/2 -translate-y-1/2 text-outline w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
                <input type="search" name="q" placeholder="Search code snippets..."
                       hx-get="/snippets/grid" hx-trigger="keyup delay:200ms" hx-target="#snippet-grid"
                       class="pl-9 pr-4 py-1.5 rounded-full bg-surface-container-low border border-outline-variant/30 text-sm focus:border-primary focus:bg-white focus:outline-none focus:ring-1 focus:ring-primary w-48 sm:w-60 transition-all">
              </div>
              <button @click="$dispatch('open-snippet-modal')"
                      class="flex items-center gap-1.5 bg-primary text-white hover:bg-primary/90 font-bold text-xs py-2 px-4 rounded-xl shadow-md transition-all">
                <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="M12 4v16m8-8H4"/></svg>
                New Snippet
              </button>
            </div>
          </div>
          <!-- Grid: Sidebar + Cards -->
          <div class="grid grid-cols-1 lg:grid-cols-12 gap-8">
            <!-- Sidebar -->
            <div class="lg:col-span-3 space-y-5" x-data="sidebarManager()" x-init="init()">
              <div class="bg-white rounded-2xl border border-outline-variant/30 p-4 space-y-4">
                <h4 class="text-xs font-bold text-outline-variant uppercase tracking-wider px-2">Collections</h4>
                <div class="space-y-1 text-sm font-semibold">
                  <button hx-get="/snippets/grid" hx-target="#snippet-grid"
                          :class="activeColl === 'all' ? 'bg-primary/10 text-primary' : 'text-on-surface-variant hover:bg-surface-container-low'"
                          class="w-full flex items-center justify-between p-2 rounded-lg transition-colors"
                          @click="activeColl = 'all'">
                    <span class="flex items-center gap-2"><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="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/></svg> All Code Blocks</span>
                    <span class="text-xs text-outline" x-text="total"></span>
                  </button>
                  <button hx-get="/snippets/grid?collection=favorites" hx-target="#snippet-grid"
                          :class="activeColl === 'favorites' ? 'bg-primary/10 text-primary' : 'text-on-surface-variant hover:bg-surface-container-low'"
                          class="w-full flex items-center justify-between p-2 rounded-lg transition-colors"
                          @click="activeColl = 'favorites'">
                    <span class="flex items-center gap-2"><svg class="w-4 h-4 text-amber-500" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg> Starred Favorites</span>
                    <span class="text-xs text-outline" x-text="favCount"></span>
                  </button>
                  <button hx-get="/snippets/grid?collection=recent" hx-target="#snippet-grid"
                          :class="activeColl === 'recent' ? 'bg-primary/10 text-primary' : 'text-on-surface-variant hover:bg-surface-container-low'"
                          class="w-full flex items-center justify-between p-2 rounded-lg transition-colors"
                          @click="activeColl = 'recent'">
                    <span class="flex items-center gap-2"><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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg> Recent</span>
                    <span class="text-xs text-outline" x-text="recentCount"></span>
                  </button>
                </div>
              </div>
              <div class="bg-white rounded-2xl border border-outline-variant/30 p-4 space-y-3">
                <h4 class="text-xs font-bold text-outline-variant uppercase tracking-wider px-2">Tag Categories</h4>
                <div class="flex flex-wrap gap-1.5 p-1">
                  <button hx-get="/snippets/grid" hx-target="#snippet-grid"
                          :class="activeTag === 'all' ? 'bg-primary text-white' : 'bg-surface-container-low text-on-surface-variant hover:bg-surface-container'"
                          class="px-3 py-1 rounded-full text-xs font-bold transition-all"
                          @click="activeTag = 'all'">All Tags</button>
                  {{range .AllTags}}
                  <button hx-get="/snippets/grid?tag={{.}}" hx-target="#snippet-grid"
                          :class="activeTag === '{{.}}' ? 'bg-primary text-white' : 'bg-surface-container-low text-on-surface-variant hover:bg-surface-container'"
                          class="px-3 py-1 rounded-full text-xs font-bold transition-all"
                          @click="activeTag = '{{.}}'">
                    {{.}}
                  </button>
                  {{end}}
                </div>
              </div>
            </div>
            <!-- Snippet Cards -->
            <div class="lg:col-span-9 space-y-6" id="snippet-grid">
              {{template "snippet_grid" .}}
            </div>
          </div>
        </div>
        <!-- Add Snippet Modal -->
        <div id="snippet-modal" class="fixed inset-0 z-50" x-data="{ open: false }" x-show="open" x-cloak
             @open-snippet-modal.window="open = true" @keydown.escape.window="open = false">
          <div class="absolute inset-0 bg-black/40 backdrop-blur-sm" @click="open = false"></div>
          <div class="absolute inset-0 flex items-center justify-center p-4" x-show="open" x-transition>
            <div class="bg-white rounded-2xl max-w-lg w-full border border-outline-variant/30 shadow-2xl p-6 space-y-4">
              <div class="flex justify-between items-center border-b border-outline-variant/30 pb-3">
                <h3 class="font-bold text-lg text-on-surface">Store Custom Snippet</h3>
                <button @click="open = false" class="text-outline hover:text-primary p-1 rounded">Cancel</button>
              </div>
              <form hx-post="/snippets" hx-target="#snippet-grid" hx-swap="innerHTML"
                    @submit="open = false" class="space-y-4 text-sm">
                <div class="flex flex-col gap-1">
                  <label class="text-xs font-bold text-on-surface-variant">SNIPPET TITLE</label>
                  <input type="text" name="name" required placeholder="e.g. Purge Docker Cache"
                         class="w-full bg-surface-container-low border border-outline-variant/40 rounded-lg py-2.5 px-4 focus:ring-2 focus:ring-primary/20 focus:border-primary focus:outline-none transition-all font-medium">
                </div>
                <div class="flex flex-col gap-1">
                  <label class="text-xs font-bold text-on-surface-variant">SHORT DESCRIPTION / USAGE</label>
                  <input type="text" name="description" placeholder="e.g. Safe cleanup to recover workspace disk capacity."
                         class="w-full bg-surface-container-low border border-outline-variant/40 rounded-lg py-2.5 px-4 focus:ring-2 focus:ring-primary/20 focus:border-primary focus:outline-none transition-all font-medium">
                </div>
                <div class="flex flex-col gap-1">
                  <label class="text-xs font-bold text-on-surface-variant">CODE SYNTAX BLOCK</label>
                  <textarea name="content" required rows="4" placeholder="e.g. systemctl restart nginx"
                            class="w-full bg-surface-container-low border border-outline-variant/40 rounded-lg py-2.5 px-4 focus:ring-2 focus:ring-primary/20 focus:border-primary focus:outline-none transition-all font-mono text-xs"></textarea>
                </div>
                <div class="flex flex-col gap-1">
                  <label class="text-xs font-bold text-on-surface-variant">PRIMARY TAG CATEGORY</label>
                  <select name="tags"
                          class="bg-surface-container-low border border-outline-variant/40 rounded-lg py-2 px-3 focus:outline-none focus:border-primary">
                    <option value="DevOps">DevOps</option>
                    <option value="Docker">Docker</option>
                    <option value="Nginx">Nginx</option>
                    <option value="Git">Git</option>
                    <option value="SSL">SSL</option>
                    <option value="Security">Security</option>
                    <option value="Database">Database</option>
                  </select>
                </div>
                <input type="hidden" name="collection" value="recent">
                <div class="pt-4 flex justify-end gap-3 border-t border-outline-variant/20">
                  <button type="button" @click="open = false"
                          class="px-4 py-2 text-xs font-bold text-outline hover:text-on-surface">Cancel</button>
                  <button type="submit"
                          class="bg-primary text-white py-2 px-5 rounded-lg font-bold text-xs shadow-md hover:bg-primary/90 transition-all">Save Code Snippet</button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </main>
    </div>
  </div>
  <script>
    function sidebarManager() {
      return {
        activeColl: 'all',
        activeTag: 'all',
        total: 0,
        favCount: 0,
        recentCount: 0,
        init() {
          this.updateCounts();
          document.body.addEventListener('htmx:afterSwap', () => this.updateCounts());
        },
        updateCounts() {
          const el = document.getElementById('snippet-data');
          if (!el) return;
          try {
            const snippets = JSON.parse(el.textContent) || [];
            this.total = snippets.length;
            this.favCount = snippets.filter(s => s.Collection === 'favorites').length;
            this.recentCount = snippets.filter(s => s.Collection === 'recent').length;
          } catch(e) {}
        }
      };
    }
  </script>
 </body>
 </html>
@@ -0,0 +1,38 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Terminal · 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">
  <link rel="stylesheet" href="/static/xterm/xterm.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" x-data="terminalManager()" x-init="init()">
      <header class="h-14 border-b border-outline-variant/30 flex items-center gap-2 px-6 bg-white/70 backdrop-blur-md">
        <h1 class="text-xl font-bold tracking-tight text-on-surface">{{.Title}}</h1>
        <span class="text-xs text-on-surface-variant mt-0.5">Interactive SSH shell with multi-tab session management</span>
        <div class="flex-1"></div>
        <button @click="addTab()"
                class="p-1.5 rounded-lg bg-surface-container hover:bg-primary-container hover:text-on-primary-container text-on-surface-variant transition-all" title="New Tab">
          <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="M12 4v16m8-8H4"/></svg>
        </button>
      </header>
      <main id="main-content" class="flex-1 flex flex-col overflow-auto p-6">
        {{template "terminal_content" .}}
      </main>
    </div>
  </div>
  <script id="hosts-data" type="application/json">{{.HostsJSON}}</script>
  <script id="selected-host" type="application/json">"{{.SelectedHost}}"</script>
  <script src="/static/xterm/xterm.js"></script>
  <script src="/static/js/terminal.js"></script>
 </body>
 </html>
@@ -0,0 +1,85 @@
 {{define "terminal_content"}}
 <div class="max-w-7xl mx-auto space-y-6 flex flex-col flex-1 min-h-0 w-full">
  <!-- Session Tab Toolbar -->
  <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 border-b border-outline-variant/30 pb-3">
    <div class="flex items-center gap-2 overflow-x-auto no-scrollbar scroll-smooth pr-6">
      <template x-for="(tab, i) in tabs" :key="tab.id">
        <div @click="switchTab(i)"
             :class="activeTab === i ? 'bg-white text-primary border-primary shadow-[0_-4px_12px_rgba(0,80,203,0.06)]' : 'bg-surface-container-low text-on-surface-variant hover:bg-surface-container border-transparent'"
             class="flex items-center gap-2 px-3.5 py-2 rounded-t-xl text-xs font-bold font-mono transition-all cursor-pointer border-t-2">
          <svg class="w-3.5 h-3.5" :class="activeTab === i ? 'text-primary' : 'text-outline'" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 17V7c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v10c0 .621-.504 1.125-1.125 1.125h-2.25A1.125 1.125 0 014 17zm6 0V7c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v10c0 .621-.504 1.125-1.125 1.125h-2.25A1.125 1.125 0 0110 17zm6 0V7c0-.621.504-1.125 1.125-1.125h2.25C19.496 5.875 20 6.379 20 7v10c0 .621-.504 1.125-1.125 1.125h-2.25A1.125 1.125 0 0116 17z"/></svg>
          <span class="truncate max-w-[120px]" x-text="tab.name"></span>
          <button @click.stop="closeTab(i)" class="p-0.5 hover:bg-black/10 rounded transition-colors">
            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
          </button>
        </div>
      </template>
      <button @click="addTab()"
              class="p-1.5 bg-surface-container hover:bg-primary-container hover:text-on-primary-container text-on-surface-variant rounded-lg transition-all" title="Open new terminal connection">
        <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="M12 4v16m8-8H4"/></svg>
      </button>
    </div>
    <div class="flex items-center gap-4 text-xs font-mono shrink-0">
      <div class="flex items-center gap-1.5 text-secondary">
        <span class="w-2 h-2 rounded-full bg-secondary animate-pulse"></span>
        <span>SECURE CRYPTO PATH</span>
      </div>
      <div class="text-outline">
        HOST: <span class="text-on-surface font-semibold" x-text="tabs.length ? tabs[activeTab].host : '—'"></span>
      </div>
    </div>
  </div>
  <!-- Terminal shell frame -->
  <div class="flex-1 bg-white border border-outline-variant rounded-2xl shadow-sm flex flex-col overflow-hidden min-h-0">
    <!-- Terminal Header -->
    <div class="px-4 py-2 bg-surface-container-low border-b border-outline-variant/30 flex justify-between items-center shrink-0">
      <div class="flex items-center gap-1.5">
        <span class="w-3 h-3 rounded-full bg-error/80"></span>
        <span class="w-3 h-3 rounded-full bg-primary-container/80"></span>
        <span class="w-3 h-3 rounded-full bg-secondary/80"></span>
        <span class="text-[10px] font-mono font-bold text-outline ml-2">ssh -i id_ed25519 root@<span x-text="tabs.length ? tabs[activeTab].host : '—'"></span></span>
      </div>
      <div class="flex items-center gap-3">
        <button @click="clearBuffer()"
                class="text-[10px] uppercase font-bold text-outline hover:text-primary transition-colors flex items-center gap-1">
          <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182"/></svg>
          Clear Buffer
        </button>
      </div>
    </div>
    <!-- xterm.js containers — managed by JS, not Alpine -->
    <div id="xterm-wrapper" class="flex-1 relative min-h-0"></div>
    <!-- Input prompt -->
    <form @submit.prevent="submitCommand()"
          class="p-3 border-t border-outline-variant/40 bg-surface-container-low flex items-center gap-2.5 shrink-0">
      <span class="font-mono text-xs font-bold text-primary pl-2 shrink-0 flex items-center gap-1">
        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.75 17.25L12 21m0 0l-3.75-3.75M12 21V3"/></svg>
        root@<span x-text="tabs.length ? tabs[activeTab].name : 'host'"></span>:~$
      </span>
      <input type="text" x-model="command" autofocus
             placeholder='Type a command (e.g. "help", "ls", "docker ps", "ping google.com")...'
             class="flex-1 bg-transparent border-none font-mono text-xs font-medium focus:ring-0 focus:outline-none text-on-surface p-0">
      <button type="submit"
              class="p-1.5 bg-primary text-white rounded-lg hover:bg-primary-container hover:text-on-primary-container transition-all" title="Execute Command">
        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.348a1.125 1.125 0 010 1.971l-11.54 6.347a1.125 1.125 0 01-1.667-.985V5.653z"/></svg>
      </button>
    </form>
  </div>
  <!-- Shortcut pills -->
  <div class="flex flex-wrap items-center gap-2 text-[11px] font-mono font-bold text-on-surface-variant">
    <span class="text-outline">SHORTCUT SUGGESTIONS:</span>
    <button type="button" @click="insertCommand('help')" class="px-2.5 py-1 rounded-md bg-surface-container border border-outline-variant/30 hover:border-primary hover:bg-primary-container/10 transition-colors">help</button>
    <button type="button" @click="insertCommand('ls')" class="px-2.5 py-1 rounded-md bg-surface-container border border-outline-variant/30 hover:border-primary hover:bg-primary-container/10 transition-colors">ls</button>
    <button type="button" @click="insertCommand('docker ps')" class="px-2.5 py-1 rounded-md bg-surface-container border border-outline-variant/30 hover:border-primary hover:bg-primary-container/10 transition-colors">docker ps</button>
    <button type="button" @click="insertCommand('uname -a')" class="px-2.5 py-1 rounded-md bg-surface-container border border-outline-variant/30 hover:border-primary hover:bg-primary-container/10 transition-colors">uname -a</button>
    <button type="button" @click="insertCommand('ping 8.8.8.8')" class="px-2.5 py-1 rounded-md bg-surface-container border border-outline-variant/30 hover:border-primary hover:bg-primary-container/10 transition-colors">ping 8.8.8.8</button>
    <button type="button" @click="insertCommand('cat server.js')" class="px-2.5 py-1 rounded-md bg-surface-container border border-outline-variant/30 hover:border-primary hover:bg-primary-container/10 transition-colors">cat server.js</button>
    <button type="button" @click="insertCommand('keychain')" class="px-2.5 py-1 rounded-md bg-surface-container border border-outline-variant/30 hover:border-primary hover:bg-primary-container/10 transition-colors">keychain</button>
    <button type="button" @click="insertCommand('clear')" class="px-2.5 py-1 rounded-md bg-surface-container border border-outline-variant/30 hover:border-primary hover:bg-primary-container/10 transition-colors">clear</button>
  </div>
 </div>
 {{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/)
+User interaction (keyboard, mouse)
-  |
+    │
-  | calls
+    ▼
-  v
+React component (event handler)
-Application Layer (pkg/)
+    │
-  |
+    ▼
-  | calls
+API client (fetch / WebSocket)
-  v
+    │
-Storage Layer (pkg/config/, pkg/storage/)
+    ▼
-  |
+GoFiber HTTP server (localhost:randomPort)
-  | reads/writes
+    │
-  v
+    ├── REST handlers → pkg/storage → JSON files
-File System (~/.config/hostkeeper/)
+    └── 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)
+hostkeeper/
-  ├── main.go         — Entry point
+├── cmd/                          # V1 CLI (FROZEN)
-  ├── root.go         — Root command setup
+│   └── hostkeeper/
-  ├── add.go          — Add host command
+├── pkg/                          # V1 shared packages (FROZEN)
-  ├── list.go         — List hosts command
+│   ├── ssh/
-  ├── connect.go      — Connect command
+│   ├── sftp/
-  ├── edit.go         — Edit host command
+│   ├── crypto/
-  ├── delete.go       — Delete host command
+│   ├── storage/
-  ├── export.go       — Export command
+│   ├── config/
-  ├── import.go       — Import command
+│   ├── knownhosts/
-  ├── tui.go          — TUI command entry
+│   └── tui/
-  ├── version.go      — Version command
+├── internal/                     # V1 internal packages (FROZEN)
-  ├── completion.go   — Shell completion
+│   ├── models/
-  └── *_test.go       — CLI command tests
+│   └── errors/
-
+├── test/                         # V1 tests (FROZEN)
-pkg/                  — Library code
+│
-  ├── config/         — Configuration and data directory
+├── app/                          # V2 GUI (NEW)
-  ├── models/         — Data models (Host, Key, Snippet)
+│   ├── backend/                  # Go HTTP server
-  ├── storage/        — File and export/import operations
+│   │   ├── main.go               # Entry point, fiber server setup
-  ├── errors/         — Error types
+│   │   ├── go.mod                # Go module for backend
-  └── tui/            — TUI implementation (Bubble Tea)
+│   │   ├── bridge/               # REST API handlers
-
+│   │   │   ├── hosts.go
-test/                 — Test suites
+│   │   │   ├── keys.go
-  ├── integration/    — End-to-end integration tests
+│   │   │   ├── snippets.go
-  └── storage/        — Storage tests
+│   │   │   ├── groups.go
-
+│   │   │   ├── portforward.go
-docs/                 — Documentation
+│   │   │   ├── sftp.go
-  ├── plans/          — Design and implementation plans
+│   │   │   ├── config.go
-  ├── INSTALLATION.md
+│   │   │   ├── vault.go
-  ├── USAGE.md
+│   │   │   └── export.go
-  └── ARCHITECTURE.md
+│   │   ├── 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:
+### Startup Sequence
 - **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
+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
+1. Terminal: cd app/backend && go run .
-Import: read file → unmarshal → strategy (merge/replace) → save all
+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
+## 5. Data Flow
 - 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
+### REST API Request Flow
- SQLite database for improved query capabilities
+```
- Encrypted credential storage (age/gpg)
+React component
- Configuration encryption
+  → useQuery/useMutation (React Query or manual fetch)
- Plugin system for custom authentication methods
+    → 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/
 ```
@@ -0,0 +1,214 @@
 # Hostkeeper V2 — Progress Tracker
 > **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-07-07
 > **Status**: Sprint 0—6 selesai. V2 HTMX feature complete.
 ---
 ## 1. Overview
 Hostkeeper V2 is a Termius-like cross-platform SSH/SFTP management GUI application.
 | Item | Value |
 |------|-------|
 | **Goal** | Build a free, open-source Termius alternative with full feature parity |
 | **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** | 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 (HTMX) | DONE |
 | Sprint 0 — Setup GoFiber + HTMX | DONE |
 | Sprint 1 — Dashboard + Host List | DONE |
 | Sprint 2 — Snippets + Keychain | DONE |
 | Sprint 3 — Settings + Brief | DONE |
 | Sprint 4 — SFTP Dual-Pane | DONE |
 | Sprint 5 — Terminal + xterm.js | DONE |
 | Sprint 6 — Storage Integration | DONE |
 ---
 ## 3. Sprint Checklist (HTMX)
 ### Sprint 0 — Setup GoFiber + HTMX
 - [x] Go module init (`app/backend/go.mod`)
 - [x] Install GoFiber v2 + deps
 - [x] Minimal Fiber server (`main.go`) — port 1947
 - [x] Static files serving (`/static/`)
 - [x] HTML template engine (html/template via gofiber/template)
 - [x] Download HTMX + Alpine.js (`static/js/`)
 - [x] Setup TailwindCSS v4 — `input.css` → `output.css`
 - [x] Custom CSS (Lumina) — dot-grid, glassmorphism, keyframes, toggle, modal, x-cloak
 - [x] Layout template (`views/layout.html`) — sidebar + header + main
 - [x] Nav template (`views/nav.html`) — nav items with active state
 - [x] Index + routing (`views/index.html` + `handler/dashboard.go`)
 - [x] Health endpoint (`handler/health.go`)
 - **Verify**: `curl :1947/api/health` → `{"app":"hostkeeper-v2","status":"ok"}`
 ### Sprint 1 — Dashboard + Host List
 - [x] Model Host + HostStore (`internal/model/host.go`) — mock data (8 hosts)
 - [x] Dashboard handler — full page render (`handler/dashboard.go`)
 - [x] Host list partial (`views/host_list.html`) — cards + list view
 - [x] Search HTMX — `hx-get="/hosts?q=..." hx-trigger="keyup delay:200ms"`
 - [x] Filter status — `<select>` + `hx-get="/hosts?filter=..."` 
 - [x] View toggle (grid/list) — Alpine `x-data="{ view: 'grid' }"` + `x-show`
 - [x] Add host modal (`views/host_modal.html`) — Alpine event-driven `$dispatch('open-modal')`
 - [x] POST /hosts — create host via HTMX form swap
 - [x] DELETE /hosts/:id — hx-delete with confirm
 - [x] Background transfers panel — static placeholder in nav
 - **Verify**: Homepage renders with 8 hosts, search+filter works, create+delete CRUD
 ### Sprint 2 — Snippets + Keychain
 - [x] Model Snippet + SnippetStore (`internal/model/snippet.go`)
 - [x] Model Key + KeyStore (`internal/model/keychain.go`)
 - [x] Snippets handler (`internal/handler/snippets.go`)
 - [x] Keychain handler (`internal/handler/keychain.go`)
 - [x] Snippets template (`views/snippets.html`) — standalone page (no layout inheritance)
 - [x] Snippet grid partial (`views/snippet_grid.html`) — HTMX partial
 - [x] Keychain template (`views/keychain.html`) — standalone page
 - [x] Key grid partial (`views/key_grid.html`) — HTMX partial
 - [x] Clipboard JS (`static/js/clipboard.js`)
 - [x] Utils JS (`static/js/utils.js`)
 - **Note**: Removed `layout.html` — all pages are now standalone (Go template `{{define}}` conflict)
 - **Verify**: Both pages render, CRUD works, clipboard copies, strength badges display
 ### Sprint 3 — Settings + Brief
 - [x] Model Device + Config (`internal/model/device.go`, `internal/model/config.go`)
 - [x] Settings handler + UpdateConfig (`internal/handler/settings.go`)
 - [x] Brief handler (`internal/handler/brief.go`)
 - [x] Settings template (`views/settings.html`) — profile, tabs, toggles, devices, danger zone
 - [x] Brief template (`views/brief.html`) — keyboard shortcuts, about
 - [x] Toggle switch JS (`static/js/toggles.js`) — Alpine toggle data
 - [x] Danger zone — confirm flow with localStorage.clear()
 - **Verify**: Settings page renders with tabs, toggles work via Alpine, brief page shows shortcuts
 ### Sprint 4 — SFTP Dual-Pane
 - [x] Model FileItem + Transfer (`internal/model/file.go`, `internal/model/transfer.go`)
 - [x] SFTP handler (`internal/handler/sftp.go`) — page, pane partial, create folder, delete file
 - [x] SFTP template (`views/sftp.html`) — dual-pane (local/remote), breadcrumb, search, drop-zone, toast, folder modal
 - [x] SFTP pane partial (`views/sftp_pane.html`) — file table with icons by type, hover actions
 - [x] `dict` helper fungsitambah di template engine (`main.go`)
 - [x] Folder create (Alpine modal + POST) + delete (hx-delete)
 - **Verify**: Dual-pane renders, file list per type icons, CRUD works, drop-zone + toast present
 ### Sprint 5 — Terminal + xterm.js
 - [x] Download xterm.js v5.3.0 + xterm.css (`static/xterm/`)
 - [x] Install gofiber/contrib/websocket v1.3.4
 - [x] Terminal handler (`internal/handler/terminal.go`) — page + WebSocket mock shell (ls, pwd, cd, cat, whoami, etc.)
 - [x] Terminal template (`views/terminal.html`) — dark theme, tab bar with Alpine, xterm containers
 - [x] Terminal JS (`static/js/terminal.js`) — Alpine terminalManager, xterm init, WS connect, tab CRUD
 - [x] Tab management — add/switch/close tabs, random host assignment
 - **Verify**: Terminal page renders, xterm.js loaded, WS endpoint returns Upgrade Required
 ### Sprint 6 — Data Store Integration
 - [x] `go.mod` replace directive → `v1/pkg/crypto` + `v1/pkg/knownhosts` importable
 - [x] `store/` package — JSON file persistence for hosts, snippets, keys, settings (stored at `~/Library/Application Support/hostkeeper/v2/`)
 - [x] Model SSH fields (Hostname, Port, Username, AuthType, Password, KeyID, Group, Tags, Notes)
 - [x] Handlers updated to use persistent store instead of in-memory mock data
 - [x] `sshconn/` package — real SSH client via `golang.org/x/crypto/ssh`
 - [x] Terminal WebSocket — real SSH connection (falls back to mock)
 - [x] Dynamic host list in terminal page (server-rendered via JSON script tag)
 - [x] All mock defaults removed from model packages (Host, Snippet, Key no longer have `defaultXxx()`)
 - [x] Settings persist via JSON file
 ---
 ## 4. Known Issues
 | # | Issue | Severity | Status |
 |---|-------|----------|--------|
 | (none) | — | — | — |
 ---
 ## 5. Last Session Notes
 | Date | What was done | Commits |
 |------|---------------|---------|
 | 2026-06-29 | V2 planning documents created (9 files) | — |
 | 2026-07-07 | Sprint 0: GoFiber+HTMX scaffolding, TailwindCSS, layout, nav, health | `43a19b7` |
 | 2026-07-07 | Sprint 1: Host model+store, dashboard CRUD, HTMX partials (grid/list, search, filter, modal, delete), transfers panel | `d771925`, `86620b0` |
 | 2026-07-07 | Sprint 2 dimulai: Snippet + Keychain models created | — |
 | 2026-07-07 | Sprint 2 selesai: all CRUD, standalone templates, clipboard.js, utils.js, fix template {{define}} conflict | `c4b0d7d` |
 | 2026-07-07 | Sprint 3 selesai: settings page, tabs, toggles, connected devices, danger zone, brief page | `c5ac07e` |
 | 2026-07-07 | Sprint 4 selesai: SFTP dual-pane, breadcrumb, per-type icons, create/delete, toast, drop-zone | `941a67b` |
 | 2026-07-07 | Sprint 5 selesai: xterm.js terminal, WebSocket mock shell, tab management | `04d9cfb` |
 | 2026-07-07 | Sprint 6 selesai: JSON persistence, go.mod replace, real SSH client, dynamic hosts, model SSH fields | `(pending — akan commit)` |
 ---
 ## 6. How to Continue
 ### For a new AI agent:
 All Sprint 0—6 tasks for HTMX are **complete**. The V2 backend is fully functional with:
 - GoFiber v2 server on `:1947`
 - HTMX + Alpine.js for interactivity
 - JSON file persistence in `~/Library/Application Support/hostkeeper/v2/`
 - Real SSH terminal (with mock fallback)
 - All CRUD operations for hosts, snippets, keychain, settings
 Future work areas (beyond Sprint 6):
 - **Real SFTP**: Connect SFTP dual-pane to real SSH via `github.com/pkg/sftp`
 - **Mobile wrapper**: `gomobile` + WebView
 - **Electron wrapper**: Wrap in Electron for standalone desktop app
 - **Tests**: Write Go unit/integration tests for handlers and store
 - **CI/CD**: GitHub Actions for build + test
 - **Encryption**: Wire up `v1/pkg/crypto` to encrypt stored data
 - **Known Hosts**: Integrate `v1/pkg/knownhosts` for SSH host key verification
 ### For a returning AI agent:
 1. **Read this file** — check "Last Session Notes" for context
 2. **Check git log** — `git log --oneline -10`
 3. **All Sprint items are `[x]`** — pick from "Future work areas" above
 4. **Update this file** when done
 ---
 ## 7. Reference Documents Index
 | Document | When to read |
 |----------|-------------|
 | `docs/PROGRESS.md` | Always (first) — know where to continue |
 | `AGENTS.md` (root) | Architecture, paths, important rules |
 | `docs/ARCHITECTURE_HTMX.md` | System design, component flow |
 | `docs/ARCHITECTURE.md` | Summary + pointer to HTMX doc |
 | `docs/SPRINT_PLAN.md` | Detailed file-by-file task instructions |
 | `docs/API.md` | REST + WebSocket endpoint specs |
 | `docs/DATA_MODELS.md` | Go struct definitions |
 | `docs/UI_COMPONENTS.md` | HTMX partials / Alpine components |
 | `docs/BUILD_SYSTEM.md` | Build pipeline (Go + CSS) |
 | `docs/UI_TERMIUS_REFERENCE.md` | Visual layout reference |
 | `docs/PERFORMANCE.md` | Performance & stability notes |
 | `template/` dir | Visual reference only (Lumina System) |
 ---
 ## 8. Git History Reference
 | Commit | Description |
 |--------|-------------|
 | `43a19b7` | Sprint 0 — GoFiber + HTMX + TailwindCSS v4 scaffolding |
 | `d771925` | Sprint 1 — host model, mock store, dashboard CRUD, HTMX partials |
 | `86620b0` | Sprint 1 final — delete host, Alpine modal events, grid/list toggle, transfers panel |
 ---
 **IMPORTANT**: This file MUST be updated after every development session to ensure continuity.
@@ -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,339 +0,0 @@
 # Hostkeeper V2 — Progress Tracker
 > **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.
 ---
 ## 1. Overview
 Hostkeeper V2 is a Termius-like cross-platform SSH/SFTP management GUI application.
 | Item | Value |
 |------|-------|
 | **Goal** | Build a free, open-source Termius alternative with full feature parity |
 | **Desktop** | GoFiber backend + React/xterm.js UI + Electron wrapper |
 | **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) |
 | **Mobile wrapper** | gomobile + WebView |
 | **V1 (existing)** | CLI/TUI SSH/SFTP manager — 105 tests, all passing. Frozen. |
 ---
 ## 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 |
 ---
 ## 3. Sprint Checklist
 ### Sprint 0 — Project Scaffolding (Day 0)
 - [ ] Create `app/backend/` directory with Go module (`go mod init`)
 - [ ] Install GoFiber v2 + dependencies in `go.mod`
 - [ ] Create `app/backend/main.go` — minimal fiber server (port 0 for random)
 - [ ] Create `app/frontend/` with Vite + React + TypeScript
 - [ ] Create `app/electron/` with Electron shell
 - [ ] Electron spawns Go backend as child process on startup
 - [ ] Electron loads web UI from localhost (Go serve frontend dist)
 - [ ] Create `app/backend/middleware/` — CORS, logging, recover, compress
 - [ ] Create `app/backend/bridge/` directory (placeholder handlers)
 - [ ] Create `app/backend/ws/` directory (placeholder handlers)
 - [ ] Build script: `scripts/build.sh` — Go build → frontend build → Electron package
 - [ ] Verify: `npm run dev` opens Electron window with "Hostkeeper V2" title
 - [ ] Verify: Go server responds at `localhost:PORT/api/health`
 ### Sprint 1 — Foundation (Day 1-5)
 #### Day 1-2: Data API Layer
 - [ ] `app/backend/bridge/hosts.go` — GET /api/hosts (list, filter, search)
 - [ ] `app/backend/bridge/hosts.go` — POST /api/hosts (create)
 - [ ] `app/backend/bridge/hosts.go` — GET /api/hosts/:id (detail)
 - [ ] `app/backend/bridge/hosts.go` — PUT /api/hosts/:id (update)
 - [ ] `app/backend/bridge/hosts.go` — DELETE /api/hosts/:id (delete)
 - [ ] `app/backend/bridge/hosts.go` — PATCH /api/hosts/:id/favorite (toggle)
 - [ ] `app/backend/bridge/keys.go` — GET /api/keys (list, no private key)
 - [ ] `app/backend/bridge/keys.go` — POST /api/keys (import)
 - [ ] `app/backend/bridge/keys.go` — POST /api/keys/generate (generate new)
 - [ ] `app/backend/bridge/keys.go` — DELETE /api/keys/:id (delete)
 - [ ] `app/backend/bridge/snippets.go` — GET /api/snippets (list)
 - [ ] `app/backend/bridge/snippets.go` — POST /api/snippets (create)
 - [ ] `app/backend/bridge/snippets.go` — PUT /api/snippets/:id (update)
 - [ ] `app/backend/bridge/snippets.go` — DELETE /api/snippets/:id (delete)
 - [ ] JSON error responses: `{ "error": "message" }` with proper HTTP codes
 - [ ] Verify: `curl -X POST http://localhost:PORT/api/hosts` returns 201
 #### Day 3: Groups + Config API
 - [ ] `app/backend/bridge/groups.go` — GET /api/groups (tree structure)
 - [ ] `app/backend/bridge/groups.go` — POST /api/groups (create)
 - [ ] `app/backend/bridge/groups.go` — PUT /api/groups/:id (update)
 - [ ] `app/backend/bridge/groups.go` — DELETE /api/groups/:id (delete)
 - [ ] `app/backend/bridge/groups.go` — PUT /api/groups/:id/move (reparent)
 - [ ] `app/backend/bridge/config.go` — GET /api/config (app config)
 - [ ] `app/backend/bridge/config.go` — PUT /api/config (update config)
 - [ ] `app/backend/bridge/config.go` — POST /api/config/unlock (vault unlock)
 - [ ] `app/backend/bridge/config.go` — POST /api/config/lock (vault lock)
 - [ ] `app/backend/bridge/config.go` — GET /api/config/status (vault status)
 - [ ] Verify: Full CRUD cycle via curl for all endpoints
 #### Day 4: Web UI Scaffold
 - [ ] React Router setup — routes for all screens (placeholder)
 - [ ] Layout component — Sidebar + TabBar + MainContent + StatusBar
 - [ ] Sidebar component — GroupTree (recursive), SearchBar, QuickActions
 - [ ] Theme system — CSS variables (dark, light, high-contrast)
 - [ ] API client layer — fetch wrapper + error handling + retry logic
 - [ ] State management — Zustand stores (hosts, keys, snippets, ui, terminal)
 - [ ] Keyboard shortcuts — Cmd+N new host, Cmd+K search, Cmd+D dark mode
 - [ ] Verify: Navigation between screens works
 #### Day 5: Host List Screen
 - [ ] HostList screen — HostCard components (grid + list view toggle)
 - [ ] GroupTree — collapsible, recursive, drag-and-drop (host -> group)
 - [ ] Search — filter by name, hostname, tag
 - [ ] Tag filter bar — chips for each tag, click to filter
 - [ ] Favorite toggle — star icon, filter favorites only
 - [ ] Context menu — right-click: connect, edit, delete, duplicate
 - [ ] Empty state — illustration + "Add your first host" CTA
 - [ ] Loading skeleton states
 - [ ] Verify: Host appears in list, can search, can filter, can favorite
 ### Sprint 2 — Core Features (Day 6-10)
 #### Day 6-7: Host Form + CRUD UI
 - [ ] HostForm screen — add mode + edit mode
 - [ ] Basic info fields — name, hostname, port, username
 - [ ] Auth section — type selector (password/key/agent)
 - [ ] Password field — show/hide toggle, strength indicator
 - [ ] Key picker — dropdown from stored keys
 - [ ] TagsInput — type + Enter to add, backspace to remove, autocomplete
 - [ ] GroupPicker — tree picker component
 - [ ] Advanced settings — proxy, jump host, keepalive interval
 - [ ] Validation — required fields, hostname regex, port range 1-65535
 - [ ] Error display — inline validation + toast notifications
 - [ ] Keyboard shortcuts — Cmd+S save, Esc cancel, Tab next field
 - [ ] Verify: Create host -> appears in list -> edit -> update -> delete
 #### Day 8-10: SSH Terminal (MOST CRITICAL)
 - [ ] **Go: WebSocket handler** `app/backend/ws/terminal.go`
  - [ ] Accept WS connection with host_id + cols + rows query params
  - [ ] Lookup host from storage by ID
  - [ ] Create `ssh.Client` using `pkg/ssh` (reuse existing)
  - [ ] Request PTY with xterm-256color
  - [ ] Stream SSH stdout -> WS binary frames (`c.WriteMessage`)
  - [ ] Receive WS frames -> SSH stdin (`session.Stdin.Write`)
  - [ ] Handle resize messages — JSON control frames
  - [ ] Handle disconnect gracefully
  - [ ] Buffer management (channel-based backpressure)
  - [ ] Configurable idle timeout (default 300s)
  - [ ] Connection pool (reuse SSH connections for same host)
 - [ ] **React: XTermWrapper component**
  - [ ] xterm.js instance initialization with addons (fit, web-links, search)
  - [ ] WebSocket connection management
  - [ ] Keyboard input -> WS send (binary frames)
  - [ ] ResizeObserver -> WS send resize message
  - [ ] Fit addon — auto fit to container
  - [ ] Web links addon — clickable URLs
  - [ ] Search addon — Ctrl+F search in terminal
  - [ ] Copy/paste — Cmd+C/V, right-click menu
  - [ ] Connection status indicator (connecting, connected, disconnected, error)
  - [ ] Reconnect button on disconnect
 - [ ] **React: TabBar + Tab management**
  - [ ] Add tab -> connect to host
  - [ ] Close tab -> disconnect SSH session
  - [ ] Reorder tabs via drag
  - [ ] Tab status dot (green=connected, red=error, gray=disconnected)
  - [ ] Tab title = host name
  - [ ] Max 20 tabs limit with warning
 - [ ] **Snippet panel** (slide-in from right)
  - [ ] List snippets for current host
  - [ ] Click snippet -> inject command to terminal
  - [ ] Edit/delete from panel
 - [ ] Verify: Connect to host -> terminal works -> type commands -> disconnect -> reconnect
 ### Sprint 3 — SFTP + Polish (Day 11-15)
 #### Day 11-12: SFTP Browser
 - [ ] **Go: SFTP REST handlers** `app/backend/bridge/sftp.go`
  - [ ] GET /api/sftp/ls — list directory (host_id, path)
  - [ ] POST /api/sftp/upload — multipart upload with progress
  - [ ] GET /api/sftp/download — file download stream
  - [ ] POST /api/sftp/mkdir — create directory
  - [ ] POST /api/sftp/rm — delete file/directory
  - [ ] POST /api/sftp/rename — rename/move
  - [ ] POST /api/sftp/chmod — change permissions
 - [ ] **React: SFTPScreen**
  - [ ] LocalPane + RemotePane (dual pane split view)
  - [ ] File list table — name, size, date, permissions (sortable)
  - [ ] Navigation — cd, back, forward, path breadcrumb
  - [ ] Upload/download with progress bars
  - [ ] Transfer queue — multiple files, cancel, retry
  - [ ] Drag & drop from desktop to upload
  - [ ] Context menu — download, delete, rename, chmod, mkdir
  - [ ] Keyboard shortcuts — Delete, F2 rename, Ctrl+C/V copy/move
 - [ ] Verify: Browse remote files -> upload -> download -> delete -> rename
 #### Day 13: Security + Vault
 - [ ] Vault unlock screen — password prompt on app start
 - [ ] Lock/unlock flow — auto-lock after inactivity (configurable: 1/5/15/30 min)
 - [ ] Password change screen
 - [ ] Known hosts dialog — first connect show fingerprint -> accept/reject
 - [ ] Key passphrase prompt — when using encrypted private key
 - [ ] Verify: Start app -> vault locked -> enter password -> unlock -> auto-lock
 #### Day 14: Settings Screen
 - [ ] Appearance tab — theme switcher, font selection, font size, background opacity
 - [ ] Terminal tab — scrollback (100-10000), cursor style, cursor blink, bell, copy-on-select
 - [ ] Connection tab — default timeout, keepalive interval, auto-reconnect
 - [ ] Vault tab — change password, auto-lock timer, lock on sleep
 - [ ] General tab — data directory, export/import buttons, about/version
 - [ ] Verify: Change settings -> restart -> settings persist
 #### Day 15: Mobile Setup
 - [ ] React Native project with WebView
 - [ ] Go mobile compilation script (gomobile bind)
 - [ ] Android minimal app — WebView + gomobile .aar
 - [ ] iOS minimal app — WKWebView + gomobile .xcframework
 - [ ] Responsive CSS for mobile (touch-friendly targets)
 - [ ] Verify: App runs on Android emulator
 ### Sprint 4 — Advanced Features (Day 16-20)
 #### Day 16-17: Port Forwarding
 - [ ] Model PortForward in Go + storage
 - [ ] Go: Local forwarding — ssh.Listen -> local listener -> tunnel
 - [ ] Go: Remote forwarding — ssh.Request remote forward
 - [ ] Go: Dynamic forwarding — SOCKS5 proxy via SSH
 - [ ] Status tracking — running/stopped/error
 - [ ] React: PortForwardScreen — list, add form, start/stop toggles
 - [ ] Verify: Set local forward -> `curl localhost:PORT` -> hits remote
 #### Day 18: Import/Export
 - [ ] Go: Import from `~/.ssh/config` — parse host, hostname, port, user, identity
 - [ ] Go: Import from CSV — columns: name, hostname, port, username, group, tags
 - [ ] Go: Export all data — encrypted JSON with all entities
 - [ ] React: Import/Export UI — drag & drop, progress, preview, confirm
 - [ ] Verify: Export -> delete all -> import -> all data restored
 #### Day 19-20: Jump Hosts + Proxy
 - [ ] Go: Jump host chain — SSH via intermediate hosts
 - [ ] Go: Multi-hop support — host -> jump1 -> jump2 -> target
 - [ ] Go: SOCKS5 proxy before SSH
 - [ ] Go: HTTP CONNECT proxy
 - [ ] React: Advanced connection settings — jump host selector, proxy config
 - [ ] Verify: Connect via jump host -> terminal works
 ### Sprint 5 — Platform Polish (Day 21-25)
 #### Day 21-22: Desktop Enhancements
 - [ ] Electron native menu bar — File, Edit, View, Window, Help
 - [ ] System tray icon — quick actions, recent hosts
 - [ ] Global keyboard shortcuts — Cmd+` toggle, Cmd+N new host
 - [ ] Window state persistence — position, size, maximized
 - [ ] Auto-update via electron-updater
 - [ ] OS Keychain integration — macOS Keychain, Windows Credential Manager, Linux Secret Service
 - [ ] Verify: Install .dmg -> app appears -> open -> works
 #### Day 23: Performance Optimization
 - [ ] Go: Connection pooling for SSH sessions
 - [ ] Go: Memory optimization — buffer pools, goroutine limits
 - [ ] WebSocket: permessage-deflate compression
 - [ ] React: Virtual scrolling for host list (1000+ hosts)
 - [ ] React: Lazy loading screens (code splitting)
 - [ ] React: Memoization (React.memo, useMemo, useCallback)
 - [ ] xterm.js: WebGL renderer (preferred) with Canvas fallback
 - [ ] Verify: 1000 hosts in list -> smooth scrolling -> no lag
 #### Day 24-25: Mobile Polish
 - [ ] Android: gomobile bind -> .aar
 - [ ] Android: WebView app with touch-optimized UI
 - [ ] iOS: gomobile bind -> .xcframework
 - [ ] iOS: WKWebView app
 - [ ] Mobile: Custom keyboard toolbar (Tab, Ctrl, Esc, arrows)
 - [ ] Mobile: Gesture navigation (swipe to switch tabs)
 - [ ] Mobile: Landscape/portrait handling
 - [ ] Mobile: Bluetooth keyboard support
 - [ ] Mobile: Background connection handling
 - [ ] Verify: Install APK on Android -> connect SSH -> terminal works
 ---
 ## 4. Known Issues
 | # | Issue | Severity | Status |
 |---|-------|----------|--------|
 | (none) | — | — | — |
 ---
 ## 5. Last Session Notes
 | Date | What was done | Commits |
 |------|---------------|---------|
 | 2026-06-29 | V2 planning documents created (9 files) | — |
 ---
 ## 6. How to Continue
 ### For a new AI agent:
 1. **Read this file** (`docs/v2/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
 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"
 ### For a returning AI agent:
 1. **Read this file** — check "Last Session Notes" for context
 2. **Check git log** — `git log --oneline -10` for recent commits
 3. **Find the first `[ ]`** — that's where you continue
 4. **Update this file** when done
 ---
 ## 7. Reference Documents Index
 | 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 |
 ---
 ## 8. Git History Reference
 | Commit | Description |
 |--------|-------------|
 | (V2 commits will be listed here) | — |
 ---
 **IMPORTANT**: This file MUST be updated after every development session to ensure continuity.
@@ -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	38c2c6e671	fix: handle null hostOptions when no active hosts exist	2026-07-09 19:41:59 +07:00
swanadiva	d5406eab6c	fix: terminal WebSocket connection — manage xterm containers in JS - Remove Alpine x-for template for xterm containers (async rendering bug) - Add static #xterm-wrapper div, JS creates/removes container elements directly - addTab() uses document.createElement + appendChild for instant DOM - switchTab() toggles display:block/none, closeTab() removes from DOM - Add console.log for WebSocket open/close/error debugging - Terminal now connects on page load	2026-07-09 19:28:15 +07:00
swanadiva	71864336f6	fix: terminal WebSocket connection timing + better mock fallback - Fix xterm.js container not found: use requestAnimationFrame retry loop instead of single $nextTick (Alpine x-for renders asynchronously) - Better mock fallback: use host name+IP instead of raw UUID - Add logging for WebSocket connection path (found/not-found/hostname)	2026-07-09 18:40:35 +07:00
swanadiva	ef4e44984b	feat: upgrade terminal to xterm.js + WebSocket - Rewrite terminal.js: xterm.js Terminal per tab, WebSocket per connection - Light theme terminal (Lumina: white bg, blue cursor, proper ANSI colors) - Alpine.js keeps tab management, xterm.js handles rendering - Each tab gets its own WebSocket to /terminal/ws/:hostID - Mock handler iterates chars (fixes multi-char xterm.js messages) - Sync mock commands with React template (help, ls, docker ps, etc.) - Add xterm.css custom scrollbar styles - terminal_content.html: xterm containers with Alpine show/hide per tab	2026-07-09 18:32:33 +07:00
swanadiva	7accb86203	feat: add transfer panel to dashboard + remove PERBAIKANUI.md - Add Background Transfers section with mock download/upload rows - Progress bars with green glow shadow, source/destination layout - Empty state when no transfers active - Delete PERBAIKANUI.md (all UI tasks complete)	2026-07-09 18:27:47 +07:00
swanadiva	56eaf57649	fix: modal scroll, SSH key textarea, nav full-page, remove OS/Provider - Fix modal scroll: restructure overlay with scroll/centering wrapper - Add SSH key textarea + file upload to host modal (authType='key') - Fix textarea reset on new host (clear via DOM) - SSH username placeholder instead of default 'root' - Nav uses plain <a href> instead of HTMX for full-page navigation - /hosts route returns full page; /hosts/list for HTMX partials - Remove OS and Provider from host modal, grid card, and list card - Fix key modal x-data scope for Alpine $dispatch - Update key_grid to display multi-line key content properly - Simplify SSH key placeholder format	2026-07-09 18:21:45 +07:00
swanadiva	5445d15aca	fix: include host_modal inside host_list.html so modal works after HTMX nav	2026-07-07 15:59:41 +07:00
swanadiva	a2412b7cd2	fix: host modal — single POST endpoint for create+edit, remove hx-put conflict - hx-put="" (empty) was causing HTMX to send wrong requests - Now use single hx-post="/hosts" with hidden hostId field - Server checks hostId: empty → create, present → update - UpdateHost reads ID from both URL param and form data	2026-07-07 15:56:54 +07:00
swanadiva	301115b74d	feat: Host CRUD complete — edit, full form fields, connect, toast - Add UpdateHost handler + PUT /hosts/:id route - CreateHost now accepts all fields (port, username, auth, notes) - host_modal.html: full form with port, username, auth type toggle, edit mode - host_list.html: edit button dispatches edit-host event with host data - Connect button links to /terminal?host={id} for pre-selection - Terminal page reads selected host from query param - Toast notification system via Alpine.js events - Add default template function for fallback values	2026-07-07 15:51:57 +07:00
swanadiva	3df8416d9b	fix: nav Alpine event name — use htmx:after-settle, not after-settle	2026-07-07 15:39:10 +07:00
swanadiva	cdc8b3afd0	fix: nav highlight follows current page via Alpine.js client-side state - Server-side {{if eq $.View .ID}} only works on initial page load - HTMX swaps #main-content only, nav never re-renders → stale highlight - Add x-data page state + @after-settle.window listener to track current route - Nav items use :class binding to apply active style based on Alpine state	2026-07-07 15:37:16 +07:00
swanadiva	e70b133073	fix: add missing _content partial templates for HTMX nav (terminal, sftp, settings, brief) - Create terminal_content.html, sftp_content.html, settings_content.html, brief_content.html - Update full page templates to use partial templates via {{template}} - Handlers already rendered these templates on HX-Request, but files were missing → 500 - All pages now return 200 for both full page and HTMX nav requests	2026-07-07 15:36:12 +07:00
swanadiva	8357d9d76e	fix: UI overhaul — align all HTMX views with Lumina Design System (46 fixes) - All 7 pages rewritten: Dashboard, Terminal, Snippets, Keychain, SFTP, Settings, Brief - Apply consistent Lumina glassmorphic theme (rounded-2xl, shadows, borders, tracking) - Fix SVG icons not rendering — return template.HTML instead of string - Fix Alpine x-data scoping: terminal tabs, SFTP modals, snippet tag buttons - Fix dashboard search sending literal ?q=... - Rebuild CSS with all new Tailwind classes (62KB) - Add .air.toml with hot-reload config, docs/PERBAIKANUI.md checklist - Remove unused backup partials	2026-07-07 14:55:42 +07:00
swanadiva	fd7361aa14	Sprint 6: JSON file persistence + real SSH terminal + V1 crypto/knownhosts integration - go.mod replace directive for git.tukangketik.id/swanadiva/hostkeeper → ../../v1 - store/ package: JSON file persistence for hosts, snippets, keys, settings (~/Library/Application Support/hostkeeper/v2/) - model SSH fields: Hostname, Port, Username, AuthType, Password, KeyID - sshconn/ package: real SSH client via golang.org/x/crypto/ssh - Terminal WS: real SSH connection with fallback to mock shell - Dynamic host list in terminal (server-rendered JSON script tag) - All mock data defaults removed from model packages - Settings persist via store/settings.go	2026-07-07 13:53:50 +07:00
swanadiva	04d9cfb096	feat: Sprint 5 — xterm.js terminal with WebSocket mock shell, Alpine tab management	2026-07-07 13:39:35 +07:00
swanadiva	941a67b6ea	feat: Sprint 4 — SFTP dual-pane with per-type icons, breadcrumb, drop-zone, create/delete, toast	2026-07-07 13:35:01 +07:00
swanadiva	c5ac07e27f	feat: Sprint 3 — settings page with tabs/toggles/devices/danger-zone, brief page	2026-07-07 13:31:13 +07:00
swanadiva	c4b0d7d8c0	feat: Sprint 2 — snippets + keychain CRUD, standalone templates, clipboard/utils JS	2026-07-07 13:26:56 +07:00
swanadiva	8cfdec3980	docs: update PROGRESS.md + AGENTS.md to reflect Sprint 1 completion, Sprint 2 in progress	2026-07-07 13:19:33 +07:00
swanadiva	86620b034f	feat: Sprint 1 final — delete host, Alpine modal events, grid/list toggle, transfers panel	2026-07-07 13:17:31 +07:00
swanadiva	d771925727	feat: Sprint 1 — host model, mock store, dashboard CRUD, HTMX partials	2026-07-07 13:15:56 +07:00
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