# 🔍 Hostkeeper V2 — UI/UX Audit & Perbaikan Checklist

> **Acuan perbaikan UI** — Bandingkan HTMX implementation dengan React template di `template/src/components/`
> **Target**: Menyamakan visual dengan Lumina Design System hingga level piksel
> **Last Updated**: 2026-07-07

---

## 🎨 Design System Reference

| Token | Value | Status |
|-------|-------|--------|
| Primary | `#0050cb` | ✅ OK |
| Secondary | `#006e2f` | ✅ OK |
| Tertiary | `#7e23cc` | ✅ OK |
| Surface | `#f7f9fb` | ✅ OK |
| On Surface | `#191c1e` | ✅ OK |
| On Surface Variant | `#424656` | ✅ OK |
| Outline | `#727686` | ✅ OK |
| Outline Variant | `#c2c6d8` | ✅ OK |
| Error | `#b3261e` | ✅ OK |
| Surface Container Low | `#f0f2f5` | ✅ OK |
| Surface Container | `#eaecf0` | ✅ OK |
| Font Sans | Inter (300–900) | ✅ OK |
| Font Mono | JetBrains Mono (300–700) | ✅ OK |
| Dot Grid | `radial-gradient(#e2e8f0 1.5px, transparent 1.5px) 16px` | ✅ OK |
| Sidebar Width | `260px` | ✅ OK |

---

## 🔴 P0 — DASHBOARD (index.html + host_list.html + host_modal.html)

### ~~Task #1: Banner Stats~~ ✅ Selesai

### ~~Task #2: Status Filter~~ ✅ Selesai

### ~~Task #3: Search Bar~~ ✅ Selesai

### ~~Task #4: View Toggle~~ ✅ Selesai

### ~~Task #5: Section Title~~ ✅ Selesai

### ~~Task #6: Host Card Grid~~ ✅ Selesai

### ~~Task #7: Add Host Card~~ ✅ Selesai

### ~~Task #8: Host Card List~~ ✅ Selesai

---

### Task #9: Transfer Panel

**Referensi**: `template/src/components/DashboardView.tsx:306-356`

Template punya section "Background Transfers" dengan:
- Line separator + judul
- Table header: Source & File | Destination | Progress
- Tiap row: icon (download=tertiary/upload=primary), nama file, source, destination panah, progress bar (h-1.5, bg-secondary, shadow), percentage + speed

HTMX: Hanya "No active transfers" di sidebar ❌

**Files**: `app/backend/views/index.html` + `app/backend/views/host_list.html`

---

### ~~Task #10: Add Host Modal~~ ✅ Selesai

---

## 🔴 P0 — TERMINAL (terminal.html + terminal.js)

### Task #11: Ubah theme dari dark ke light (Lumina)

**Referensi**: `template/src/components/TerminalView.tsx:208-284`

| Detail | Template (wajib) | HTMX Saat Ini |
|--------|----------|---------------|
| Background terminal | `bg-white` | `bg-[#0d1117]` ❌ |
| Tab bar | `bg-surface-container-low` | `bg-[#161b22]` ❌ |
| Tab border | `border-b border-outline-variant/30` | `border-[#30363d]` ❌ |
| Tab active | `bg-white text-primary border-primary shadow` | `bg-[#0d1117] text-white border-t-2 border-[#58a6ff]` ❌ |
| Tab inactive | `bg-surface-container-low text-on-surface-variant` | `bg-[#161b22] text-[#8b949e]` ❌ |
| Tab close | `hover:bg-black/10 rounded` | `hover:bg-[#30363d]` ❌ |
| New tab button | `bg-surface-container hover:bg-primary-container hover:text-on-primary-container` | styling dark ❌ |
| Terminal header | `bg-surface-container-low border-b border-outline-variant/30` | tidak ada |

**Files**: `app/backend/views/terminal.html`

---

### Task #12: Traffic Light Dots

**Referensi**: `template/src/components/TerminalView.tsx:212-216`

Tambah 3 dot (red `#b3261e`, yellow `#d6e3ff` / kuning, green `#006e2f`) di kiri terminal header.

**Files**: `app/backend/views/terminal.html`

---

### Task #13: SSH Connection String

**Referensi**: `template/src/components/TerminalView.tsx:216`

Tampilkan teks: `ssh -i id_ed25519 root@{host.ip}` dengan `text-[10px] font-mono font-bold text-outline`

**Files**: `app/backend/views/terminal.html`

---

### Task #14: "Clear Buffer" Button

**Referensi**: `template/src/components/TerminalView.tsx:219-232`

Button `text-[10px] uppercase font-bold text-outline hover:text-primary` dengan `RefreshCw` icon.

**Files**: `app/backend/views/terminal.html`

---

### Task #15: Terminal Output Styles

**Referensi**: `template/src/components/TerminalView.tsx:241-255`

| Type | Template | HTMX |
|------|----------|------|
| input | `text-on-surface font-bold` | (xterm.js) |
| error | `text-error bg-error-container/20 px-2.5 py-1 rounded-md` | (xterm.js) |
| success | `text-[#006e2f] bg-secondary-container/10 px-2.5 py-1 rounded-md font-semibold` | (xterm.js) |
| output | `text-[#2244aa]` | (xterm.js) |

Ini perlu disesuaikan di terminal.js / xterm theme.

**Files**: `app/backend/static/js/terminal.js`, `app/backend/views/terminal.html`

---

### Task #16: Input Prompt Bar

**Referensi**: `template/src/components/TerminalView.tsx:259-283`

| Detail | Template | HTMX |
|--------|----------|------|
| Background | `bg-surface-container-low` | dark ❌ |
| Prompt | `root@{host}:~$` dengan icon `CornerDownLeft` | (di mock WebSocket) |
| Input | `bg-transparent font-mono text-xs focus:ring-0` | (xterm.js) |
| Execute button | `bg-primary text-white rounded-lg hover:bg-primary-container` | tidak ada |

**Files**: `app/backend/views/terminal.html`

---

### Task #17: Shortcut Pills

**Referensi**: `template/src/components/TerminalView.tsx:287-301`

Tambah rail shortcut di bawah terminal: help, ls, docker ps, uname -a, ping 8.8.8.8, cat server.js, keychain, clear.

| Detail | Template |
|--------|----------|
| Container | `flex flex-wrap gap-2 text-[11px] font-mono font-bold text-on-surface-variant` |
| Label | "SHORTCUT SUGGESTIONS:" |
| Pill | `px-2.5 py-1 rounded-md bg-surface-container border border-outline-variant/30 hover:border-primary hover:bg-primary-container/10` |

**Files**: `app/backend/views/terminal.html`

---

### Task #18: Status Info (Security + Host IP)

**Referensi**: `template/src/components/TerminalView.tsx:197-205`

| Detail | Template |
|--------|----------|
| Kiri | "SECURE CRYPTO PATH" dengan green dot + animate-pulse |
| Kanan | "HOST: {host.ip}" |

**Files**: `app/backend/views/terminal.html`

---

### Task #19: Sync Mock Commands dengan Template

**Referensi**: `template/src/components/TerminalView.tsx:61-129`

Template punya command list: help, ls, docker ps, uname -a, ping 8.8.8.8, cat server.js, keychain, clear.

HTMX di Go handler punya: clear, exit, pwd, whoami, hostname, date, uptime, uname, ls, cd, cat, echo, ssh, help.

Output di tiap command juga harus disamakan dengan template (docker ps output, ls output, dll).

**Files**: `app/backend/internal/handler/terminal.go`

---

## 🔴 P0 — SNIPPETS (snippets.html + snippet_grid.html) ✅

### ~~Task #20: Layout — Ubah ke 12-col grid (sidebar + content)~~ ✅ Selesai

### ~~Task #21: Sidebar — Collections~~ ✅ Selesai

### ~~Task #22: Sidebar — Tag Categories~~ ✅ Selesai

### ~~Task #23: Snippet Card — Stacked Layout~~ ✅ Selesai

### ~~Task #24: Headers & Searching~~ ✅ Selesai

### ~~Task #25: Add Snippet Modal (style)~~ ✅ Selesai

### ~~Task #26: Data Model — Tambah field Snippet~~ ✅ Selesai

---

## 🟡 P1 — KEYCHAIN (keychain.html + key_grid.html) ✅

### ~~Task #27: Layout — 2 col~~ ✅ Selesai

### ~~Task #28: Key Card — Style Upgrade~~ ✅ Selesai

### ~~Task #29: Add Key Modal (style)~~ ✅ Selesai

### ~~Task #30: Security Advisory~~ ✅ Selesai

---

## 🟡 P1 — SFTP (sftp.html + sftp_pane.html) ✅

### ~~Task #31: Header — Tambah subtitle~~ ✅ Selesai

### ~~Task #32: File Pane — Table Structure~~ ✅ Selesai
### ~~Task #33: Drop Zone — Style~~ ✅ Selesai

### ~~Task #34: Toast Notification~~ ✅ Selesai

---

## 🟡 P1 — SETTINGS (settings.html) ✅

### ~~Task #35: Layout — 2-column grid~~ ✅ Selesai

### ~~Task #36: Profile — Editable Form~~ ✅ Selesai

### ~~Task #37: Toggles — iOS-Style~~ ✅ Selesai

### ~~Task #38: Billing Card (Kanan)~~ ✅ Selesai

### ~~Task #39: Danger Zone — Style~~ ✅ Selesai

---

## 🟡 P1 — BRIEF (brief.html)

### Task #40: Ubah jadi Overlay Panel ✅

**Referensi**: `template/src/components/BriefOverlay.tsx`

Styling updated — color palette visual, typography samples, elevation examples, keyboard shortcuts. Halaman stilistik mirror template content.

**Files**: `app/backend/views/brief.html`

---

## 🟡 GLOBAL ISSUES ✅

### Task #41: SVG Icons — Stroke-width

Periksa semua SVG inline, pastikan:
- Icon kecil (w-3.5, w-4): `stroke-width="1.5"`
- Icon besar (w-5, w-6, w-8+): `stroke-width="2"`

**Files**: Semua view files

---

### Task #42: Border Radius — `rounded-2xl`

Ubah dari `rounded-xl` ke `rounded-2xl` di:
- Host cards (host_list.html)
- Snippet cards (snippet_grid.html)
- Key cards (key_grid.html)
- Settings cards (settings.html)
- Modal containers (host_modal.html, snippets.html, keychain.html)

---

### Task #43: Shadows

| Element | Target |
|---------|--------|
| Host card | `shadow-sm` normal, `shadow-lg` hover |
| Snippet card | `shadow-sm` |
| Key card | `shadow-sm` normal, `shadow-lg` hover |
| Modal | `shadow-2xl` |
| Settings card | `shadow-sm` |

---

### Task #44: Text Styles

| Element | Target |
|---------|--------|
| Page title | `text-xl font-bold tracking-tight` |
| Subtitle | `text-xs text-on-surface-variant mt-0.5` |
| Card title | `font-bold text-base` |
| Label form | `text-xs font-bold text-on-surface-variant uppercase tracking-wider` |

---

### Task #45: Search Input — `rounded-full`

Semua search input: `rounded-full` bukan `rounded-lg`.

**Files**: index.html, snippets.html, keychain.html, sftp.html

---

### Task #46: Nav — Icons

Periksa semua icon di nav (nav.html) apakah SVG sesuai dengan lucide equivalents:
- server → ok
- terminal → `TerminalSquare`
- folder-sync → `ArrowLeftRight`
- code2 → `Code`
- key-round → `Key`
- settings2 → `Settings`

**Files**: `app/backend/views/nav.html`

---

## 🗺️ Execution Order

```
1. Dashboard (P0)      → index.html, host_list.html, host_modal.html
2. Terminal (P0)       → terminal.html, terminal.js
3. Snippets (P0)       → snippets.html, snippet_grid.html, model/handler
4. Keychain (P1)       → keychain.html, key_grid.html
5. SFTP (P1)           → sftp.html, sftp_pane.html
6. Settings (P1)       → settings.html
7. Brief (P1)          → brief.html, nav.html
8. Global (P1)         → semua files
```

> **⚠️ Checklist selesai**: Setiap task di atas harus dihapus dari file ini setelah selesai dikerjakan.