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