PepsSpace
Ecosystem
Full technical reference untuk Pepo (AI Web Builder), PepsStudio OS (Internal Ops), dan roadmap jangka panjang.
00Gambaran Besar
Tiga entitas yang saling terhubung di bawah umbrella PepsSpace.
2 codebase terpisah, 2 deployment terpisah. Keduanya share Supabase account + Kenari API key.
| Proyek | URL | Fungsi | User |
|---|---|---|---|
| Pepo | dev.pepsspace.com | AI Web Builder publik | UMKM, freelancer, personal |
| PepsStudio OS | os.pepsspace.com | Internal operations | Admin, karyawan PepStudio |
| PepStudio | pepsspace.com | Business landing | Customer publik |
01Pepo — AI Web Builder
Platform yang memungkinkan user membangun website & aplikasi web hanya dengan mengobrol. Alternatif lokal Lovable.dev/Bolt.new dengan harga 10-15x lebih murah.
Informasi Proyek
| URL | dev.pepsspace.com |
| Folder | ~/dev.pepsspace.com |
| Repo Git | vickywa45/vibe-chat (origin) |
| Deploy | npx vercel --prod |
| Stack | Next.js 16 · React 19 · Tailwind v3 · Supabase · Kenari.id · Vercel |
Struktur Folder
Skema Supabase
Tabel profiles
id · balance · expires_at · total_used · total_topped_up
is_admin · is_pro_account · is_unlimited_deploy
deploy_count_today · deploy_reset_at
Tabel projects
id · user_id · name · files(jsonb) · messages(jsonb) · is_pro
custom_domain · deployed_url · deployed_at
vercel_project_id · vercel_url
user_domain · user_domain_verified · user_domain_dns
share_token · share_enabled · share_views · share_created_at
Tabel Lain
- transactions — transaksi credit (spend/add)
- top_up_requests — request top up manual (bank/QRIS)
- admin_notifications — notif admin (user baru / top up)
- ai_usage_logs — tracking cost per AI call
RPC Functions
spend_credits(amount, reason, metadata)— potong creditadd_credits(user_id, amount, reason, metadata)— admin onlyactivate_unlimited_deploy()— 250 cr, unlimited deploy
Pricing
Paket Top Up
| Paket | Credit | Harga | Rate |
|---|---|---|---|
| Coba Dulu | 30 | Rp 15.000 | Rp 500/cr |
| Starter | 100 | Rp 25.000 | Rp 250/cr |
| Pro | 500 | Rp 100.000 | Rp 200/cr |
| Bisnis | 1.500 | Rp 250.000 | Rp 167/cr |
Unlock
| Item | Credit | Fungsi |
|---|---|---|
| Pro Account | 400 cr | Unlock Code tab + custom domain |
| Pro Project | 50 cr / project | Per project unlock |
| Unlimited Deploy | 250 cr (sekali) | Semua project |
Charge per Action (Level-Based Multiplier)
| Action | Base | Auto/Std (1x) | Smart (4x) | Premium (10x) |
|---|---|---|---|---|
| Chat | 0.05 | 0.05 | 0.20 | 0.50 |
| Build HTML | 8 | 8 | 32 | 80 |
| Update HTML | 5 | 5 | 20 | 50 |
| Build TSX | 25 | 25 | 100 | 250 |
| Web Fetch | 2/URL | flat | flat | flat |
| Voice TTS | +5 | +5 | +5 | +5 |
Model AI (Kenari.id)
Quality Level
| Level | Model | Rate (Rp/1M) |
|---|---|---|
| Budget | deepseek-v4-1-flash | 20 / 50 |
| Vision | gemini-2-5-flash-lite | 400 / 1.700 |
| Standard | gpt-6-luna | 1.750 / 8.500 |
| Premium | claude-sonnet-5 | 25.000 / 125.000 |
| Ultra | claude-opus-5, gpt-6-sol | Admin only |
agnes (2-0, 2-5, 3-0) · glm-4-7-flash · hy3 · laguna-s/xs-2-1 · mimo-v2-5 · mimo-v2-6-flash · muse-spark-1-3-contributor · nemotron-3-super/ultra · north-mini-code · qwen3-8-27b · space-bunny-alpha · step-3-7-flash — semua dengan suffix :free
Route Flow
User Chat
User → CommandBar → Canvas.handleSubmit()
→ POST /api/chat
→ classifier (auto / standard / smart / premium)
→ resolveKenariModel
→ build prompt + workspace context
→ Kenari call (fallback Luna)
→ return actions + summary
→ applyActions() → workspace context update
→ save ke Supabase
User Deploy
User → Header "Deploy" → gate check
→ [belum Pro] UpsellDialog (deploy-options)
→ 50 cr (Project) / 250 cr (Unlimited)
→ activate + set is_pro
→ DeployDialog → POST /api/deploy
→ auto-inject package.json + next.config + tsconfig
→ Vercel API v13 deployments
→ poll sampai READY
→ add custom subdomain
→ Save deployed_url ke projects
User Preview (Next.js)
PreviewPane → NextJSPreview
→ detect Next.js
→ auto-deploy ke Vercel preview
→ poll ready → iframe render
→ cache 5 menit
User Top Up
User → TopUpDialog → submit form (bank/QRIS)
→ INSERT top_up_requests
→ trigger notify_admin_topup_request → INSERT admin_notifications
→ AdminNotifBell realtime (badge)
→ Admin approve → RPC add_credits
→ trigger realtime user side
02PepsStudio OS
Internal operations untuk bisnis foto/video — booking, absensi, keuangan, checklist item paket.
Informasi Proyek
| URL | os.pepsspace.com |
| Folder | ~/os.pepsspace.com |
| Deploy | npx vercel --prod |
| Stack | Next.js 14 · React · Tailwind · Supabase · Kenari · face-api.js · Web Push |
Struktur Folder
Skema Supabase
Tabel Utama
customers— id, name, phone, address, workspace_idbookings— customer_id, package_id, total_price, guest_count, booking_date, booking_time, address, notes, status, is_outdoor, assigned_employee_idpackages— name, description, price, duration, category, pricing_type, max_guests, extra_guest_price, default_is_outdooremployees— name, employee_id, role, photo_url, face_descriptoradmin_users— name, email, role, avatar_urlattendance— check_in/out, lat/lng, selfie_url, status, is_late, late_minutes, late_penalty, early_leave_penalty, overtime_bonus, work_type, booking_id, scheduled_start/endbusiness_schedule— day_of_week, is_working_day, open_time, close_timeholiday_settings— date, is_holiday, notefinance— amount, status, payment_method, notes, description, booking_date, type (income/expense), categoryinvoices— invoice_number, items, subtotal, total, status, issued_atimage_generations— user_id, user_type, prompt, image_url, model, datepush_subscriptions— user_id, endpoint, keys
Tabel Checklist Item Paket
package_items— template item per paket (id, package_id, name, sort_order)booking_items— checklist per booking (booking_id, name, status, done_by, done_at, deadline)
Setiap booking baru dibuat → trigger on_booking_created_populate_items auto-copy item dari package_items ke booking_items dengan deadline = booking_date + 14 hari.
Kategori Paket
| Kategori | Contoh Paket | Outdoor? | Assign Tulus? |
|---|---|---|---|
wedding_photo | Reguler, Silver, Gold, Diamond, All-in | Ya | Ya |
pre_wedding | Reguler/Silver/Gold (studio), Diamond (hybrid), Video (outdoor) | Bervariasi | Ya |
self_photo | Reguler, Silver, Gold, Grup | Tidak | Ya |
photo_studio | Reguler, Graduation, Maternity, Birthday | Tidak | Ya |
video | HD/FHD, Cinematic, Corporate, Event | Ya | Ya |
dekorasi | Akad, Unduh Mantu | Ya | Tidak (vendor) |
entertainment | Sound, Campursari | Ya | Tidak (vendor) |
addon | Extra Orang, Makeup, Spotlight, dll | — | — |
Route Flow
Booking
/bookings → form → handlePackageChange()
→ auto-set is_outdoor dari packages.default_is_outdoor
→ auto-assign assigned_employee_id = Tulus (kecuali vendor)
→ INSERT bookings
→ trigger auto-populate booking_items dari package_items
→ is_outdoor dikontrol radio (admin bisa override, karyawan disabled)
Absensi
/employee-dashboard → loadData()
→ cek business_schedule + holiday_settings
→ cek bookings hari ini WHERE is_outdoor = true
→ ada outdoor: work_type = 'field' (skip telat + early leave)
→ gak ada: work_type = 'studio' (jam kantor 09:00-18:00)
→ verify wajah (face-api compare descriptor)
→ check-in: hitung telat (grace 15 menit) → INSERT attendance
→ check-out: hitung overtime (dari jam tutup, min 60 menit)
+ early leave penalty
Checklist via Pepo Chat
User: "tandai MUA selesai untuk booking Andi"
→ /api/chat/ai
→ classifier → executeTool('update_booking_item', {item_name, status})
→ update booking_items.status = 'done'
→ save done_by + done_at
→ AI kasih konfirmasi
Expense via Pepo Chat
User: "catat pengeluaran bensin 2000"
→ AI: create_expense → auto-detect category 'transport'
→ INSERT finance { type: 'expense', category, description, amount }
→ AI: "Pengeluaran Rp 2.000 untuk Bensin (transport) berhasil dicatat."
Dashboard
/dashboard → loadData()
→ query bookings + customers + booking_items pending
→ hitung KPI: booking/revenue/customer bulan ini vs bulan lalu
→ chart: revenue 7 hari + service mix donut
→ upcoming: booking 7 hari ke depan
→ pending checklist: top 5 dengan urgency
03AI Tools (PepsOS)
9 tool aktif yang bisa dipanggil PEPO via function calling.
| Tool | Fungsi |
|---|---|
create_booking | Buat booking baru (setelah konfirmasi) |
check_availability | Cek slot jadwal kosong |
update_booking | Edit booking (jumlah orang, tanggal, jam, notes) |
get_booking_items | Ambil checklist item untuk booking |
update_booking_item | Tandai item done/pending |
get_pending_items | List item pending dengan deadline urgency |
create_expense | Catat pengeluaran (auto-detect category) |
get_expenses | List pengeluaran (filter tanggal/kategori) |
get_expense_summary | Ringkasan bulanan + breakdown kategori |
Auto-Detect Category Expense
| Kategori | Keyword Trigger |
|---|---|
transport | bensin, parkir, tol, grab, gojek, ojek |
konsumsi | makan, kopi, snack, catering |
alat | beli, alat, sewa, perlengkapan, kamera |
operasional | listrik, air, internet, telpon, hosting |
lainnya | (default fallback) |
Karakter PEPO (Shared Identity)
Base identity dipakai di kedua project — filosofi "Kecerdasanku ada karena manusia", owner Vicky. Bukan yes-man, serius saat perlu, humor secukupnya, no emoji, no markdown bold/italic, Bahasa Indonesia santai.
Berbeda scope: Pepo = AI Web Builder untuk publik. PepsOS = asisten internal untuk tim PepStudio.
04Fix & Patch Log
Ringkasan perubahan penting selama fase development.
Pepo (Fase 20-22)
- Auto model routing (classifier + 4 quality level)
- Dynamic max_tokens (chat 4000, html 6000, tsx 8000)
- Chunked generation (outline → section loop)
- Model registry (25 model dengan tier system)
- Cost tracking (
ai_usage_logs) - Landing page redesign (25+ AI model, mascot integration)
- File context menu (rename/duplicate/delete)
- Deploy paywall transparency + unlimited deploy option
- Next.js preview (auto-deploy Vercel)
- AI self-healing deploy errors
- Admin notification bell (realtime)
- Admin Users tab
- Mobile-friendly dropdown fix
PepsStudio OS (Fase 1-3)
- PEPO character rewrite (internal assistant, bukan CS)
- ChatBox text file upload + drag feature
- Booking form simplify (auto-outdoor + auto-assign)
- Attendance smart (skip telat untuk outdoor)
- Smart attendance auto-close (cron)
- Checklist Item Paket (SQL + AI tools + progress bar)
- Dashboard redesign (KPI + chart + upcoming + pending)
- Expense tracking (via Pepo chat)
- DSML fallback (DeepSeek tool-call issue)
- Speech bubble auto-hide + dismiss
05Roadmap Tertunda
Fitur dan inisiatif yang belum dikerjakan, siap dieksekusi kapan saja.
Untuk Pepo
- Import ZIP / individual files — decisions sudah dikunci (B-A-A-A-C), tinggal eksekusi
- Per-user memory — Supabase tabel + extraction logic + prompt injection
- Admin notifications extended — notif untuk top up request juga sudah ada, tinggal refine
- Web Push (VAPID) — service worker + subscribe flow
- Analytics dashboard — tracking user activity, popular prompts
Untuk PepsOS
- Reminder H-2 auto (cron untuk checklist deadline)
- Manage template paket UI (admin-friendly)
- Refactor model routing Pepo-style (registry)
Untuk PepsSpace (Future — Big)
White-label Pepo untuk bisnis lain. 3 opsi arsitektur:
A. Config-Driven Multi-Tenant (SaaS model)
B. Template/Boilerplate (setup service — RECOMMENDED)
C. Plugin Architecture (marketplace, future)
Roadmap Opsi B (2 minggu)
- Fase 1 (3 hari) — Ekstrak config ke
config/business.config.ts - Fase 2 (2 hari) — Generic UI (branding dari config)
- Fase 3 (2 hari) — Starter template repo + deploy script
- Fase 4 (2 hari) — Onboarding CLI wizard
Revenue estimate: Rp 3-5jt per setup untuk service model. Atau recurring untuk SaaS model.
06Kontak & Akun
Referensi akun dan akses layanan.
| Layanan | Akun | Catatan |
|---|---|---|
| Vercel | vickywa45 | 2 project: pepstudio-os + vibe-chat |
| Supabase | 1 project | Shared antara Pepo + PepsOS |
| Kenari | kenari.id | API key kn-..., PAYG balance |
| GitHub | vickywa45 | Repo: vibe-chat |
Tim
| Nama | Role | Login |
|---|---|---|
| Vicky | Owner · Admin | vickyarpan...@gmail.com |
| Triska | Admin | Co-admin PepStudio |
| Tulus | Photographer · Karyawan | tuluswb |
07Catatan Kerja
Prinsip dan workflow untuk development berikutnya.
Deploy Commands
Pepo: cd ~/dev.pepsspace.com → npx vercel --prod
PepsOS: cd ~/os.pepsspace.com → npx vercel --prod
Terminal Constraint
- Terminal: Gavia.id web terminal (via iPhone)
- Paste panjang >150 baris sering corrupt (UTF-8 error)
- Solusi: pakai
cat > file << 'EOF' ... EOFatau node script patch - Verify dengan
file file.tsx(harusASCII text)
Cleanup UTF-8 (Kalau Kejadian)
tr -cd '\11\12\15\40-\176' < file.tsx > /tmp/clean && mv /tmp/clean file.tsx
Build Test
timeout 30 npm run build 2>&1 | tail -15
Prinsip Kerja
- Cek SQL dulu sebelum coding — table structure bisa beda dari asumsi
- Pattern patch harus dari file asli — jangan tebak pattern
- Kenari API key jangan pernah exposed di source HTML
- DSML issue — DeepSeek V4 kadang output tool call sebagai text. Fallback ke Luna sudah di-handle
- Karyawan (Tulus) gak bisa buka Code tab — tapi tetap bisa akses
/bookings - Auto-hide bubble Pepo — 5 detik, sessionStorage dismiss, sekali per session
2 codebase · ~150 files · 40+ komponen · 20+ API routes · 25 AI model · 9 AI tools.