fix: handle null hostOptions when no active hosts exist

- 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

AGENTS.md

@@ -2,7 +2,7 @@
 
 > **Purpose**: Memungkinkan AI agent berikutnya melanjutkan development tanpa mengulang atau merusak.
 > **Last Updated**: 2026-07-07
-> **Current Phase**: Pre-development (documentation updated, scaffolding not yet started)
+> **Current Phase**: UI Fix — memperbaiki 107 visual issue dari `docs/PERBAIKANUI.md`
 
 ---
 
@@ -20,7 +20,7 @@ hostkeeper/                          (root — bersih untuk V2)
 │   ├── go.mod                       module git.tukangketik.id/swanadiva/hostkeeper
 │   ├── Makefile
 │   └── PROJECT_STATE.md             V1 full project state
-├── app/                             ← (BELUM DIBUAT) V2 backend GoFiber + views + static
+├── 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
@@ -35,7 +35,8 @@ hostkeeper/                          (root — bersih untuk V2)
 │   ├── TIMELINE.md                  Timeline 3.5 minggu
 │   ├── PERFROMANCE.md               Performance & stability
 │   ├── UI_TERMIUS_REFERENCE.md      Termius visual reference
-│   └── PROGRESS.md                  Status tracker
+│   ├── PROGRESS.md                  Status tracker
+│   └── PERBAIKANUI.md               UI fix checklist (107 task)
 ├── AGENTS.md                        ← file ini (checkpoint AI)
 └── README.md
 
@@ -102,7 +103,7 @@ Alasan:
 
 ---
 
-## 4. V2 Status — Pre-Development
+## 4. V2 Status — Sprint 0—6 Complete
 
 ### ✅ Sudah Selesai
 - Semua dokumentasi diupdate ke HTMX (10 file di `docs/`)
@@ -110,20 +111,23 @@ Alasan:
 - 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
 
-### ❌ Belum Dimulai
+### 🐛 UI Fix Checklist — Lihat `docs/PERBAIKANUI.md`
-- `app/backend/` — GoFiber v2 server + handler + views
+- **107 task** teridentifikasi dari audit visual vs template React
-
+- Acuan utama: 7 file di `template/src/components/`
-### 🐛 Bug Template (dari template/src/ — catatan saat implementasi)
+- Setiap task dihapus dari checklist setelah selesai
-1. **P0**: Missing CSS keyframes (fade-in, scale-up, slide-in) → tambah di `custom.css`
+- Urutan: Dashboard (P0) → Terminal (P0) → Snippets (P0) → Keychain/SFTP/Settings/Brief (P1)
-2. **P1**: `w-4.5 h-4.5` → ganti `w-5 h-5`
-3. **P2**: Tidak ada Error Boundary → not applicable (HTML template)
-4. **P2**: `as any` casts → not applicable (Go typed)
-5. **P3**: Auto-focus loss → handle via JS `focus()` di Alpine
 
 ---
 
-## 5. Struktur Folder V2 (Target)
+## 5. Struktur Folder V2 (Aktual)
 
 ```
 app/backend/
@@ -132,46 +136,57 @@ app/backend/
 ├── internal/
 │   ├── handler/               ← HTTP handlers (render HTML)
 │   │   ├── dashboard.go
-│   │   ├── terminal.go
-│   │   ├── sftp.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, terminal.js
+│   ├── js/                    ← htmx.min.js, alpine.min.js, utils.js, clipboard.js, terminal.js
 │   └── xterm/                 ← xterm.js lib
-└── views/
+└── views/                     ← Semua template flat (tidak ada subfolder partials/)
-    ├── layout.html
+    ├── nav.html
     ├── index.html
-    └── partials/              ← ~17 partial HTML files
+    ├── 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 (First Actions)
+## 6. Yang Harus Dilakukan Selanjutnya (UI Fix)
 
-Urutan eksekusi saat development dimulai:
+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`
-Sprint 0 — Setup:
+4. Verify: `cd app/backend && go build && ./backend` lalu buka http://localhost:1947
-Step 1:  mkdir -p app/backend
-Step 2:  cd app/backend && go mod init git.tukangketik.id/swanadiva/hostkeeper/v2
-Step 3:  go get github.com/gofiber/fiber/v2
-Step 4:  go get github.com/gofiber/template/html/v2
-Step 5:  Buat main.go (Fiber app skeleton + static + template engine)
-Step 6:  Download htmx.min.js, alpine.min.js ke static/js/
-Step 7:  Setup TailwindCSS v4: input.css → npx @tailwindcss/cli
-Step 8:  Buat custom.css (dot-grid, glassmorphism, keyframes)
-Step 9:  Buat views/layout.html + views/index.html + nav.html
-Step 10: Buat handler/health.go + handler/dashboard.go
-Step 11: Verify: buka http://localhost:1947 — layout terlihat
-```
 
 ---
 
@@ -187,6 +202,7 @@ Step 11: Verify: buka http://localhost:1947 — layout terlihat
 | 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/` |

app/backend/.air.toml

@@ -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

app/backend/.gitignore

@@ -0,0 +1,4 @@
+
+# Air hot-reload build artifacts
+tmp/
+build-errors.log

app/backend/go.mod

@@ -3,22 +3,31 @@ 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.16 // indirect
+	github.com/mattn/go-runewidth v0.0.19 // indirect
-	github.com/rivo/uniseg v0.2.0 // indirect
+	github.com/savsgio/gotils v0.0.0-20240303185622-093b76447511 // indirect
 	github.com/valyala/bytebufferpool v1.0.0 // indirect
-	github.com/valyala/fasthttp v1.51.0 // indirect
+	github.com/valyala/fasthttp v1.52.0 // indirect
 	github.com/valyala/tcplisten v1.0.0 // indirect
-	golang.org/x/sys v0.28.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

app/backend/go.sum

@@ -1,7 +1,15 @@
 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=
@@ -19,23 +27,27 @@ github.com/mattn/go-colorable v0.1.13/go.mod h1:7S9/ev0klgBDR4GtXTXX8a3vIGJpMovk
 github.com/mattn/go-isatty v0.0.16/go.mod h1:kYGgaQfpe5nmfYZH+SKPsOc2e4SrIfOl2e/yFXSvRLM=
 github.com/mattn/go-isatty v0.0.20 h1:xfD0iDuEKnDkl03q4limB+vH+GxLEtL/jb4xVJSWWEY=
 github.com/mattn/go-isatty v0.0.20/go.mod h1:W+V8PltTTMOvKvAeJH7IuucS94S2C6jfK/D7dTCTo3Y=
-github.com/mattn/go-runewidth v0.0.16 h1:E5ScNMtiwvlvB5paMFdw9p4kSQzbXFikJ5SQO6TULQc=
+github.com/mattn/go-runewidth v0.0.19 h1:v++JhqYnZuu5jSKrk9RbgF5v4CGUjqRfBm05byFGLdw=
-github.com/mattn/go-runewidth v0.0.16/go.mod h1:Jdepj2loyihRzMpdS35Xk/zdY8IAYHsh153qUoGf23w=
+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/rivo/uniseg v0.2.0 h1:S1pD9weZBuJdFmowNwbpi7BJ8TNftyUImj/0WQi72jY=
+github.com/savsgio/gotils v0.0.0-20240303185622-093b76447511 h1:KanIMPX0QdEdB4R3CiimCAbxFrhB3j7h0/OvpYGVQa8=
-github.com/rivo/uniseg v0.2.0/go.mod h1:J6wj4VEh+S6ZtnVlnTBMWIodfgj8LQOQFoIToxlJtxc=
+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.51.0 h1:8b30A5JlZ6C7AS81RsWjYMQmrZG6feChmgAolCl1SqA=
+github.com/valyala/fasthttp v1.52.0 h1:wqBQpxH71XW0e2g+Og4dzQM8pk34aFYlA1Ga8db7gU0=
-github.com/valyala/fasthttp v1.51.0/go.mod h1:oI2XroL+lI7vdXyYoQk03bXBThfFl2cVdIA3Xl7cH8g=
+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.28.0 h1:Fksou7UEQUWlKvIdsqzJmUmCX3cZuD2+P3XyyzwMhlA=
+golang.org/x/sys v0.46.0 h1:noSf2Fq6F8DBgS+LysIkx7rIExoNHJsxOAtPp4rthXw=
-golang.org/x/sys v0.28.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
+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=

app/backend/internal/handler/brief.go

@@ -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)
+}

app/backend/internal/handler/dashboard.go

@@ -1,35 +1,45 @@
 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 store = model.NewHostStore()
+var hostStore = store.NewHostStore()
 
-func Dashboard(c *fiber.Ctx) error {
+var navItems = []fiber.Map{
-	hosts := store.All()
-	return c.Render("index", fiber.Map{
-		"View":   "hosts",
-		"Title":  "Hosts",
-		"Hosts":  hosts,
-		"Active": countByStatus(hosts, "active"),
-		"Offline": countByStatus(hosts, "offline"),
-		"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 := store.Search(q, filter)
+	hosts := hostStore.Search(q, filter)
 	return c.Render("host_list", fiber.Map{
 		"Hosts":   hosts,
 		"Active":  countByStatus(hosts, "active"),
@@ -37,19 +47,102 @@ func DashboardList(c *fiber.Ctx) error {
 	})
 }
 
+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")
-	os := c.FormValue("os")
-	provider := c.FormValue("provider")
-	hostType := c.FormValue("type")
-
 	if name == "" || ip == "" {
 		return c.Status(400).SendString("name and ip required")
 	}
 
-	store.Add(name, ip, os, provider, hostType)
+	h := model.Host{
-	hosts := store.All()
+		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"),
@@ -59,8 +152,8 @@ func CreateHost(c *fiber.Ctx) error {
 
 func DeleteHost(c *fiber.Ctx) error {
 	id := c.Params("id")
-	store.Delete(id)
+	hostStore.Delete(id)
-	hosts := store.All()
+	hosts := hostStore.All()
 	return c.Render("host_list", fiber.Map{
 		"Hosts":   hosts,
 		"Active":  countByStatus(hosts, "active"),

app/backend/internal/handler/keychain.go

@@ -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})
+}

app/backend/internal/handler/settings.go

@@ -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
+}

app/backend/internal/handler/sftp.go

@@ -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,
+	})
+}

app/backend/internal/handler/snippets.go

@@ -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),
+	})
+}

app/backend/internal/handler/terminal.go

@@ -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])
+	}
+}

app/backend/internal/model/config.go

@@ -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,
+	}
+}

app/backend/internal/model/device.go

@@ -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},
+	}
+}

app/backend/internal/model/file.go

@@ -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"},
+	}
+}

app/backend/internal/model/host.go

@@ -1,96 +1,22 @@
 package model
 
-import (
-	"math/rand"
-	"strings"
-	"time"
-)
-
 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
+	Status    string `json:"status"`
 	LastSeen  string `json:"lastSeen"`
-	Type      string `json:"type"` // api | db | edge | web | desktop | server
+	Type      string `json:"type"`
-}
 
-type HostStore struct {
+	Hostname string `json:"hostname"`
-	Hosts []Host
+	Port     int    `json:"port"`
-}
+	Username string `json:"username"`
-
+	AuthType string `json:"authType"` // password | key | both
-func NewHostStore() *HostStore {
+	Password string `json:"password,omitempty"`
-	return &HostStore{
+	KeyID    string `json:"keyId,omitempty"`
-		Hosts: defaultHosts(),
+	Group    string `json:"group,omitempty"`
-	}
+	Tags     string `json:"tags,omitempty"`
-}
+	Notes    string `json:"notes,omitempty"`
-
-func (s *HostStore) All() []Host {
-	return s.Hosts
-}
-
-func (s *HostStore) Search(q, filter string) []Host {
-	var result []Host
-	for _, h := range s.Hosts {
-		if filter != "" && filter != "all" && h.Status != filter {
-			continue
-		}
-		if q == "" || strings.Contains(strings.ToLower(h.Name), strings.ToLower(q)) ||
-			strings.Contains(strings.ToLower(h.IP), strings.ToLower(q)) ||
-			strings.Contains(strings.ToLower(h.OS), strings.ToLower(q)) {
-			result = append(result, h)
-		}
-	}
-	if result == nil {
-		return []Host{}
-	}
-	return result
-}
-
-func (s *HostStore) Delete(id string) {
-	for i, h := range s.Hosts {
-		if h.ID == id {
-			s.Hosts = append(s.Hosts[:i], s.Hosts[i+1:]...)
-			return
-		}
-	}
-}
-
-func (s *HostStore) Add(name, ip, os, provider, hostType string) Host {
-	h := Host{
-		ID:       randString(8),
-		Name:     name,
-		IP:       ip,
-		OS:       os,
-		Provider: provider,
-		Status:   "active",
-		LastSeen: time.Now().Format("Jan 2, 2006"),
-		Type:     hostType,
-	}
-	s.Hosts = append(s.Hosts, h)
-	return h
-}
-
-func randString(n int) string {
-	const letters = "abcdefghijklmnopqrstuvwxyz0123456789"
-	b := make([]byte, n)
-	for i := range b {
-		b[i] = letters[rand.Intn(len(letters))]
-	}
-	return string(b)
-}
-
-func defaultHosts() []Host {
-	return []Host{
-		{ID: "h1", Name: "api-prod-01", IP: "10.0.1.15", OS: "Ubuntu 22.04", Provider: "AWS US-East", Status: "active", LastSeen: "Online", Type: "api"},
-		{ID: "h2", Name: "db-primary-01", IP: "10.0.2.5", OS: "Debian 12", Provider: "AWS US-East", Status: "active", LastSeen: "Online", Type: "db"},
-		{ID: "h3", Name: "web-edge-02", IP: "192.168.1.20", OS: "Alpine 3.19", Provider: "DigitalOcean", Status: "offline", LastSeen: "2 hours ago", Type: "edge"},
-		{ID: "h4", Name: "staging-api-01", IP: "10.0.3.10", OS: "Ubuntu 22.04", Provider: "AWS EU-West", Status: "active", LastSeen: "5 min ago", Type: "api"},
-		{ID: "h5", Name: "dev-db-02", IP: "192.168.1.45", OS: "Fedora 39", Provider: "Hetzner", Status: "offline", LastSeen: "1 day ago", Type: "db"},
-		{ID: "h6", Name: "monitor-01", IP: "10.0.0.5", OS: "Ubuntu 24.04", Provider: "AWS US-East", Status: "active", LastSeen: "Just now", Type: "server"},
-		{ID: "h7", Name: "worker-pool-01", IP: "10.0.4.50", OS: "Debian 12", Provider: "GCP US-Central", Status: "active", LastSeen: "1 min ago", Type: "server"},
-		{ID: "h8", Name: "bastion-host", IP: "54.85.12.7", OS: "Ubuntu 22.04", Provider: "AWS US-East", Status: "offline", LastSeen: "3 days ago", Type: "server"},
-	}
 }

app/backend/internal/model/keychain.go

@@ -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"`
+}

app/backend/internal/model/snippet.go

@@ -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"`
+}

app/backend/internal/model/transfer.go

@@ -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 }

app/backend/internal/sshconn/client.go

@@ -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))
+}

app/backend/internal/store/devices.go

@@ -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},
+	}
+}

app/backend/internal/store/host.go

@@ -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
+}

app/backend/internal/store/key.go

@@ -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"
+}

app/backend/internal/store/settings.go

@@ -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,
+	}
+}

app/backend/internal/store/snippet.go

@@ -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
+		}
+	}
+}

app/backend/internal/store/store.go

@@ -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)
+}

app/backend/main.go

@@ -1,8 +1,10 @@
 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"
@@ -15,8 +17,38 @@ import (
 func main() {
 	engine := html.New("./views", ".html")
 	engine.Reload(true)
-	engine.AddFunc("svg", func(name string) string {
+	engine.AddFunc("svg", func(name string) template.HTML {
-		return ""
+		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{
@@ -29,9 +61,32 @@ func main() {
 	app.Static("/static", "./static")
 
 	app.Get("/", handler.Dashboard)
-	app.Get("/hosts", handler.DashboardList)
+	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"))

app/backend/static/css/custom.css

@@ -176,6 +176,11 @@
   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;

app/backend/static/js/clipboard.js

@@ -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);
+}

app/backend/static/js/terminal.js

@@ -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');
+      }
+    },
+  }));
+});

app/backend/static/js/toggles.js

@@ -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' : '';
+      });
+    }
+  }));
+});

app/backend/static/js/utils.js

@@ -0,0 +1,6 @@
+document.addEventListener('alpine:init', () => {
+  Alpine.data('passphraseToggle', () => ({
+    show: false,
+    toggle() { this.show = !this.show; }
+  }));
+});

app/backend/static/xterm/xterm.css

@@ -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;
+}

app/backend/views/brief.html

@@ -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>

app/backend/views/brief_content.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}}

app/backend/views/host_list.html

@@ -1,85 +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 xl:grid-cols-4 gap-4">
+       class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
     {{range .Hosts}}
-    <div class="rounded-xl bg-white border border-outline-variant/30 p-4 hover:shadow-md transition-shadow animate-fade-in">
+    <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 items-center justify-between mb-3">
+      <div class="flex justify-between items-start mb-4">
-        <div class="flex items-center gap-2">
+        <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">
-          <div class="w-8 h-8 rounded-lg {{if eq .Status "active"}}bg-primary/10 text-primary{{else}}bg-on-surface-variant/10 text-on-surface-variant{{end}} flex items-center justify-center">
+          <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>
-            <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="M5 12h14M12 5l7 7-7 7"/></svg>
         </div>
-          <div>
+        <div class="flex items-center gap-1.5">
-            <p class="text-sm font-medium text-on-surface">{{.Name}}</p>
+          <span class="w-2 h-2 rounded-full {{if eq .Status "active"}}bg-secondary animate-pulse{{else}}bg-outline{{end}}"></span>
-            <p class="text-xs text-on-surface-variant">{{.IP}}</p>
+          <span class="text-[10px] font-bold uppercase tracking-wider {{if eq .Status "active"}}text-secondary{{else}}text-outline{{end}}">{{.Status}}</span>
         </div>
       </div>
-        <span class="text-xs font-medium px-2 py-0.5 rounded-full {{if eq .Status "active"}}bg-secondary/10 text-secondary{{else}}bg-on-surface-variant/10 text-on-surface-variant{{end}}">
-          {{.Status}}
-        </span>
-      </div>
-      <div class="flex items-center gap-2 text-xs text-on-surface-variant mb-3">
-        <span>{{.OS}}</span>
-        <span>·</span>
-        <span>{{.Provider}}</span>
-      </div>
-      <div class="flex items-center justify-between pt-3 border-t border-outline-variant/20">
-        <span class="text-xs text-on-surface-variant">{{.LastSeen}}</span>
-        <div class="flex gap-1">
-          <button class="p-1.5 rounded-lg hover:bg-primary/10 text-on-surface-variant hover:text-primary transition-colors"
-                  onclick="alert('Connect to {{.Name}}')" title="Connect">
-            <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 12h14M12 5l7 7-7 7"/></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">
-            <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}}
-  </div>
 
-  <div x-show="view === 'list'" x-cloak class="flex flex-col gap-2">
+      <h4 class="font-bold text-on-surface group-hover:text-primary transition-colors text-base truncate">{{.Name}}</h4>
-    {{range .Hosts}}
+      <p class="font-mono text-xs text-outline mb-1">{{.IP}}</p>
-    <div class="rounded-xl bg-white border border-outline-variant/30 px-4 py-3 flex items-center gap-4 hover:shadow-sm transition-shadow animate-fade-in">
+      <p class="text-[10px] text-on-surface-variant mb-3" x-data="{ show: false }">
-      <div class="w-2 h-2 rounded-full {{if eq .Status "active"}}bg-secondary{{else}}bg-on-surface-variant{{end}} shrink-0"></div>
+        <span class="font-medium">{{.Username | default "root"}}@{{if .Hostname}}{{.Hostname}}{{else}}{{.IP}}{{end}}{{if ne .Port 22}}:{{.Port}}{{end}}</span>
-      <div class="w-8 h-8 rounded-lg {{if eq .Status "active"}}bg-primary/10 text-primary{{else}}bg-on-surface-variant/10 text-on-surface-variant{{end}} flex items-center justify-center shrink-0">
+      </p>
-        <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="M5 12h14M12 5l7 7-7 7"/></svg>
+
-      </div>
+      {{if .Type}}<div class="flex flex-wrap gap-1.5 mb-4">
-      <div class="flex-1 min-w-0">
+        <span class="px-2 py-0.5 bg-primary-container/10 text-primary rounded text-[10px] font-bold uppercase">{{.Type}}</span>
-        <div class="flex items-center gap-2">
+      </div>{{end}}
-          <p class="text-sm font-medium text-on-surface">{{.Name}}</p>
+
-          <span class="text-xs font-medium px-1.5 py-0.5 rounded-full {{if eq .Status "active"}}bg-secondary/10 text-secondary{{else}}bg-on-surface-variant/10 text-on-surface-variant{{end}}">{{.Status}}</span>
+      <div class="pt-3 border-t border-outline-variant/30 flex justify-between items-center text-xs">
-        </div>
+        <span class="text-outline italic">Last seen {{.LastSeen}}</span>
-        <p class="text-xs text-on-surface-variant truncate">{{.IP}} · {{.OS}} · {{.Provider}}</p>
+        <div class="flex gap-1">
-      </div>
+          <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>
-      <span class="text-xs text-on-surface-variant shrink-0">{{.LastSeen}}</span>
+          <button type="button"
-      <div class="flex gap-1 shrink-0">
+                  @click="$dispatch('edit-host', { ID: '{{.ID}}', Name: '{{.Name}}', IP: '{{.IP}}', Hostname: '{{.Hostname}}', Port: {{.Port}}, Username: '{{.Username}}', Type: '{{.Type}}', AuthType: '{{.AuthType}}', Password: '{{.Password}}', Notes: '{{.Notes}}' })"
-        <button class="p-1.5 rounded-lg hover:bg-primary/10 text-on-surface-variant hover:text-primary transition-colors"
+                  class="p-1.5 rounded-lg hover:bg-surface-container text-on-surface-variant hover:text-primary transition-colors" title="Edit">
-                onclick="alert('Connect to {{.Name}}')" title="Connect">
+            <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>
-          <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 12h14M12 5l7 7-7 7"/></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">
+                  hx-delete="/hosts/{{.ID}}" hx-target="#host-list" hx-confirm="Delete {{.Name}}?" title="Delete"
-          <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>
+                  @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">Try a different search or add a new host</p>
+    <p class="text-sm mt-1">Add your first server to get started</p>
   </div>
   {{end}}
-
-  <div class="rounded-xl border-2 border-dashed border-outline-variant/30 p-6 flex flex-col items-center justify-center text-on-surface-variant/50 hover:border-primary/30 hover:text-primary/50 transition-colors cursor-pointer min-h-[160px]"
-       @click="$dispatch('open-modal')">
-    <svg class="w-8 h-8 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
-    <span class="text-sm font-medium">Add New Host</span>
-  </div>
 </div>
 {{end}}

app/backend/views/host_modal.html

@@ -1,77 +1,181 @@
 {{define "host_modal"}}
-<div id="host-modal" class="fixed inset-0 z-50" x-data="{ open: false }" x-show="open" x-cloak
+<div id="host-modal" class="fixed inset-0 z-50" x-data="hostForm()" x-show="open" x-cloak
-     @open-modal.window="open = true" @keydown.escape.window="open = false">
+     @open-modal.window="reset(); open = true"
-  <div class="absolute inset-0 bg-black/30 backdrop-blur-sm" @click="open = false"></div>
+     @edit-host.window="populate($event.detail); open = true"
-  <div class="absolute inset-0 flex items-center justify-center p-4" x-show="open" x-transition>
+     @keydown.escape.window="open = false">
-    <div class="bg-white rounded-xl shadow-xl w-full max-w-md p-6" @click.outside="open = false">
+  <div class="absolute inset-0 bg-black/40 backdrop-blur-sm" @click="open = false"></div>
-      <div class="flex items-center justify-between mb-6">
+  <div class="absolute inset-0 overflow-y-auto p-4" x-show="open" x-transition>
-        <h2 class="text-lg font-semibold text-on-surface">Add New Host</h2>
+    <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="p-1 rounded-lg hover:bg-surface-container-low text-on-surface-variant">
+                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="outerHTML"
+      <form hx-post="/hosts"
-            @submit="open = false"
+            hx-target="#host-list" hx-swap="innerHTML"
-            class="space-y-4">
+            @submit="open = false; $dispatch('toast-message', { message: editing ? 'Host updated' : 'Host added' })"
-        <div>
+            class="p-6 space-y-4 text-sm">
-          <label class="block text-sm font-medium text-on-surface mb-1">Host Name</label>
+        <input type="hidden" name="hostId" :value="editing ? hostId : ''">
-          <input type="text" name="name" required placeholder="e.g. web-prod-01"
+
-                 class="w-full px-3 py-2 rounded-lg border border-outline-variant/50 bg-white text-sm text-on-surface
-                        focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary/50">
-        </div>
-        <div>
-          <label class="block text-sm font-medium text-on-surface mb-1">IP Address</label>
-          <input type="text" name="ip" required placeholder="e.g. 10.0.1.100"
-                 class="w-full px-3 py-2 rounded-lg border border-outline-variant/50 bg-white text-sm text-on-surface
-                        focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary/50">
-        </div>
         <div class="grid grid-cols-2 gap-4">
-          <div>
+          <div class="flex flex-col gap-1.5">
-            <label class="block text-sm font-medium text-on-surface mb-1">OS</label>
+            <label class="text-xs font-bold text-on-surface-variant uppercase">Host Identifier</label>
-            <select name="os" class="w-full px-3 py-2 rounded-lg border border-outline-variant/50 bg-white text-sm text-on-surface focus:outline-none focus:ring-2 focus:ring-primary/30">
+            <input type="text" name="name" x-model="form.name" required placeholder="e.g. prod-db-replica"
-              <option value="Ubuntu 22.04">Ubuntu 22.04</option>
+                   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">
-              <option value="Ubuntu 24.04">Ubuntu 24.04</option>
-              <option value="Debian 12">Debian 12</option>
-              <option value="Alpine 3.19">Alpine 3.19</option>
-              <option value="Fedora 39">Fedora 39</option>
-            </select>
           </div>
-          <div>
+          <div class="flex flex-col gap-1.5">
-            <label class="block text-sm font-medium text-on-surface mb-1">Provider</label>
+            <label class="text-xs font-bold text-on-surface-variant uppercase">IP Address / Domain</label>
-            <select name="provider" class="w-full px-3 py-2 rounded-lg border border-outline-variant/50 bg-white text-sm text-on-surface focus:outline-none focus:ring-2 focus:ring-primary/30">
+            <input type="text" name="ip" x-model="form.ip" required placeholder="e.g. 10.0.12.19"
-              <option value="AWS US-East">AWS US-East</option>
+                   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">
-              <option value="AWS EU-West">AWS EU-West</option>
-              <option value="DigitalOcean">DigitalOcean</option>
-              <option value="Hetzner">Hetzner</option>
-              <option value="GCP US-Central">GCP US-Central</option>
-            </select>
           </div>
         </div>
-        <div>
+
-          <label class="block text-sm font-medium text-on-surface mb-1">Type</label>
+        <div class="grid grid-cols-2 gap-4">
-          <select name="type" class="w-full px-3 py-2 rounded-lg border border-outline-variant/50 bg-white text-sm text-on-surface focus:outline-none focus:ring-2 focus:ring-primary/30">
+          <div class="flex flex-col gap-1.5">
-            <option value="server">Server</option>
+            <label class="text-xs font-bold text-on-surface-variant uppercase">Hostname (SSH)</label>
-            <option value="api">API</option>
+            <input type="text" name="hostname" x-model="form.hostname" placeholder="e.g. prod.example.com"
-            <option value="db">Database</option>
+                   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">
-            <option value="web">Web</option>
-            <option value="edge">Edge</option>
-            <option value="desktop">Desktop</option>
-          </select>
           </div>
-        <div class="flex justify-end gap-3 pt-2">
+          <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 rounded-lg text-sm font-medium text-on-surface-variant hover:bg-surface-container-low transition-colors">
+                  class="px-4 py-2 text-xs font-bold text-outline hover:text-on-surface transition-colors">Cancel</button>
-            Cancel
-          </button>
           <button type="submit"
-                  class="px-4 py-2 rounded-lg text-sm font-medium bg-primary text-white hover:bg-primary/90 transition-colors">
+                  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"
-            Add Host
+                  x-text="editing ? 'Save Changes' : 'Add Host'"></button>
-          </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}}

app/backend/views/index.html

@@ -1,63 +1,182 @@
-{{template "layout" .}}
+<!DOCTYPE html>
-
+<html lang="en">
-{{define "content"}}
+<head>
-<div id="dashboard-page" class="max-w-7xl mx-auto">
+  <meta charset="UTF-8">
-  <div class="grid grid-cols-3 gap-4 mb-6">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <div class="rounded-xl bg-white border border-outline-variant/30 p-4">
+  <title>Hosts · Hostkeeper V2</title>
-      <div class="flex items-center gap-2 text-primary mb-1">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
-        <span class="w-5 h-5 bg-primary/20 rounded flex items-center justify-center text-xs font-bold">⚡</span>
+  <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">
-        <span class="text-xs font-medium text-on-surface-variant uppercase tracking-wide">Active Connections</span>
+  <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>
-      <span class="text-2xl font-bold text-on-surface">{{.Active}}</span>
+          <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>
-    <div class="rounded-xl bg-white border border-outline-variant/30 p-4">
+                <p class="text-xs text-on-surface-variant">Global performance metrics sync integrity active.</p>
-      <div class="flex items-center gap-2 text-secondary mb-1">
-        <span class="w-5 h-5 bg-secondary/20 rounded flex items-center justify-center text-xs font-bold">✓</span>
-        <span class="text-xs font-medium text-on-surface-variant uppercase tracking-wide">Transfers Today</span>
               </div>
-      <span class="text-2xl font-bold text-on-surface">0</span>
+              <div 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 class="rounded-xl bg-white border border-outline-variant/30 p-4">
-      <div class="flex items-center gap-2 text-tertiary mb-1">
-        <span class="w-5 h-5 bg-tertiary/20 rounded flex items-center justify-center text-xs font-bold">#</span>
-        <span class="text-xs font-medium text-on-surface-variant uppercase tracking-wide">Saved Hosts</span>
             </div>
-      <span class="text-2xl font-bold text-on-surface">{{len .Hosts}}</span>
+            <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 class="flex items-center gap-3 mb-6" x-data="{ view: 'grid' }">
+          <div x-data="{ view: 'grid' }">
-    <div class="relative flex-1 max-w-md">
+            <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?q=..." hx-trigger="keyup delay:200ms"
+                         hx-get="/hosts/list" hx-trigger="keyup delay:200ms"
-             hx-target="#host-list" hx-include="[name='filter']"
+                         hx-target="#host-list"
-             class="w-full pl-9 pr-3 py-2 rounded-lg border border-outline-variant/50
+                         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">
-                    bg-white text-sm text-on-surface placeholder-on-surface-variant
-                    focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary/50">
                 </div>
-    <select name="filter"
+                <div class="flex border border-outline-variant/50 rounded-lg p-0.5 bg-white">
-            hx-get="/hosts?filter={value}" hx-trigger="change" hx-target="#host-list"
-            class="px-3 py-2 rounded-lg border border-outline-variant/50 bg-white text-sm text-on-surface
-                   focus:outline-none focus:ring-2 focus:ring-primary/30">
-      <option value="all">All</option>
-      <option value="active">Active</option>
-      <option value="offline">Offline</option>
-    </select>
-    <div class="flex items-center bg-white rounded-lg border border-outline-variant/50 p-0.5">
                   <button @click="view = 'grid'"
-              :class="view === 'grid' ? 'bg-primary/10 text-primary' : 'text-on-surface-variant hover:text-on-surface'"
+                          :class="view === 'grid' ? 'bg-surface-container text-primary' : 'text-on-surface-variant'"
-              class="p-1.5 rounded transition-colors">
+                          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-primary/10 text-primary' : 'text-on-surface-variant hover:text-on-surface'"
+                          :class="view === 'list' ? 'bg-surface-container text-primary' : 'text-on-surface-variant'"
-              class="p-1.5 rounded transition-colors">
+                          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>
-{{template "host_modal" .}}
+        </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>

app/backend/views/key_grid.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}}

app/backend/views/keychain.html

@@ -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>

app/backend/views/nav.html

@@ -1,6 +1,7 @@
 {{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">
+<nav class="w-[260px] min-h-screen bg-white/70 backdrop-blur-md border-r border-outline-variant/30 flex flex-col shrink-0"
-  <div class="p-4 border-b border-outline-variant/20">
+     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>
@@ -9,10 +10,8 @@
   <div class="flex-1 px-3 py-4 space-y-0.5">
     {{range .NavItems}}
     <a href="/{{.ID}}"
-       hx-get="/{{.ID}}" hx-target="#main-content" hx-push-url="true"
+       :class="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
+       class="flex items-center gap-3 px-3 py-2 rounded-lg transition-colors text-sm">
-              {{if eq $.View .ID}}bg-primary/10 text-primary font-medium
-              {{else}}text-on-surface-variant hover:bg-surface-container-low hover:text-on-surface{{end}}">
       <span class="w-5 h-5 flex items-center justify-center">{{svg .Icon}}</span>
       <span>{{.Label}}</span>
     </a>

app/backend/views/settings.html

@@ -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>

app/backend/views/settings_content.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}}

app/backend/views/sftp.html

@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Hostkeeper V2</title>
+  <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">
@@ -19,7 +19,7 @@
         <h1 class="text-lg font-semibold text-on-surface">{{.Title}}</h1>
       </header>
       <main id="main-content" class="flex-1 overflow-auto p-6">
-        {{block "content" .}}{{end}}
+        {{template "sftp_content" .}}
       </main>
     </div>
   </div>

app/backend/views/sftp_content.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}}

app/backend/views/sftp_pane.html

@@ -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}}

app/backend/views/snippet_grid.html

@@ -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}}

app/backend/views/snippets.html

@@ -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>

app/backend/views/terminal.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>

app/backend/views/terminal_content.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}}

docs/PROGRESS.md

@@ -3,7 +3,7 @@
 > **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**: Documentation complete, Sprint 0 not started.
+> **Status**: Sprint 0—6 selesai. V2 HTMX feature complete.
 
 ---
 
@@ -34,244 +34,98 @@ Lihat [ARCHITECTURE_HTMX.md](ARCHITECTURE_HTMX.md) untuk detail.
 | Item | Status |
 |------|--------|
 | Planning documents (HTMX) | DONE |
-| Sprint 0 — Setup GoFiber + HTMX | NOT STARTED |
+| Sprint 0 — Setup GoFiber + HTMX | DONE |
-| Sprint 1 — Dashboard + Host List | NOT STARTED |
+| Sprint 1 — Dashboard + Host List | DONE |
-| Sprint 2 — Snippets + Keychain | NOT STARTED |
+| Sprint 2 — Snippets + Keychain | DONE |
-| Sprint 3 — Settings + Brief | NOT STARTED |
+| Sprint 3 — Settings + Brief | DONE |
-| Sprint 4 — SFTP Dual-Pane | NOT STARTED |
+| Sprint 4 — SFTP Dual-Pane | DONE |
-| Sprint 5 — Terminal + xterm.js | NOT STARTED |
+| Sprint 5 — Terminal + xterm.js | DONE |
-| Sprint 6 — Storage Integration | NOT STARTED |
+| Sprint 6 — Storage Integration | DONE |
 
 ---
 
-## 3. Sprint Checklist
+## 3. Sprint Checklist (HTMX)
 
-### Sprint 0 — Project Scaffolding (Day 0)
+### Sprint 0 — Setup GoFiber + HTMX
-- [ ] Create `app/backend/` directory with Go module (`go mod init`)
+- [x] Go module init (`app/backend/go.mod`)
-- [ ] Install GoFiber v2 + dependencies in `go.mod`
+- [x] Install GoFiber v2 + deps
-- [ ] Create `app/backend/main.go` — minimal fiber server (port 0 for random)
+- [x] Minimal Fiber server (`main.go`) — port 1947
-- [ ] Create `app/frontend/` with Vite + React + TypeScript
+- [x] Static files serving (`/static/`)
-- [ ] Create `app/electron/` with Electron shell
+- [x] HTML template engine (html/template via gofiber/template)
-- [ ] Electron spawns Go backend as child process on startup
+- [x] Download HTMX + Alpine.js (`static/js/`)
-- [ ] Electron loads web UI from localhost (Go serve frontend dist)
+- [x] Setup TailwindCSS v4 — `input.css` → `output.css`
-- [ ] Create `app/backend/middleware/` — CORS, logging, recover, compress
+- [x] Custom CSS (Lumina) — dot-grid, glassmorphism, keyframes, toggle, modal, x-cloak
-- [ ] Create `app/backend/bridge/` directory (placeholder handlers)
+- [x] Layout template (`views/layout.html`) — sidebar + header + main
-- [ ] Create `app/backend/ws/` directory (placeholder handlers)
+- [x] Nav template (`views/nav.html`) — nav items with active state
-- [ ] Build script: `scripts/build.sh` — Go build → frontend build → Electron package
+- [x] Index + routing (`views/index.html` + `handler/dashboard.go`)
-- [ ] Verify: `npm run dev` opens Electron window with "Hostkeeper V2" title
+- [x] Health endpoint (`handler/health.go`)
-- [ ] Verify: Go server responds at `localhost:PORT/api/health`
+- **Verify**: `curl :1947/api/health` → `{"app":"hostkeeper-v2","status":"ok"}`
 
-### Sprint 1 — Foundation (Day 1-5)
+### 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
 
-#### Day 1-2: Data API Layer
+### Sprint 2 — Snippets + Keychain
-- [ ] `app/backend/bridge/hosts.go` — GET /api/hosts (list, filter, search)
+- [x] Model Snippet + SnippetStore (`internal/model/snippet.go`)
-- [ ] `app/backend/bridge/hosts.go` — POST /api/hosts (create)
+- [x] Model Key + KeyStore (`internal/model/keychain.go`)
-- [ ] `app/backend/bridge/hosts.go` — GET /api/hosts/:id (detail)
+- [x] Snippets handler (`internal/handler/snippets.go`)
-- [ ] `app/backend/bridge/hosts.go` — PUT /api/hosts/:id (update)
+- [x] Keychain handler (`internal/handler/keychain.go`)
-- [ ] `app/backend/bridge/hosts.go` — DELETE /api/hosts/:id (delete)
+- [x] Snippets template (`views/snippets.html`) — standalone page (no layout inheritance)
-- [ ] `app/backend/bridge/hosts.go` — PATCH /api/hosts/:id/favorite (toggle)
+- [x] Snippet grid partial (`views/snippet_grid.html`) — HTMX partial
-- [ ] `app/backend/bridge/keys.go` — GET /api/keys (list, no private key)
+- [x] Keychain template (`views/keychain.html`) — standalone page
-- [ ] `app/backend/bridge/keys.go` — POST /api/keys (import)
+- [x] Key grid partial (`views/key_grid.html`) — HTMX partial
-- [ ] `app/backend/bridge/keys.go` — POST /api/keys/generate (generate new)
+- [x] Clipboard JS (`static/js/clipboard.js`)
-- [ ] `app/backend/bridge/keys.go` — DELETE /api/keys/:id (delete)
+- [x] Utils JS (`static/js/utils.js`)
-- [ ] `app/backend/bridge/snippets.go` — GET /api/snippets (list)
+- **Note**: Removed `layout.html` — all pages are now standalone (Go template `{{define}}` conflict)
-- [ ] `app/backend/bridge/snippets.go` — POST /api/snippets (create)
+- **Verify**: Both pages render, CRUD works, clipboard copies, strength badges display
-- [ ] `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
+### Sprint 3 — Settings + Brief
-- [ ] `app/backend/bridge/groups.go` — GET /api/groups (tree structure)
+- [x] Model Device + Config (`internal/model/device.go`, `internal/model/config.go`)
-- [ ] `app/backend/bridge/groups.go` — POST /api/groups (create)
+- [x] Settings handler + UpdateConfig (`internal/handler/settings.go`)
-- [ ] `app/backend/bridge/groups.go` — PUT /api/groups/:id (update)
+- [x] Brief handler (`internal/handler/brief.go`)
-- [ ] `app/backend/bridge/groups.go` — DELETE /api/groups/:id (delete)
+- [x] Settings template (`views/settings.html`) — profile, tabs, toggles, devices, danger zone
-- [ ] `app/backend/bridge/groups.go` — PUT /api/groups/:id/move (reparent)
+- [x] Brief template (`views/brief.html`) — keyboard shortcuts, about
-- [ ] `app/backend/bridge/config.go` — GET /api/config (app config)
+- [x] Toggle switch JS (`static/js/toggles.js`) — Alpine toggle data
-- [ ] `app/backend/bridge/config.go` — PUT /api/config (update config)
+- [x] Danger zone — confirm flow with localStorage.clear()
-- [ ] `app/backend/bridge/config.go` — POST /api/config/unlock (vault unlock)
+- **Verify**: Settings page renders with tabs, toggles work via Alpine, brief page shows shortcuts
-- [ ] `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
+### Sprint 4 — SFTP Dual-Pane
-- [ ] React Router setup — routes for all screens (placeholder)
+- [x] Model FileItem + Transfer (`internal/model/file.go`, `internal/model/transfer.go`)
-- [ ] Layout component — Sidebar + TabBar + MainContent + StatusBar
+- [x] SFTP handler (`internal/handler/sftp.go`) — page, pane partial, create folder, delete file
-- [ ] Sidebar component — GroupTree (recursive), SearchBar, QuickActions
+- [x] SFTP template (`views/sftp.html`) — dual-pane (local/remote), breadcrumb, search, drop-zone, toast, folder modal
-- [ ] Theme system — CSS variables (dark, light, high-contrast)
+- [x] SFTP pane partial (`views/sftp_pane.html`) — file table with icons by type, hover actions
-- [ ] API client layer — fetch wrapper + error handling + retry logic
+- [x] `dict` helper fungsitambah di template engine (`main.go`)
-- [ ] State management — Zustand stores (hosts, keys, snippets, ui, terminal)
+- [x] Folder create (Alpine modal + POST) + delete (hx-delete)
-- [ ] Keyboard shortcuts — Cmd+N new host, Cmd+K search, Cmd+D dark mode
+- **Verify**: Dual-pane renders, file list per type icons, CRUD works, drop-zone + toast present
-- [ ] Verify: Navigation between screens works
 
-#### Day 5: Host List Screen
+### Sprint 5 — Terminal + xterm.js
-- [ ] HostList screen — HostCard components (grid + list view toggle)
+- [x] Download xterm.js v5.3.0 + xterm.css (`static/xterm/`)
-- [ ] GroupTree — collapsible, recursive, drag-and-drop (host -> group)
+- [x] Install gofiber/contrib/websocket v1.3.4
-- [ ] Search — filter by name, hostname, tag
+- [x] Terminal handler (`internal/handler/terminal.go`) — page + WebSocket mock shell (ls, pwd, cd, cat, whoami, etc.)
-- [ ] Tag filter bar — chips for each tag, click to filter
+- [x] Terminal template (`views/terminal.html`) — dark theme, tab bar with Alpine, xterm containers
-- [ ] Favorite toggle — star icon, filter favorites only
+- [x] Terminal JS (`static/js/terminal.js`) — Alpine terminalManager, xterm init, WS connect, tab CRUD
-- [ ] Context menu — right-click: connect, edit, delete, duplicate
+- [x] Tab management — add/switch/close tabs, random host assignment
-- [ ] Empty state — illustration + "Add your first host" CTA
+- **Verify**: Terminal page renders, xterm.js loaded, WS endpoint returns Upgrade Required
-- [ ] Loading skeleton states
-- [ ] Verify: Host appears in list, can search, can filter, can favorite
 
-### Sprint 2 — Core Features (Day 6-10)
+### Sprint 6 — Data Store Integration
-
+- [x] `go.mod` replace directive → `v1/pkg/crypto` + `v1/pkg/knownhosts` importable
-#### Day 6-7: Host Form + CRUD UI
+- [x] `store/` package — JSON file persistence for hosts, snippets, keys, settings (stored at `~/Library/Application Support/hostkeeper/v2/`)
-- [ ] HostForm screen — add mode + edit mode
+- [x] Model SSH fields (Hostname, Port, Username, AuthType, Password, KeyID, Group, Tags, Notes)
-- [ ] Basic info fields — name, hostname, port, username
+- [x] Handlers updated to use persistent store instead of in-memory mock data
-- [ ] Auth section — type selector (password/key/agent)
+- [x] `sshconn/` package — real SSH client via `golang.org/x/crypto/ssh`
-- [ ] Password field — show/hide toggle, strength indicator
+- [x] Terminal WebSocket — real SSH connection (falls back to mock)
-- [ ] Key picker — dropdown from stored keys
+- [x] Dynamic host list in terminal page (server-rendered via JSON script tag)
-- [ ] TagsInput — type + Enter to add, backspace to remove, autocomplete
+- [x] All mock defaults removed from model packages (Host, Snippet, Key no longer have `defaultXxx()`)
-- [ ] GroupPicker — tree picker component
+- [x] Settings persist via JSON file
-- [ ] 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
 
 ---
 
@@ -288,6 +142,14 @@ Lihat [ARCHITECTURE_HTMX.md](ARCHITECTURE_HTMX.md) untuk detail.
 | 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)` |
 
 ---
 
@@ -295,24 +157,27 @@ Lihat [ARCHITECTURE_HTMX.md](ARCHITECTURE_HTMX.md) untuk detail.
 
 ### For a new AI agent:
 
-1. **Read this file** (`docs/PROGRESS.md`) — find the first `[ ]` item
+All Sprint 0—6 tasks for HTMX are **complete**. The V2 backend is fully functional with:
-2. **Read the relevant spec doc** — for the current task:
+- GoFiber v2 server on `:1947`
-   - REST API endpoints -> `docs/API.md`
+- HTMX + Alpine.js for interactivity
-   - UI components -> `docs/UI_COMPONENTS.md`
+- JSON file persistence in `~/Library/Application Support/hostkeeper/v2/`
-   - Data models -> `docs/DATA_MODELS.md`
+- Real SSH terminal (with mock fallback)
-   - Visual reference -> `docs/UI_TERMIUS_REFERENCE.md`
+- All CRUD operations for hosts, snippets, keychain, settings
-   - Performance notes -> `docs/PERFORMANCE.md`
+
-   - Build pipeline -> `docs/BUILD_SYSTEM.md`
+Future work areas (beyond Sprint 6):
-3. **Read `docs/ARCHITECTURE.md`** — understand the system
+- **Real SFTP**: Connect SFTP dual-pane to real SSH via `github.com/pkg/sftp`
-4. **Implement** in `app/backend/` (Go) or `app/frontend/` (React)
+- **Mobile wrapper**: `gomobile` + WebView
-5. **Test** — run `go test ./app/backend/...` and `npm test` in `app/frontend/`
+- **Electron wrapper**: Wrap in Electron for standalone desktop app
-6. **Update this file** — mark `[x]` the completed task, update "Last Session Notes"
+- **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` for recent commits
+2. **Check git log** — `git log --oneline -10`
-3. **Find the first `[ ]`** — that's where you continue
+3. **All Sprint items are `[x]`** — pick from "Future work areas" above
 4. **Update this file** when done
 
 ---
@@ -322,14 +187,17 @@ Lihat [ARCHITECTURE_HTMX.md](ARCHITECTURE_HTMX.md) untuk detail.
 | Document | When to read |
 |----------|-------------|
 | `docs/PROGRESS.md` | Always (first) — know where to continue |
-| `docs/ARCHITECTURE.md` | Understanding the system |
+| `AGENTS.md` (root) | Architecture, paths, important rules |
-| `docs/API.md` | Implementing REST endpoints or WebSocket handlers |
+| `docs/ARCHITECTURE_HTMX.md` | System design, component flow |
-| `docs/DATA_MODELS.md` | Creating/modifying Go structs or JSON schemas |
+| `docs/ARCHITECTURE.md` | Summary + pointer to HTMX doc |
-| `docs/UI_COMPONENTS.md` | Building React components |
-| `docs/UI_TERMIUS_REFERENCE.md` | Designing UI layout, colors, typography |
 | `docs/SPRINT_PLAN.md` | Detailed file-by-file task instructions |
-| `docs/BUILD_SYSTEM.md` | Setting up build pipeline |
+| `docs/API.md` | REST + WebSocket endpoint specs |
-| `docs/PERFORMANCE.md` | Tuning for speed and stability |
+| `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) |
 
 ---
 
@@ -337,7 +205,9 @@ Lihat [ARCHITECTURE_HTMX.md](ARCHITECTURE_HTMX.md) untuk detail.
 
 | Commit | Description |
 |--------|-------------|
-| (V2 commits will be listed here) | — |
+| `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 |
 
 ---