jade-server

byDedi Hutapea

Kamu berjalan di server mana

No preview

Comments (0)

No comments yet. Be the first!

System Requirements

System Requirements Document for jade-server

1. Introduction

jade-server adalah aplikasi Android berbentuk browser yang dapat dikendalikan oleh agent CLI yang dijalankan dari Termux maupun terminal lokal pada perangkat Android yang sama. Produk ini ditujukan untuk pengguna Android tingkat lanjut (power user) yang ingin membuka sesi browsing di perangkatnya, lalu mengendalikan sesi tersebut secara programatik dari shell lokal: agent dapat melihat tampilan halaman, melakukan klik pada elemen, mengisi input, dan melakukan tindakan lain pada halaman yang sedang dibuka.

Bahasa antarmuka produk adalah Bahasa Indonesia. Pengendalian agent berasal dari agent CLI lokal (Termux / terminal lokal), bukan dari server jarak jauh. Produk tidak menyediakan backend cloud, tidak menyediakan akun pengguna, dan tidak menyediakan pengendalian dari jarak jauh di luar perangkat.

Audiens utama:

  • Pengguna Android (pemilik perangkat) — menjalankan aplikasi browser di perangkat Android dan memiliki sesi browsing yang dikendalikan.
  • Operator agent CLI (Termux / terminal lokal) — menjalankan agent CLI dari Termux atau terminal lokal untuk mengendalikan browser dan mengamati hasilnya.
Page 1 of 31

2. System Overview

jade-server adalah satu aplikasi Android (APK) yang berisi tiga permukaan kerja yang saling terhubung:

  1. Landing — entry anonim yang menjelaskan browser Android lokal, pengguna sasarannya, dan cara kendali agent CLI dari Termux atau terminal lokal sebelum sesi dijalankan.
  2. Browser — ruang kerja browser untuk membuka dan menutup sesi, menampilkan halaman, menerima klik, input, dan tindakan lain dari agent, serta mengembalikan perubahan tampilan.
  3. Agent Connection — destinasi untuk menghubungkan agent CLI lokal dari Termux atau terminal lokal ke sesi browser aktif pada perangkat Android yang sama.

Aktor manusia yang diterima (katalog tertutup):

  • Pengguna Android (pemilik perangkat)
  • Operator agent CLI (Termux / terminal lokal)

Aktor non-persona:

  • Agent CLI lokal — proses yang dijalankan operator dari Termux atau terminal lokal; mengirim perintah observasi dan tindakan ke sesi browser.
  • Socket lokal pada perangkat — kanal komunikasi antara agent CLI dan sesi browser pada perangkat yang sama.
  • Halaman web yang dibuka — konten pihak ketiga yang ditampilkan di dalam sesi browser; bukan milik produk.
Page 2 of 31

2a. Product Interpretation and Delivery Boundary

Kepemilikan delivery. Produk dikirim sebagai aplikasi Android (APK) yang terpasang dan berjalan pada perangkat Android. Tidak ada server jarak jauh yang mengendalikan browser: seluruh pengendalian berasal dari agent CLI yang dijalankan di Termux atau terminal lokal pada perangkat yang sama. Karena itu, kanal komunikasi yang dipakai adalah kanal lokal pada perangkat (socket lokal), bukan endpoint publik.

Kepemilikan akses. Ketiga permukaan (Landing, Browser, Agent Connection) adalah permukaan milik aplikasi dengan access_requirement: none. Tidak ada identitas milik aplikasi, tidak ada login, tidak ada akun, dan tidak ada sesi terautentikasi. Kontinuitas yang dibutuhkan produk adalah kontinuitas sesi browser (sesi browsing aktif yang bisa dibuka, dihubungkan, dan diakhiri), bukan kontinuitas identitas pengguna. Karena itu tidak ada destinasi pra-identitas terpisah dan tidak ada pengelolaan akun.

Batas saat ini (current). Semua perilaku yang dijelaskan pada dokumen ini adalah perilaku saat ini: pembuatan APK Android, sesi browser yang dapat dibuka/ditutup, observasi tampilan oleh agent, klik oleh agent, input oleh agent, tindakan lain pada halaman oleh agent, dan pengendalian dari Termux serta terminal lokal.

Batas masa depan (future). Tidak ada kebutuhan masa depan yang dinyatakan secara eksplisit dalam sumber otoritatif. Tidak ada fitur future yang dijanjikan pada dokumen ini.

Pengecualian sempit. Produk tidak menyediakan pengendalian dari server jarak jauh, tidak menyediakan akun atau login, dan tidak menyediakan pengelolaan perangkat jarak jauh. Halaman web yang dibuka tetap milik pihak ketiga dan bukan tanggung jawab produk.

2c. Page Content and Component Coverage

Page 3 of 31

Landing

Page 4 of 31
  • Informasi/state: penjelasan singkat bahwa ini adalah browser Android lokal yang dapat dikendalikan agent CLI dari Termux atau terminal lokal; penjelasan pengguna sasaran (pemilik perangkat Android dan operator agent CLI); status sesi saat ini (belum ada sesi / ada sesi aktif) sebagai kartu status sesi dengan pasangan label/nilai.
  • Aksi utama: membuka Browser untuk memulai sesi browsing; menuju Agent Connection untuk menghubungkan agent CLI.
  • Aksi pendukung: menyalin baris perintah contoh jade connect --port 7799 dari kotak perintah monospace.
  • Entitas domain: sesi browser (belum aktif/aktif), port socket lokal, perangkat.
  • Tanggung jawab komponen:
    • Judul hero flush-left dua baris ("Browser Android" / "yang dikendalikan agent") dengan blok aksen jade setinggi satu baris di belakang kata kunci.
    • Kotak perintah monospace berisi jade connect --port 7799 dengan kursor blok berkedip dan kontrol salin.
    • Kartu status sesi dengan garis rambut berisi tiga baris label/nilai (Perangkat, Sesi, Socket) dan satu titik status berdenyut.
    • Garis vertikal tipis 1px sebagai pembagi grid latar.
  • State:
    • Loading: kartu status sesi menampilkan nilai "memeriksa…" pada baris Sesi dan Socket.
    • Empty: belum ada sesi aktif — kartu status menampilkan "Belum ada sesi" dan titik status tidak berdenyut.
    • Success: sesi aktif terdeteksi — kartu status menampilkan nama perangkat, status sesi aktif, dan port socket; titik status berdenyut.
    • Error: status sesi tidak dapat dibaca — kartu status menampilkan pesan kegagalan dan kontrol "Coba lagi".
    • Recovery: pengguna dapat membuka Browser untuk membuat sesi baru, lalu kembali ke Agent Connection.
Page 5 of 31

Browser

  • Informasi/state: URL sesi aktif; penghitung tindakan agent (tabular numerals); titik koneksi berdenyut; kanvas halaman yang sedang dibuka; panel tindakan agent berisi log tindakan bernomor monospace.
  • Aksi utama: membuka sesi browsing; menutup sesi browsing; menavigasi ke URL; menerima dan mengeksekusi klik dari agent; menerima dan mengeksekusi input dari agent; menerima dan mengeksekusi tindakan lain dari agent.
  • Aksi pendukung: menggulir kanvas halaman; membuka panel tindakan agent sebagai sheet dari bawah pada mobile; menyalin URL sesi.
  • Entitas domain: sesi browser, halaman web yang dibuka, elemen halaman (target klik/input), tindakan agent (jenis, target, urutan, timestamp), viewport.
  • Tanggung jawab komponen:
    • Bilah status sesi persisten 40px dengan garis rambut bawah: URL sesi, penghitung tindakan agent, titik koneksi berdenyut.
    • Bilah alamat di zona atas.
    • Kanvas halaman di zona tengah.
    • Panel tindakan agent di zona kanan (desktop) atau sheet dari bawah (mobile), menampilkan setiap klik/input sebagai baris bernomor monospace (contoh format: 012 · click · #submit), baris terbaru masuk lewat fade 8px tanpa menggeser tata letak.
    • Kontrol buka sesi dan tutup sesi.
  • State:
    • Loading: kanvas menampilkan indikator pemuatan halaman; bilah status menampilkan URL yang sedang dimuat.
    • Empty: belum ada sesi — kanvas menampilkan ajakan membuka sesi; panel tindakan agent kosong dengan pesan "Belum ada tindakan".
    • Success: halaman tampil; tindakan agent tercatat di panel dan perubahan tampilan terlihat di kanvas; penghitung tindakan bertambah.
Page 6 of 31
  • Error: halaman gagal dimuat, atau tindakan agent gagal (target tidak ditemukan / tidak dapat dieksekusi) — baris log menandai kegagalan dan kanvas mempertahankan tampilan terakhir yang berhasil.
  • Recovery: pengguna dapat memuat ulang halaman, menavigasi ke URL lain, atau membuka sesi baru; agent dapat mengirim ulang tindakan setelah target tersedia.
Page 7 of 31

Agent Connection

  • Informasi/state: status koneksi agent CLI (terhubung / menunggu / gagal); port socket lokal yang dipakai; perintah CLI yang harus dijalankan; sesi browser aktif yang menjadi target.
  • Aksi utama: menghubungkan agent CLI lokal dari Termux atau terminal lokal ke sesi browser aktif pada perangkat yang sama; memutuskan koneksi agent.
  • Aksi pendukung: menyalin perintah jade connect --port 7799; menampilkan port yang sedang aktif.
  • Entitas domain: koneksi agent, port socket lokal, sesi browser aktif, perintah CLI.
  • Tanggung jawab komponen:
    • Kartu pasangan label/nilai untuk Port dan Sesi target.
    • Kotak perintah monospace berisi perintah koneksi dengan kontrol salin dan kursor blok berkedip.
    • Indikator status koneksi: titik jade berdenyut saat terhubung, titik tangerine saat menunggu, titik merah saat gagal.
    • Kontrol putuskan koneksi.
  • State:
    • Loading: status menampilkan "menunggu koneksi agent…" dengan titik tangerine.
    • Empty: belum ada sesi browser aktif — halaman mengarahkan pengguna membuka Browser terlebih dahulu.
    • Success: agent CLI terhubung — status "terhubung", titik jade berdenyut, port dan sesi target ditampilkan.
    • Error: koneksi gagal (port tidak tersedia atau agent tidak dapat menjangkau socket) — status "gagal" dengan titik merah dan pesan penyebab.
    • Recovery: pengguna dapat mengganti port, memastikan sesi browser aktif, lalu mencoba menghubungkan kembali.
Page 8 of 31

3. Functional Requirements

FR-01 — Aplikasi Android berupa browser yang dapat dikendalikan agent CLI (explicit) As a Pengguna Android (pemilik perangkat), I should dapat memasang dan menjalankan aplikasi Android berbentuk browser pada perangkat saya, sehingga browser tersebut dapat dikendalikan oleh agent CLI yang dijalankan dari Termux dan terminal lokal.

  • Trigger/input: pengguna memasang dan menjalankan APK pada perangkat Android.
  • Hasil yang dapat diamati: aplikasi berjalan sebagai browser pada perangkat dan siap menerima kendali agent CLI.
  • Access state: none (tanpa identitas aplikasi).
  • Kegagalan/recovery: jika aplikasi tidak dapat dijalankan, pengguna dapat memasang ulang APK.
  • Continuation: pengguna membuka sesi browsing di Browser.
Page 9 of 31

FR-02 — Agent dapat melihat tampilan/halaman browser (observasi visual) (explicit) As an Operator agent CLI (Termux / terminal lokal), I should dapat mengirim perintah observasi dari agent CLI sehingga agent dapat melihat tampilan/halaman browser yang sedang dibuka.

  • Trigger/input: perintah observasi dikirim dari agent CLI melalui koneksi lokal ke sesi browser aktif.
  • Hasil yang dapat diamati: agent menerima representasi tampilan/halaman yang sedang dibuka.
  • Access state: none; prasyarat: sesi browsing aktif dan agent CLI terhubung.
  • Kegagalan/recovery: jika sesi belum aktif atau koneksi belum terbentuk, agent menerima kegagalan dan operator menghubungkan agent terlebih dahulu di Agent Connection.
  • Continuation: operator dapat melanjutkan dengan mengirim tindakan klik atau input.

FR-03 — Agent dapat melakukan klik pada elemen halaman (explicit) As an Operator agent CLI (Termux / terminal lokal), I should dapat mengirim perintah klik pada elemen halaman sehingga halaman merespons klik tersebut.

  • Trigger/input: perintah klik dengan target elemen dikirim dari agent CLI.
  • Hasil yang dapat diamati: halaman merespons klik dan perubahan tampilan terlihat pada sesi browser; tindakan tercatat pada panel tindakan agent.
  • Access state: none; prasyarat: sesi browsing aktif dan agent CLI terhubung.
  • Kegagalan/recovery: jika target tidak ditemukan atau tidak dapat diklik, agent menerima kegagalan dan dapat mengirim ulang klik setelah halaman diperbarui.
  • Continuation: operator dapat mengamati hasil melalui observasi (FR-02) atau melanjutkan tindakan lain.
Page 10 of 31

FR-04 — Agent dapat mengisi/memasukkan input pada halaman (explicit) As an Operator agent CLI (Termux / terminal lokal), I should dapat mengirim perintah input pada halaman sehingga nilai yang dikirim terisi pada elemen input.

  • Trigger/input: perintah input dengan target elemen dan nilai dikirim dari agent CLI.
  • Hasil yang dapat diamati: nilai terisi pada elemen input halaman dan terlihat pada sesi browser; tindakan tercatat pada panel tindakan agent.
  • Access state: none; prasyarat: sesi browsing aktif dan agent CLI terhubung.
  • Kegagalan/recovery: jika elemen input tidak ditemukan atau tidak dapat menerima nilai, agent menerima kegagalan dan dapat mengirim ulang setelah halaman diperbarui.
  • Continuation: operator dapat melanjutkan dengan klik (FR-03) atau tindakan lain (FR-05).
Page 11 of 31

FR-05 — Agent dapat melakukan tindakan lain pada halaman browser selain klik dan input (explicit) As an Operator agent CLI (Termux / terminal lokal), I should dapat mengirim tindakan lain pada halaman browser selain klik dan input, sehingga agent dapat mengendalikan halaman secara lebih lengkap.

  • Trigger/input: perintah tindakan selain klik dan input dikirim dari agent CLI.
  • Hasil yang dapat diamati: halaman merespons tindakan tersebut dan perubahan tampilan terlihat pada sesi browser; tindakan tercatat pada panel tindakan agent.
  • Access state: none; prasyarat: sesi browsing aktif dan agent CLI terhubung.
  • Kegagalan/recovery: jika tindakan tidak dapat dieksekusi pada halaman saat ini, agent menerima kegagalan dan dapat mengirim ulang tindakan yang sesuai.
  • Continuation: operator dapat melanjutkan dengan observasi (FR-02) atau tindakan berikutnya.
Page 12 of 31

FR-06 — Pengendalian dilakukan dari Termux dan terminal lokal pada perangkat Android (explicit) As an Operator agent CLI (Termux / terminal lokal), I should dapat menjalankan agent CLI dari Termux dan terminal lokal pada perangkat Android yang sama, sehingga pengendalian browser terjadi secara lokal tanpa server jarak jauh.

  • Trigger/input: operator menjalankan agent CLI dari Termux atau terminal lokal.
  • Hasil yang dapat diamati: perintah agent mencapai sesi browser pada perangkat yang sama dan hasilnya kembali ke terminal.
  • Access state: none.
  • Kegagalan/recovery: jika perintah tidak mencapai sesi, operator memeriksa koneksi di Agent Connection dan mencoba kembali.
  • Continuation: operator melanjutkan sesi kendali dari terminal.

FR-07 — Aplikasi Android terpasang dan berjalan pada perangkat (required_inference) As a Pengguna Android (pemilik perangkat), I should memiliki aplikasi jade-server terpasang dan berjalan pada perangkat Android, sehingga sesi browsing dapat dibuka dan dikendalikan.

  • Trigger/input: pemasangan APK dan peluncuran aplikasi.
  • Hasil yang dapat diamati: aplikasi aktif pada perangkat dan dapat membuka sesi browsing.
  • Access state: none.
  • Kegagalan/recovery: jika aplikasi berhenti, pengguna dapat menjalankannya kembali.
  • Continuation: pengguna membuka sesi di Browser.
Page 13 of 31

FR-08 — Termux atau terminal lokal tersedia pada perangkat yang sama (required_inference) As an Operator agent CLI (Termux / terminal lokal), I should memiliki Termux atau terminal lokal yang tersedia pada perangkat Android yang sama dengan aplikasi browser, sehingga agent CLI dapat dijalankan dan dihubungkan ke sesi browser.

  • Trigger/input: operator membuka Termux atau terminal lokal pada perangkat.
  • Hasil yang dapat diamati: shell tersedia dan dapat menjalankan perintah agent CLI.
  • Access state: none.
  • Kegagalan/recovery: jika shell tidak tersedia, operator memasang Termux atau menggunakan terminal lokal yang ada.
  • Continuation: operator menghubungkan agent ke sesi browser.

FR-09 — Browser memiliki sesi browsing aktif sebelum agent mengirimkan perintah (required_inference) As a Pengguna Android (pemilik perangkat), I should dapat membuka sesi browsing aktif di Browser, sehingga agent memiliki target untuk diobservasi dan dikendalikan.

  • Trigger/input: pengguna membuka sesi browsing dan menavigasi ke halaman.
  • Hasil yang dapat diamati: sesi aktif dengan halaman yang tampil, URL sesi terlihat pada bilah status sesi.
  • Access state: none.
  • Kegagalan/recovery: jika sesi gagal dibuka, pengguna dapat mencoba membuka sesi kembali.
  • Continuation: pengguna menghubungkan agent di Agent Connection.
Page 14 of 31

FR-10 — Agent CLI terhubung ke sesi browser aktif sebelum observasi atau tindakan dilakukan (required_inference) As an Operator agent CLI (Termux / terminal lokal), I should dapat menghubungkan agent CLI ke sesi browser aktif pada perangkat yang sama, sehingga observasi dan tindakan dapat dilakukan.

  • Trigger/input: operator menjalankan perintah koneksi dari Termux atau terminal lokal dan memilih sesi target.
  • Hasil yang dapat diamati: status koneksi "terhubung" pada Agent Connection dan titik koneksi berdenyut pada bilah status sesi Browser.
  • Access state: none.
  • Kegagalan/recovery: jika koneksi gagal, operator memeriksa port dan memastikan sesi browser aktif, lalu mencoba kembali.
  • Continuation: operator mengirim observasi (FR-02) atau tindakan (FR-03, FR-04, FR-05).

FR-11 — Menutup sesi browsing (required_inference) As a Pengguna Android (pemilik perangkat), I should dapat menutup sesi browsing yang sedang berjalan, sehingga sesi dan koneksi agent yang terkait berakhir dengan jelas.

  • Trigger/input: pengguna memilih kontrol tutup sesi pada Browser.
  • Hasil yang dapat diamati: sesi berakhir, kanvas kembali ke keadaan tanpa sesi, dan koneksi agent tidak lagi aktif.
  • Access state: none.
  • Kegagalan/recovery: jika sesi tidak dapat ditutup, pengguna dapat mencoba kembali.
  • Continuation: pengguna dapat membuka sesi baru atau kembali ke Landing.
Page 15 of 31

FR-12 — Memutuskan koneksi agent (required_inference) As an Operator agent CLI (Termux / terminal lokal), I should dapat memutuskan koneksi agent dari sesi browser, sehingga kendali agent berhenti tanpa harus menutup sesi browsing.

  • Trigger/input: operator memilih kontrol putuskan koneksi pada Agent Connection.
  • Hasil yang dapat diamati: status koneksi kembali ke "menunggu" dan titik koneksi pada bilah status sesi tidak lagi berdenyut.
  • Access state: none.
  • Kegagalan/recovery: jika pemutusan gagal, operator dapat mencoba kembali.
  • Continuation: operator dapat menghubungkan kembali agent ke sesi yang sama.

4. User Personas

Page 16 of 31

Pengguna Android (pemilik perangkat)

  • Konteks produk: bekerja langsung di perangkat Android miliknya. Ia memasang jade-server sebagai APK, membuka sesi browsing, dan menyerahkan kendali sesi itu kepada agent CLI yang ia jalankan sendiri dari shell lokal. Ia adalah pemilik sesi browsing dan pemilik keputusan kapan sesi dibuka dan kapan diakhiri.
  • Tujuan utama: browser di perangkatnya dapat dipakai dan dikendalikan dari Termux atau terminal lokal pada perangkat yang sama, dengan sesi yang bisa dibuka dan diakhiri dengan jelas.
  • Tanggung jawab yang diterima: memasang dan menjalankan aplikasi (FR-07); membuka sesi browsing aktif sebelum agent mengirim perintah (FR-09); menutup sesi browsing (FR-11); memantau bilah status sesi dan panel tindakan agent untuk melihat apa yang dilakukan agent pada halamannya.
  • Input/keputusan: URL yang dibuka, waktu membuka sesi, waktu menutup sesi, dan keputusan untuk mengakhiri kendali agent dengan menutup sesi.
  • Interaksi dengan peserta lain: menjadi pihak yang menyediakan sesi target bagi Operator agent CLI; melihat hasil tindakan agent pada kanvas halaman dan pada panel tindakan agent.
  • Keberhasilan yang dapat diamati: sesi browsing aktif dengan halaman yang tampil, tindakan agent terlihat tercatat dan berdampak pada halaman, dan sesi dapat diakhiri tanpa sisa koneksi.
Page 17 of 31

Operator agent CLI (Termux / terminal lokal)

  • Konteks produk: bekerja dari shell — Termux atau terminal lokal — pada perangkat Android yang sama dengan aplikasi browser. Ia tidak mengendalikan browser lewat sentuhan layar, melainkan lewat perintah yang dikirim ke sesi browser aktif melalui kanal lokal.
  • Tujuan utama: agent dapat mengendalikan browser secara langsung dan mengamati hasilnya.
  • Tanggung jawab yang diterima: menjalankan agent CLI dari Termux atau terminal lokal (FR-06); menghubungkan agent CLI ke sesi browser aktif (FR-10); mengirim observasi tampilan/halaman (FR-02); mengirim klik pada elemen (FR-03); mengirim input pada halaman (FR-04); mengirim tindakan lain selain klik dan input (FR-05); memutuskan koneksi agent (FR-12).
  • Input/keputusan: perintah CLI, port socket lokal, target elemen untuk klik/input, nilai input, dan keputusan kapan memutuskan koneksi.
  • Interaksi dengan peserta lain: bergantung pada Pengguna Android (pemilik perangkat) yang telah membuka sesi browsing aktif; mengamati hasil tindakannya melalui observasi dan melalui status koneksi.
  • Keberhasilan yang dapat diamati: status "terhubung" pada Agent Connection, observasi yang mengembalikan tampilan halaman, dan tindakan yang tercatat serta berdampak pada halaman yang sedang dibuka.

5. Core User Flows

Page 18 of 31

Alur A — Pengguna Android memasang, membuka sesi, dan mengakhiri sesi browsing

  1. Konteks awal: Pengguna Android (pemilik perangkat) memiliki perangkat Android dengan Termux atau terminal lokal tersedia (FR-08).
  2. Pengguna memasang APK jade-server dan menjalankannya; aplikasi berjalan sebagai browser pada perangkat (FR-01, FR-07).
  3. Pengguna membuka Landing; ia membaca penjelasan bahwa ini adalah browser Android lokal yang dapat dikendalikan agent CLI dari Termux atau terminal lokal, dan melihat kartu status sesi yang menampilkan "Belum ada sesi".
  4. Pengguna memilih aksi utama untuk membuka Browser.
  5. Di Browser, pengguna membuka sesi browsing dan menavigasi ke halaman yang dituju; bilah status sesi menampilkan URL sesi dan kanvas menampilkan halaman (FR-09).
  6. Hasil yang dapat diamati: sesi browsing aktif dengan halaman yang tampil.
  7. Langkah berikutnya: pengguna berpindah ke Agent Connection untuk menghubungkan agent CLI (Alur B), atau menyerahkan perangkat kepada operator.
  8. Setelah pekerjaan agent selesai, pengguna kembali ke Browser dan memilih kontrol tutup sesi; sesi berakhir, kanvas kembali ke keadaan tanpa sesi, dan koneksi agent tidak lagi aktif (FR-11).
  9. Kegagalan/recovery: jika sesi gagal dibuka, pengguna mencoba membuka sesi kembali; jika sesi tidak dapat ditutup, pengguna mencoba kembali.
  10. Kelanjutan: pengguna dapat membuka sesi baru atau kembali ke Landing.
Page 19 of 31

Alur B — Operator agent CLI menghubungkan agent ke sesi browser aktif

  1. Konteks awal: sesi browsing aktif sudah dibuka oleh Pengguna Android pada perangkat yang sama (FR-09), dan Termux atau terminal lokal tersedia (FR-08).
  2. Operator membuka Agent Connection dan melihat kartu pasangan label/nilai untuk Port dan Sesi target, serta kotak perintah monospace berisi jade connect --port 7799.
  3. Operator menyalin perintah tersebut dan menjalankannya dari Termux atau terminal lokal pada perangkat yang sama (FR-06).
  4. Hasil yang dapat diamati: status koneksi berubah menjadi "terhubung" dengan titik jade berdenyut; titik koneksi pada bilah status sesi Browser juga berdenyut (FR-10).
  5. Kegagalan/recovery: jika status tetap "menunggu koneksi agent…" atau berubah menjadi "gagal" dengan titik merah, operator memeriksa port yang aktif, memastikan sesi browser masih aktif, lalu mencoba menghubungkan kembali.
  6. Kelanjutan: operator melanjutkan ke Alur C.
Page 20 of 31

Alur C — Operator agent CLI mengamati halaman dan melakukan tindakan

  1. Konteks awal: agent CLI sudah terhubung ke sesi browser aktif (FR-10).
  2. Operator mengirim perintah observasi dari agent CLI; agent menerima representasi tampilan/halaman yang sedang dibuka (FR-02).
  3. Operator mengirim perintah klik dengan target elemen; halaman merespons klik, perubahan tampilan terlihat pada kanvas Browser, dan tindakan tercatat sebagai baris bernomor monospace pada panel tindakan agent (FR-03).
  4. Operator mengirim perintah input dengan target elemen dan nilai; nilai terisi pada elemen input halaman dan tercatat pada panel tindakan agent (FR-04).
  5. Operator mengirim tindakan lain selain klik dan input; halaman merespons dan tindakan tercatat pada panel tindakan agent (FR-05).
  6. Hasil yang dapat diamati: setiap tindakan menambah penghitung tindakan agent pada bilah status sesi dan muncul sebagai baris log baru yang masuk lewat fade 8px tanpa menggeser tata letak.
  7. Kegagalan/recovery: jika target tidak ditemukan atau tindakan tidak dapat dieksekusi, agent menerima kegagalan; operator mengirim ulang observasi (langkah 2) untuk memperbarui pemahaman halaman, lalu mengirim ulang tindakan.
  8. Kelanjutan: operator mengulang langkah 2–5 sampai tujuan tercapai, lalu melanjutkan ke Alur D.
Page 21 of 31

Alur D — Operator agent CLI memutuskan koneksi agent

  1. Konteks awal: agent CLI sedang terhubung ke sesi browser aktif.
  2. Operator memilih kontrol putuskan koneksi pada Agent Connection (FR-12).
  3. Hasil yang dapat diamati: status koneksi kembali ke "menunggu" dan titik koneksi pada bilah status sesi Browser tidak lagi berdenyut.
  4. Kegagalan/recovery: jika pemutusan gagal, operator mencoba kembali.
  5. Kelanjutan: operator dapat menghubungkan kembali agent ke sesi yang sama (Alur B) atau menyerahkan sesi kepada Pengguna Android untuk diakhiri (Alur A langkah 8).
Page 22 of 31

6. Visuals Colors and Theme

Arah kreatif bersifat otoritatif untuk bagian ini. Muse: Rasmus Andersson — systematic product craft with an opinion. Headline arah: Sistem presisi untuk browser yang dikendalikan mesin.

Mode: dark mode saja.

Palet (peran → nilai):

  • Background / ground grafit hangat: #141517 (dominan ±70% permukaan)
  • Surface / panel kartu dan bilah sisi: #1C1E21
  • Garis rambut (pemisah, bukan bayangan): #2A2D31
  • Teks utama (off-white hangat, kontras > 12:1): #EDEAE4
  • Primary (teks tombol utama, teks di atas aksen): #F2F0EB
  • Accent jade (hemat: satu tombol utama, indikator status "terhubung", kursor terminal, garis bawah tab aktif): #3DD68C
  • Sekunder panas tangerine (hanya status "menunggu" atau peringatan): #FF7A45
  • Muted (label mikro, timestamp, metadata): #8A8F98
  • Status gagal/kritis: #EF4444

Tidak ada biru-indigo di mana pun. Aksen jade tidak pernah dipakai sebagai latar blok besar.

Page 23 of 31

Tipografi:

  • Headings: Space Grotesk 500/600, tracking rapat -0.02em; beberapa headline memakai huruf kapital penuh dengan letterspacing 0.08em sebagai label sistem; angka pada judul memakai tabular numerals.
  • Body: Inter Tight.
  • Data/log/perintah: JetBrains Mono.
  • Skala 1.25 modular dengan lompatan display: mobile 40/28/20/16/14/12; desktop 96/56/32/18/15/13; display hero clamp(40px, 8vw, 96px).
  • Font Inter, Roboto, Arial, Helvetica, Open Sans, Lato, Poppins, dan system-ui tidak dipakai untuk heading maupun body.

Bahasa bentuk: sudut tajam hingga radius maksimum 6px; garis rambut 1px #2A2D31 sebagai pemisah; kontrol persegi panjang padat dengan pola label di atas nilai; tanpa bayangan lembut — kedalaman dibuat lewat lapisan warna dan garis, bukan blur.

Ritme spasi: grid 4/8pt; 12 kolom di desktop, 4 kolom di mobile.

Gaya imagery: antarmuka itu sendiri sebagai gambar — diagram skematik alur perintah (terminal → socket lokal → sesi browser → halaman), tangkapan layar viewport yang sedang dikendalikan, potongan kode perintah CLI. Ornamen visual adalah angka: penghitung tindakan, indeks langkah, port, dan timestamp dalam monospace. Tidak ada foto stok, ilustrasi karakter, maskot, blob gradien, glassmorphism, blur, atau panel transparan.

Aturan keterbacaan: headline, wordmark, label, angka, teks kartu, dan kontrol tetap utuh di dalam viewport dan kontainernya pada 375px, 768px, dan 1280px — membungkus atau menskalakan (mis. font-size: clamp(...)) agar muat; tidak ada elemen lain yang menutupi bagian mana pun darinya. Gambar, dekorasi, dan gerakan boleh terpotong atau melewati tepi sesuai arah kreatif selama tidak menutupi teks atau kontrol yang dapat dibaca.

Page 24 of 31

7. Signature Design Concept

Papan instrumen asimetris pada Landing. Hero bukan headline tengah dengan subteks dan tombol biru, melainkan komposisi instrumen:

  • Latar #141517 dengan garis vertikal tipis 1px #2A2D31 yang membagi grid, terlihat seperti kertas grafik teknis. Tanpa gradien, tanpa blob.
  • Di kolom 1–7, judul Space Grotesk clamp(40px, 8vw, 96px) flush-left memenuhi tujuh kolom dalam dua baris — "Browser Android" di atas "yang dikendalikan agent" — dengan kata agent diberi blok aksen jade #3DD68C setinggi satu baris di belakangnya; teks tetap terbaca di atas blok tersebut dengan kontras yang dijaga.
  • Di bawah judul, satu baris perintah monospace di dalam kotak grafit berteks jade: $ jade connect --port 7799, dengan kursor blok berkedip dan kontrol salin. Baris perintah ini adalah ajakan utama, bukan tombol "Get Started".
  • Di kolom 9–12, kartu status sesi setinggi 320px dengan garis rambut, berisi tiga baris label/nilai (Perangkat, Sesi, Socket) dan satu titik status berdenyut. Label memakai huruf kapital kecil dengan letterspacing 0.08em; nilai memakai Space Grotesk dengan angka tabular.

Konsep ini hanya menyusun ulang konten, state, dan kontrol yang sudah diterima (penjelasan produk, status sesi, perintah koneksi, navigasi ke Browser dan Agent Connection) — tidak menambah perilaku, halaman, atau destinasi baru.

Page 25 of 31

8. Interaction Model & Motion Direction

Interaction Model: Static Motion Tempo: restrained Hero Dimensionality: flat

Landing Hero Motion Brief

  • Focal subject: papan instrumen asimetris — judul dua baris flush-left dengan blok jade di belakang kata "agent", kotak perintah monospace $ jade connect --port 7799, dan kartu status sesi dengan titik status berdenyut.
  • Input → transformation → outcome: pengguna membuka Landing (input) → kartu status sesi membaca keadaan sesi pada perangkat dan berubah dari "Belum ada sesi" menjadi status sesi aktif dengan port socket (transformation) → pengguna melihat apakah sudah ada sesi yang bisa dihubungkan dan memilih membuka Browser atau menuju Agent Connection (outcome). Tidak ada perilaku baru; hanya keadaan sesi yang sudah diterima.
  • Motion vocabulary: transisi 120–200ms dengan easing cubic-bezier(0.2, 0, 0, 1); tanpa dekorasi. Satu-satunya gerakan berulang adalah denyut titik status koneksi (opasitas 1 → 0.35, 1.6s) dan kursor blok di kotak perintah/log yang berkedip setiap 1s. Reveal-on-scroll hanya berupa fade 8px naik pada kartu, sekali saja.
  • Composed first frame: latar #141517 dengan garis grid vertikal 1px; judul dua baris flush-left dengan blok jade di belakang kata "agent"; kotak perintah monospace di bawah judul dengan kursor blok diam pada posisi awal; kartu status sesi di kanan dengan tiga baris label/nilai dan titik status pada opasitas penuh.
  • Reduced-motion state: denyut titik status dan kursor blok berhenti pada opasitas tetap (titik pada opasitas 1, kursor terlihat statis); reveal-on-scroll tidak dijalankan dan semua kartu tampil pada posisi akhirnya; tata letak, keterbacaan, dan seluruh kontrol tetap utuh dan dapat digunakan.
Page 26 of 31

9. Non-Functional Requirements

  • NFR-01 — Bentuk delivery APK (explicit): aplikasi harus dikirim sebagai aplikasi Android (APK) yang dapat dipasang dan dijalankan pada perangkat Android. Rasional: constraint eksplisit dari sumber otoritatif.
  • NFR-02 — Pengendalian lokal, bukan server jarak jauh (explicit): pengendalian agent harus berasal dari agent CLI yang dijalankan di Termux dan terminal lokal pada perangkat yang sama, bukan dari server jarak jauh. Rasional: constraint eksplisit dari sumber otoritatif.
  • NFR-03 — Kanal komunikasi lokal pada perangkat (required_inference): karena pengendalian bersifat lokal pada perangkat yang sama, komunikasi antara agent CLI dan sesi browser menggunakan kanal lokal pada perangkat (socket lokal) dengan port yang dapat ditampilkan dan disalin. Rasional: diperlukan agar FR-06 dan FR-10 dapat dieksekusi tanpa menambahkan endpoint publik.
  • NFR-04 — Bahasa antarmuka Indonesia (explicit): seluruh teks antarmuka produk menggunakan Bahasa Indonesia. Rasional: instruksi eksplisit pengguna.
  • NFR-05 — Keterbacaan lintas viewport (explicit, dari arah kreatif): headline, label, angka, teks kartu, dan kontrol tetap utuh di dalam viewport dan kontainernya pada 375px, 768px, dan 1280px. Rasional: aturan arah kreatif yang mengikat.
  • NFR-06 — Aksesibilitas gerakan (explicit, dari arah kreatif): saat prefers-reduced-motion aktif, tersedia susunan statis yang tetap dapat digunakan; denyut dan kursor berhenti pada keadaan tetap. Rasional: aturan arah kreatif yang mengikat.
  • NFR-07 — Tanpa identitas aplikasi (required_inference): karena tidak ada kebutuhan kontinuitas identitas pengguna dan tidak ada state privat yang harus dimiliki per aktor, produk tidak menyediakan login, akun, atau pengelolaan akun. Rasional: kontinuitas yang dibutuhkan adalah kontinuitas sesi browser, bukan identitas.
Page 27 of 31

10. Tech Stack

  • Aplikasi Android (APK) — bentuk delivery yang diminta secara eksplisit; berisi permukaan Landing, Browser, dan Agent Connection.
  • WebView / komponen browser Android — untuk menampilkan halaman web di dalam sesi browser dan menerima tindakan agent (klik, input, tindakan lain).
  • Socket lokal pada perangkat — kanal komunikasi antara agent CLI dan sesi browser pada perangkat yang sama; port dapat dikonfigurasi dan ditampilkan (contoh: 7799).
  • Agent CLI lokal — dijalankan dari Termux atau terminal lokal; mengirim perintah observasi dan tindakan ke sesi browser.
  • Font: Space Grotesk (headings), Inter Tight (body), JetBrains Mono (data/log/perintah) — sesuai arah kreatif.

Tidak ada backend cloud, tidak ada server jarak jauh, dan tidak ada layanan pihak ketiga yang menjadi bagian dari pengendalian.

Page 28 of 31

11. Assumptions and Constraints

Constraints (mengikat):

  • Aplikasi harus berupa aplikasi Android (APK). (explicit)
  • Pengendalian agent berasal dari agent CLI yang dijalankan di Termux dan terminal lokal, bukan dari server jarak jauh. (explicit)
  • Antarmuka menggunakan Bahasa Indonesia. (explicit)
  • Tidak ada biru-indigo pada ground putih; palet, font, dan bahasa bentuk mengikuti arah kreatif. (explicit, arah kreatif)

Assumptions (sempit dan berlabel):

  • A-01 (required_inference): Aplikasi Android terpasang dan berjalan pada perangkat sebelum sesi dapat dibuka.
  • A-02 (required_inference): Termux atau terminal lokal tersedia pada perangkat Android yang sama dengan aplikasi browser.
  • A-03 (required_inference): Sesi browsing aktif sudah dibuka sebelum agent mengirimkan perintah.
  • A-04 (required_inference): Agent CLI terhubung ke sesi browser aktif sebelum observasi atau tindakan dilakukan.
  • A-05 (required_inference): Komunikasi agent CLI dan sesi browser terjadi melalui kanal lokal pada perangkat yang sama; port socket dapat ditampilkan dan disalin.
  • A-06 (required_inference): Tidak ada identitas aplikasi, login, atau akun; kontinuitas yang dijaga adalah kontinuitas sesi browser.
  • A-07 (default — tidak ditentukan pengguna): Nilai port contoh yang ditampilkan pada perintah koneksi adalah 7799; port aktual dapat berbeda dan ditampilkan pada Agent Connection.
  • A-08 (default — tidak ditentukan pengguna): Halaman web yang dibuka di dalam sesi adalah konten pihak ketiga dan bukan tanggung jawab produk.
Page 29 of 31

Batas masa depan: tidak ada kebutuhan masa depan yang dinyatakan secara eksplisit dalam sumber otoritatif; tidak ada fitur future yang dijanjikan pada dokumen ini.

12. Glossary

Page 30 of 31
  • jade-server — nama proyek; aplikasi Android berbentuk browser yang dapat dikendalikan agent CLI dari Termux atau terminal lokal.
  • APK — paket aplikasi Android yang dipasang dan dijalankan pada perangkat.
  • Agent CLI — program yang dijalankan operator dari Termux atau terminal lokal untuk mengirim perintah observasi dan tindakan ke sesi browser.
  • Termux — lingkungan terminal pada Android tempat agent CLI dapat dijalankan.
  • Terminal lokal — terminal pada perangkat Android yang sama, selain Termux, tempat agent CLI dapat dijalankan.
  • Sesi browser — sesi browsing aktif pada aplikasi yang menampilkan halaman dan menjadi target observasi serta tindakan agent; dapat dibuka dan ditutup.
  • Observasi — perintah agent untuk melihat tampilan/halaman browser yang sedang dibuka.
  • Klik — tindakan agent pada elemen halaman yang memicu respons halaman.
  • Input — tindakan agent yang mengisi nilai pada elemen input halaman.
  • Tindakan lain — tindakan agent pada halaman selain klik dan input.
  • Socket lokal — kanal komunikasi pada perangkat yang sama antara agent CLI dan sesi browser.
  • Port — nomor port socket lokal yang dipakai untuk menghubungkan agent CLI ke sesi browser.
  • Bilah status sesi — strip 40px persisten pada Browser berisi URL sesi, penghitung tindakan agent, dan titik koneksi berdenyut.
  • Panel tindakan agent — panel pada Browser yang menampilkan setiap klik/input sebagai baris bernomor monospace.
  • Koneksi agent — keadaan terhubung antara agent CLI dan sesi browser aktif; dapat dihubungkan dan diputuskan.
Page 31 of 31

No completed page designs yet.

Completed design pages will appear here when they are ready to preview.

Landing: Lihat status sesi
Landing: Salin perintah koneksi
Landing: Buka Agent Connection
Agent Connection: Lihat port dan sesi
Agent Connection: Salin perintah koneksi
Agent Connection: 1. Hubungkan agent CLI
Agent Connection: 2. Periksa port dan sesi
Browser: 3. Kirim observasi
Browser: 4. Kirim klik elemen
Browser: 5. Kirim input halaman
Browser: 6. Kirim tindakan lain
Browser: 7. Lihat log tindakan
Browser: 8. Kirim ulang tindakan
Agent Connection: 9. Putuskan koneksi
Agent Connection: 10. Hubungkan kembali agent

No completed page designs yet.

Completed design pages will appear here when they are ready to preview.

Landing: Lihat status sesi
Landing: Salin perintah koneksi
Landing: Buka Agent Connection
Agent Connection: Lihat port dan sesi
Agent Connection: Salin perintah koneksi
Agent Connection: 1. Hubungkan agent CLI
Agent Connection: 2. Periksa port dan sesi
Browser: 3. Kirim observasi
Browser: 4. Kirim klik elemen
Browser: 5. Kirim input halaman
Browser: 6. Kirim tindakan lain
Browser: 7. Lihat log tindakan
Browser: 8. Kirim ulang tindakan
Agent Connection: 9. Putuskan koneksi
Agent Connection: 10. Hubungkan kembali agent