elemes/docs/08-playground-interactive.md

08. Playground Interaktif

Route /playground menyediakan lingkungan coding interaktif untuk mencoba kode langsung di browser.

Fitur Utama

• Multi-tab — tab Velxio (Arduino simulator), Flowchart, Circuit, dan Code
• Run Session PTY — klik "Run" → sesi worker (POST /compile/sessions) → prompt muncul → input dikirim ke sesi (PTY write_input + \n)
• stdinQueue — enqueue/consume/clear atomik untuk Python input() dan C scanf()
• FileTree collapsible — tree file per bahasa (C/Python), .h valid di C
• Auto-save — kode otomatis disimpan saat edit

Alur Interaktif

1. Buka /playground
2. Pilih tab (Velxio / Flowchart / Circuit / Code)
3. Tulis kode di editor
4. Klik "Run" → sesi worker dimulai
5. Prompt input muncul (untuk Python input() / C scanf())
6. Kirim input → sesi PTY write_input
7. Output muncul di Console
8. FileTree collapsible untuk navigasi file

Endpoint

Endpoint	Fungsi
POST /compile/sessions	Buat sesi worker baru
POST /compile/sessions/{id}/prompt	Kirim prompt ke sesi
POST /compile/sessions/{id}/input	Kirim input ke sesi PTY
GET /compile/sessions/{id}/status	Cek status run
GET /compile/sessions/{id}/output	Baca output (cursor-based)

Store State

Key	Fungsi
runStatus	Status sesi (idle/running/done/error)
runSessionId	ID sesi worker
outputCursor	Cursor untuk baca output incrementally

FileTree

• Collapsible tree untuk navigasi file
• Filter per bahasa: C dan Python dipisah
• .h file valid di C
• Mendukung file .c, .h, .py

Verifikasi

• pytest services/tests -q — test sesi interaktif + parser konten rekursif + e2e smoke check
• npm run build — sukses tanpa error