S5: detail app dan server (banner, bar aksi, zona bahaya, segmented)

[coderbuzz]

Ringkasan

S5: halaman detail app dan server (DESIGN-SYSTEM §5, §5.1, §6; K9).

• Kepala: breadcrumb 12.8, judul 22/800 + badge, meta; banner status ui_alert (.alert-ok|warn|danger|neutral).
• Bar aksi .action-bar tepat di bawah banner (HP grid 2 kolom, primary penuh lebar; desktop flex). App: Edit (running) / Start (stopped) / Deploy (draft) primary, Stop secondary, Console ghost. Server: Edit primary, Console ghost. Tanpa aksi berbahaya di bar.
• Zona bahaya = kartu terakhir (.danger-zone, baris dz-row): App: Redeploy, Rollback, Clear deployment history, Undeploy/Delete draft. Server: Init worker (hanya bila belum online; online = status tercapai "Worker initialized"), Prune disk, Remove server. ui_confirm lama dipakai ulang.
• ui_segmented (rentang statistik, Tail 50/200/500; aria-pressed disinkron di app.js), gauge div.bar dengan --w (satu-satunya inline), badge Live .badge ok.
• Details/Connection/Resources → dl.detail-grid; Compose dan worker command → pre.code (+ tombol Copy data-copy, ikon copy); env, deployment history, apps di server → .rows (+ rows-kv|dep|apps).
• Hanya th rata kiri (angka rata kanan ≥700px) di semua .rows (catatan S4).
• Alias lapis 1 dihapus seluruhnya: pemakaian dipetakan ke token lapis 2 (sisa hanya --term-*).

Bukti

• build/vet/test hijau; grep 'style="' di 5 template: hanya --w (5, di gauge).
• Tanpa overflow 360/390: apps/1, apps/2 (draft), servers/1; satu .btn-primary aktif per halaman.
• Playwright: klik "1h" memindah aria-pressed (realtime:false, 1h:true) dan memicu GET apps/1/stats?range=1h; #app-stats-body[data-range]=1h; pageerror 0.
• Node DOM apps/1 (390): sebelum 263, sesudah 268.

Penyimpangan

1. Baris "Init worker" selalu tampil di zona bahaya (label "Re-run init" saat online), karena "online" tidak berarti worker sudah di-init; klaim "Worker initialized" dihapus (keputusan leader pada review).
2. "Clear history" pindah dari header kartu Deployment History ke zona bahaya.
3. Primary: Edit untuk semua status kecuali draft (Deploy; Edit secondary) dan stopped (Start; Edit secondary); Stop hanya saat running. Status tak dikenal/failed → banner danger dengan log deployment terbaru (maks 3 baris; log penuh di Deployment History, kini boleh membungkus).
4. Banner draft menyebut server bila sudah ada; banner online menyembunyikan "Updated" saat ResourcesUpdatedAt nol.
5. .seg-btn memakai min-height 44px di <700px + fokus 3px accent; CSS .chart-range-btns/btn-active dihapus.
6. Copy: clipboard.writeText dengan fallback execCommand('copy') (HTTP biasa), umpan balik "Copied"/"Copy failed" 1,5 dtk.
7. Detail-grid 1 kolom <700px (diterima); tombol Undeploy/Delete per baris di kartu Apps server tetap ada (ada konfirmasi).
8. Warna grafik token (chart, brand2, danger); gauge server-side memberi bar-warn/bar-danger dan clamp100.
9. Pemetaan alias: --text-muted→ink2, --text-dim→muted, --red→danger (kontras teks status ditinjau di S7).
10. Konsol memakai atribut hidden; ui_alert dan ui_segmented dibuat di PR ini.

🤖 Generated with Claude Code