</> โหมด IDE สำหรับนักพัฒนา

โหมด IDE ให้ความสามารถระดับ Visual Studio Code ในเบราว์เซอร์ — เหมาะสำหรับผู้ที่อยากแก้โค้ดเอง ติดตั้ง package ใหม่ หรือ debug แบบ low-level

URL: https://app.hostinglotus.cloud/projects/<slug>/code

เปิดโหมด IDE

ที่ด้านบนของหน้าโครงการ คลิก </> IDE ใน segmented pill [ Basic | </> IDE]

Layout

แบ่งเป็น 4 panel:

┌──────────┬──────────────────┬──────────────┐
│ Files    │  Code Editor     │  Preview     │
│ (≈220px) │  (Monaco)        │  (right)     │
│          │                  │              │
│          ├──────────────────┤              │
│          │  Terminal        │              │
│          │  (collapse-able) │              │
└──────────┴──────────────────┴──────────────┘
                                ↑ AI Chat (toggleable)

File Explorer

ด้านซ้าย — แสดงไฟล์ใน /workspace:

คลิกไฟล์ → เปิดใน Monaco editor
คลิกขวา → เมนู: New file, New folder, Rename, Delete, Copy, Paste
Refresh — โหลดรายชื่อไฟล์ใหม่ (กรณี terminal เพิ่งสร้างไฟล์)

ไฟล์/โฟลเดอร์ที่ซ่อน

node_modules/, .git/, dist/, .cache/ — ซ่อนเริ่มต้น
คลิก Show hidden เพื่อแสดง

Code Editor (Monaco)

editor เดียวกับที่ใช้ใน VS Code — รองรับ:

Syntax highlighting สำหรับ TS/JS/JSX/TSX, CSS, HTML, Vue, Svelte, JSON, Markdown ฯลฯ
IntelliSense — autocomplete + จับ syntax error
Multi-tab — เปิดหลายไฟล์พร้อมกัน

Keyboard Shortcuts

ปุ่ม	ทำงาน
Ctrl/Cmd + S	Save ไฟล์ปัจจุบัน
Ctrl/Cmd + K, S	Save ทุกไฟล์ที่ dirty
Ctrl/Cmd + W	ปิด tab
Ctrl/Cmd + F	Find in file
Ctrl/Cmd + Shift + F	Find in all files

Save = HMR

หลัง Ctrl+S → ระบบเขียนไฟล์ลง sandbox ผ่าน WebSocket → Vite ตรวจเจอ → HMR refresh พรีวิวทันที (ไม่ต้องรีโหลดทั้งหน้า)

Module ไม่พบ?

Monaco อยู่ในเบราว์เซอร์ — มันอ่าน node_modules ของ sandbox ไม่ได้. ดังนั้นจะมี red squiggle ใต้ทุก import statement.

เราปิด diagnostics เหล่านี้ไว้ให้แล้ว (codes 2307/2792/7016/...) — คุณเห็น syntax error ในไฟล์ตัวเอง แต่ไม่เห็น "Cannot find module" สำหรับ external imports

Terminal

panel ด้านล่าง editor — full-featured bash terminal ใน sandbox container:

# ติดตั้ง package
$ pnpm add -D tailwindcss

# Run script
$ pnpm dev

# Git
$ git status
$ git commit -m "..."

# Python
$ python3 myscript.py

# Sudo (ติดตั้ง system package)
$ sudo apt-get install postgresql

Sandbox Specs

OS: Debian slim
Node: v20 (with pnpm)
Python: 3.x
Disk: persistent volume /workspace + /home/lotus
CPU: 1 core
Memory: 1 GB
Network: outbound only

บริการเสริม (services)

ถ้าคุณติดตั้ง DB หรือ worker เพิ่ม (เช่น postgresql, redis-server), เก็บ data ใน /workspace/.services/<name>/ เพื่อให้ persist ข้าม container restart

เพื่อให้บริการ start อัตโนมัติเมื่อ sandbox boot ใหม่ เพิ่มคำสั่งใน /workspace/.lotus/startup.sh:

#!/bin/bash
# /workspace/.lotus/startup.sh
service postgresql start
nohup my-worker > /tmp/worker.log 2>&1 &

AI Chat (in IDE)

โหมด IDE ก็มีแชทกับ AI — คลิกปุ่ม AI Chat ที่ด้านบน

Plan Mode

โหมดเฉพาะของ IDE chat — ก่อน AI แก้จริง จะแสดง แผน ให้คุณยืนยันก่อน:

คลิก Plan pill (สีเหลือง)
ส่งคำสั่ง — AI จะตอบเป็น markdown plan ไม่แก้ไฟล์จริง
ถ้าพอใจ → ปิด Plan mode → ส่งคำสั่งซ้ำ → AI ลงมือแก้ตามแผน

Stop / Queue

Stop — หยุด AI กลางทาง
Queue — ส่งคำสั่งใหม่ขณะ AI ยังทำงานอยู่ → เข้าคิวต่อ ไม่ถูก reject

Preview Panel

คลิก Preview ที่ขวาบนของ IDE → แสดง iframe ของเว็บ
URL bar ใช้พิมพ์ URL อะไรก็ได้ (ทดสอบเปิด API endpoint, เปิด admin panel ของ DB ฯลฯ)
Device toggle เหมือนโหมด Basic (Fit / Desktop / Tablet / Mobile + Rotate)

Sandbox Isolation

แต่ละโครงการมี container แยกชื่อ lotus-sbx-<projectId> — โครงการ A ไม่สามารถอ่าน/เขียนไฟล์ของโครงการ B ได้

คำสั่ง sudo ปลอดภัย — sandbox cap ที่ Linux container level. คำสั่งใน terminal ทำงานในนาม user lotus (มี sudo) แต่ไม่สามารถออกจาก container หรือกระทบ host ได้