prompt untuk membuat Visual Ops Dashboard untuk Hermes Agent

prompt untuk membuat Visual Ops Dashboard untuk Hermes Agent.txt

# PROMPT: Bangun Visual Ops Dashboard untuk Hermes Agent

> Paste prompt ini ke agent Hermes mana pun. Agent akan membangun dashboard
> monitoring visual real-time untuk dirinya sendiri, menyesuaikan data &
> konteks yang ia kelola.

---

## PROMPT

Bangun **Visual Ops Dashboard** — dashboard monitoring real-time bergaya
"ops floor" (isometrik + avatar bergerak + live feed) untuk memantau
aktivitas kamu sendiri dan sistem yang kamu kelola. Buat di server ini,
akses HANYA via Tailscale.

### ATURAN KERJA

1. **Verifikasi dulu, baru coding** — sebelum menulis kode, periksa live:
   path state.db kamu, skema tabel (messages, sessions, cron executions),
   port yang bebas, IP Tailscale host. Jangan asumsi.
2. **Read-only mutlak** — semua akses database pakai URI `file:...?mode=ro`.
   Dashboard tidak boleh bisa mengubah data apa pun.
3. **Test di browser** sebelum dinyatakan selesai (screenshot + cek console
   error + verifikasi data live muncul).

### ARSITEKTUR (terbukti stabil, ikuti)

- **Backend**: FastAPI + uvicorn (pakai interpreter venv Hermes yang sudah
  ada — JANGAN pip install versi lama ke venv itu, bisa merusak agent live).
- **SSE broadcaster tunggal**: satu task background bangun snapshot tiap 5
  detik via `asyncio.to_thread()` (non-blocking), fan-out ke semua klien
  lewat `asyncio.Queue` per subscriber.
- **Bind TAILSCALE-ONLY**: `host="<IP-Tailscale-host-ini>"`, port bebas
  (cek `ss -tlnp`). BUKAN 0.0.0.0 — dashboard tidak boleh reachable dari
  internet. Verifikasi: curl dari IP publik harus timeout.
- **Systemd service**: ExecStart absolute path interpreter + hardening:
  `NoNewPrivileges`, `ProtectSystem=strict`, `MemoryMax=300M`,
  `RestrictAddressFamilies=AF_INET AF_INET6 AF_UNIX`.

### DATA (sesuaikan dengan yang tersedia di host-mu)

Dari state.db Hermes (read-only), kumpulkan per snapshot:
- **Status agent**: pesan terbaru → status `thinking` / `tool_use` / `idle`
  (aktif = aktivitas < 15 menit).
- **Task saat ini**: `sessions.title` (judul sesi, bukan isi pesan).
- **Feed aktivitas 24 jam**: role + tool_name + cuplikan teks (bersihkan
  prefix XML/wrapper tool supaya human-readable; skip pesan kosong —
  intermediate streaming messages memang kosong isinya).
- **Produktivitas 24 jam**: dari tabel sessions — jumlah sesi, message_count,
  tool_call_count, tokens, estimated_cost_usd, model.
- **Cron jobs**: eksekusi terbaru + job yang sedang running, petakan job_id
  ke nama manusiawi dari jobs.json. Kelompokkan per job (bukan per eksekusi).

Query penting (pelajaran mahal — jangan ulangi kesalahan):
- `ORDER BY timestamp DESC` (BUKAN id — id tidak selalu urut waktu).
- `COALESCE(display_name, title)` untuk nama sesi.
- `compacted` BUKAN indikator task selesai — pakai inactivity + end_reason.
- Timestamp messages = unix epoch; cron finished_at = ISO string —
  normalisasi ke epoch.

Dari sistem/API yang kamu pantau (opsional, sesuai peranmu):
- Kesehatan host: CPU/RAM/disk via /proc (tanpa dependensi).
- Metrik eksternal yang relevan dengan tugasmu (uptime, alert, dsb.).

### TAMPILAN (frontend vanilla JS + SVG — tanpa framework)

Dark theme ops-floor (navy gelap + aksen per entitas), layout:
`[header KPI] [scene isometrik besar] [sidebar panel]`.

1. **Header KPI**: metrik kunci + alarm merah untuk kegagalan (contoh:
   cron fail berdenyut) + indikator LIVE/RECONNECTING jujur
   (EventSource.onerror → badge reconnecting, jangan biarkan LIVE palsu).
2. **Scene isometrik**: grid halus, landmark infrastruktur (heksagon),
   zona lantai (ellipse glow putus-putus).
3. **Avatar humanoid per agent/entitas**: kepala+rambut+mata (blink),
   badan berbaju warna khas, lengan & kaki berayun saat berjalan
   (walk cycle), name tag. Perilaku: aktif = berjalan cepat ke zona kerja
   sesuai tool yang dipakai; idle = pelan pulang ke titik awal. Trail dots
   memudar saat jalan. Glow lantai = indikator status.
4. **Floating card per agent** (di atas scene): nama, peran, **task saat
   ini**, stat produktivitas (msg/tool/tokens/cost/model), status dot,
   spark dots riwayat aktivitas, chip tool live. Agent idle >24 jam =
   border merah + label STALE.
5. **Klik agent** → tracker timeline bawah: fase kerja
   (Plan → Execute → Wrap-up → Idle) dengan titik aktif beranimasi,
   + chip tool + baris task.
6. **Sidebar**: roster agent | panel ancaman/masalah relevan peran-mu |
   cron jobs (status + fail counter 7 hari) | **LIVE ACTIVITY feed** —
   tiap baris: waktu, agent, ikon tool, nama tool + cuplikan isi aktivitas.
7. **Keyed diffing** feed: hanya item BARU beranimasi (track id unik);
   update elemen scene in-place — JANGAN rebuild innerHTML tiap tick
   (flicker).
8. **Error terlihat**: collector error → badge merah. NOL data karena
   error ≠ keadaan tenang.
9. Search filter + mobile layout (@media max-width 900px) + viewport meta.

### PRIVASI

Cuplikan isi pesan = opt-in via env var (default metadata-only:
agent/tool/waktu saja). Aktifkan hanya jika lingkungan aksesnya
terbatas-amannya.

### DELIVERABLE

1. Kode terstruktur: `server.py`, `collectors/`, `static/` di satu folder.
2. Systemd unit + auto-start.
3. Verifikasi end-to-end: health OK, snapshot berisi data nyata, SSE tick,
   bind Tailscale-only (curl publik timeout), avatar bergerak, feed
   terisi, tanpa console error.
4. Laporan singkat: URL akses, cara rollback (disable service + rm folder).

---

## CARA PAKAI

1. Paste seluruh bagian PROMPT di atas ke agent Hermes target.
2. Opsional: tambahkan 1-2 kalimat konteks peran agent itu (mis. "kamu
   memantau X, tambahkan panel Y").
3. Agent akan menyesuaikan data source, tema warna, dan landmark scene
   dengan domainnya sendiri.
4. Review hasilnya via browser (butuh koneksi Tailscale ke host agent).

## KUSTOMISASI CEPAT (tambahkan kalimat ini jika perlu)

- "Tema warna: [warna utama] + [aksen]"
- "Tambahkan panel: [metrik spesifik tugasmu]"
- "Port: [nomor]"
- "Jangan tampilkan cuplikan isi pesan sama sekali"