Internal Documentation

PepsSpace
Ecosystem

Full technical reference untuk Pepo (AI Web Builder), PepsStudio OS (Internal Ops), dan roadmap jangka panjang.

Owner
Vicky
Last Updated
2 Oktober 2026
Projects
Pepo · PepsOS
Status
Production

00Gambaran Besar

Tiga entitas yang saling terhubung di bawah umbrella PepsSpace.

PepsSpace (umbrella) ├── Pepo (AI Web Builder) │ → dev.pepsspace.com ├── PepStudio OS (Internal Ops) │ → os.pepsspace.com └── PepStudio (Business entity) → pepsspace.com (public site)

2 codebase terpisah, 2 deployment terpisah. Keduanya share Supabase account + Kenari API key.

ProyekURLFungsiUser
Pepodev.pepsspace.comAI Web Builder publikUMKM, freelancer, personal
PepsStudio OSos.pepsspace.comInternal operationsAdmin, karyawan PepStudio
PepStudiopepsspace.comBusiness landingCustomer 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

URLdev.pepsspace.com
Folder~/dev.pepsspace.com
Repo Gitvickywa45/vibe-chat (origin)
Deploynpx vercel --prod
StackNext.js 16 · React 19 · Tailwind v3 · Supabase · Kenari.id · Vercel

Struktur Folder

src/ ├── app/ │ ├── page.tsx ← Landing page │ ├── layout.tsx ← Root layout │ ├── globals.css ← Design system + animations │ ├── workspace/page.tsx ← Workspace utama │ ├── reset-password/page.tsx ← Reset password page │ ├── share/[token]/page.tsx ← Public share page │ ├── icon.png ← Favicon (mascot face-happy) │ ├── apple-icon.png ← iOS home screen icon │ └── api/ │ ├── chat/route.ts ⭐ AI chat endpoint │ ├── tts/route.ts ← Text-to-speech │ ├── fetch-url/route.ts ← Web fetch (SSRF protected) │ ├── deploy/route.ts ← Deploy Vercel + scaffold auto-inject │ ├── deploy/cleanup/route.ts ← Auto-cleanup Vercel │ ├── custom-domain/route.ts ← Custom domain user │ ├── share/route.ts ← Generate share token │ ├── share/[token]/route.ts ← Public share data │ ├── preview/cleanup/route.ts ← Cleanup preview deployment │ ├── preview/auto-fix/route.ts ← AI self-healing deploy errors │ └── admin/ │ ├── domains/route.ts ← Admin domain management │ └── users/route.ts ← Admin user list │ ├── components/ │ ├── ui/ ← Button, Panel, Badge, Toast, Skeleton, Logo │ ├── icons/index.tsx ← Semua SVG icon │ ├── auth/AuthDialog.tsx ← Login / Register / Forgot │ └── workspace/ │ ├── Header.tsx ← Header + user menu + AdminNotifBell │ ├── Sidebar.tsx ← Project list + file tree + delete confirm │ ├── Canvas.tsx ← Main canvas (4 tab controller) │ ├── MobileWorkspace.tsx ← Mobile layout │ ├── WorkspaceActions.tsx ← Export ZIP + reset dropdown │ ├── DeployDialog.tsx ← Deploy dialog │ ├── CustomDomainDialog.tsx ← Custom domain dialog │ ├── ShareDialog.tsx ← Share dialog │ ├── TopUpDialog.tsx ← Top up credit │ ├── AdminPanel.tsx ← Admin (TopUp + Users + Domains) │ ├── AdminNotifBell.tsx ← Realtime bell notif (admin) │ ├── UpsellDialog.tsx ← Upsell (account/project/signup/deploy-options) │ ├── OnboardingWizard.tsx ← Welcome wizard (6 use case) │ ├── TreeItem.tsx ← File tree item (folder) │ ├── FileTreeItem.tsx ← File tree item + context menu │ └── canvas/ │ ├── CommandBar.tsx ← Input + quality toggle │ ├── ConversationTimeline.tsx ← Chat history + badge │ ├── PreviewPane.tsx ← Detect HTML/React/NextJS → render │ ├── CodePane.tsx ← Code viewer + edit mode (undo/redo/save) │ ├── DatabasePane.tsx ← DB schema viewer │ ├── VoiceMode.tsx ← Voice call │ ├── ActionCard.tsx ← AI action card │ ├── ProgressCard.tsx ← Chunked generation progress │ └── preview/ │ ├── SandpackPreview.tsx ← React preview │ └── NextJSPreview.tsx ← Next.js preview (auto-deploy) │ ├── lib/ │ ├── supabase/client.ts ← Supabase client │ ├── auth/context.tsx ← AuthProvider │ ├── credits/ │ │ ├── context.tsx ← CreditsProvider │ │ └── packages.ts ← Topup packages + BANK_INFO │ ├── workspace/context.tsx ← WorkspaceProvider │ ├── guest/context.tsx ← GuestProvider │ ├── upsell/context.tsx ← UpsellProvider │ ├── notifications/ │ │ ├── useTopUpNotifier.ts ← User notif: top up approved/rejected │ │ └── useAdminNotifications.ts ← Admin notif: realtime │ ├── web/ │ │ ├── security.ts ← URL validation (SSRF) │ │ └── fetcher.ts ← URL fetch helper │ ├── ai/ │ │ ├── router.ts ← Classifier + access guard │ │ ├── chunker.ts ← Chunked generation │ │ └── models.ts ← Model registry (25 model) │ └── utils/ │ ├── utils.ts ← cn() helper │ ├── image.ts ← Image compression │ └── zip.ts ← Export ZIP (JSZip) │ └── hooks/useMediaQuery.ts

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 credit
  • add_credits(user_id, amount, reason, metadata) — admin only
  • activate_unlimited_deploy() — 250 cr, unlimited deploy

Pricing

Paket Top Up

PaketCreditHargaRate
Coba Dulu30Rp 15.000Rp 500/cr
Starter100Rp 25.000Rp 250/cr
Pro500Rp 100.000Rp 200/cr
Bisnis1.500Rp 250.000Rp 167/cr

Unlock

ItemCreditFungsi
Pro Account400 crUnlock Code tab + custom domain
Pro Project50 cr / projectPer project unlock
Unlimited Deploy250 cr (sekali)Semua project

Charge per Action (Level-Based Multiplier)

ActionBaseAuto/Std (1x)Smart (4x)Premium (10x)
Chat0.050.050.200.50
Build HTML883280
Update HTML552050
Build TSX2525100250
Web Fetch2/URLflatflatflat
Voice TTS+5+5+5+5

Model AI (Kenari.id)

Quality Level

LevelModelRate (Rp/1M)
Budgetdeepseek-v4-1-flash20 / 50
Visiongemini-2-5-flash-lite400 / 1.700
Standardgpt-6-luna1.750 / 8.500
Premiumclaude-sonnet-525.000 / 125.000
Ultraclaude-opus-5, gpt-6-solAdmin only
Free Models (16)

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

URLos.pepsspace.com
Folder~/os.pepsspace.com
Deploynpx vercel --prod
StackNext.js 14 · React · Tailwind · Supabase · Kenari · face-api.js · Web Push

Struktur Folder

app/ ├── api/ │ ├── ai/generate-image/route.ts ← Image generation │ └── chat/ai/ │ ├── route.ts ⭐ AI chat (PEPO + tools) │ └── kenari.ts ← Kenari helper │ ├── attendance/ │ ├── page.tsx ← Rekap absensi + potongan │ └── register/page.tsx ← Registrasi wajah (face-api) │ ├── bookings/page.tsx ⭐ List booking + checklist bar ├── calendar/ ← Kalender booking ├── customers/ ← Data customer ├── dashboard/page.tsx ⭐ KPI + chart + upcoming ├── employee-dashboard/page.tsx ⭐ Absen + face recognition ├── finance/ ← Keuangan ├── invoice/ ← Invoice ├── login/ ← Login page ├── notif/ ← Push notification handler ├── packages/ ← Management paket ├── settings/ ← Settings │ ├── globals.css · layout.tsx · page.tsx │ components/ ├── ChatBox.tsx ⭐ Floating chat (drag + bubble) ├── Navbar.tsx ← Navigation + logout └── logo.png │ lib/ ├── supabase/ │ ├── client.ts ← Client-side │ └── server.ts ← Server-side ├── ai-executor.ts ⭐ Eksekutor tool ├── ai-tools.ts ⭐ Tool definitions ├── face-api.ts ← Face recognition ├── invoice.ts ← PDF invoice ├── kenari-image.ts ← Image gen/edit ├── kenari.ts ← Kenari helper ├── menu.ts ← Menu config └── push.ts ← Web Push (VAPID) │ public/ ├── mascot/ (4 PNG) · models/ (face-api) · manifest.json · sw.js · icons

Skema Supabase

Tabel Utama

  • customers — id, name, phone, address, workspace_id
  • bookings — customer_id, package_id, total_price, guest_count, booking_date, booking_time, address, notes, status, is_outdoor, assigned_employee_id
  • packages — name, description, price, duration, category, pricing_type, max_guests, extra_guest_price, default_is_outdoor
  • employees — name, employee_id, role, photo_url, face_descriptor
  • admin_users — name, email, role, avatar_url
  • attendance — 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/end
  • business_schedule — day_of_week, is_working_day, open_time, close_time
  • holiday_settings — date, is_holiday, note
  • finance — amount, status, payment_method, notes, description, booking_date, type (income/expense), category
  • invoices — invoice_number, items, subtotal, total, status, issued_at
  • image_generations — user_id, user_type, prompt, image_url, model, date
  • push_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)
Auto-Populate Trigger

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

KategoriContoh PaketOutdoor?Assign Tulus?
wedding_photoReguler, Silver, Gold, Diamond, All-inYaYa
pre_weddingReguler/Silver/Gold (studio), Diamond (hybrid), Video (outdoor)BervariasiYa
self_photoReguler, Silver, Gold, GrupTidakYa
photo_studioReguler, Graduation, Maternity, BirthdayTidakYa
videoHD/FHD, Cinematic, Corporate, EventYaYa
dekorasiAkad, Unduh MantuYaTidak (vendor)
entertainmentSound, CampursariYaTidak (vendor)
addonExtra 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.

ToolFungsi
create_bookingBuat booking baru (setelah konfirmasi)
check_availabilityCek slot jadwal kosong
update_bookingEdit booking (jumlah orang, tanggal, jam, notes)
get_booking_itemsAmbil checklist item untuk booking
update_booking_itemTandai item done/pending
get_pending_itemsList item pending dengan deadline urgency
create_expenseCatat pengeluaran (auto-detect category)
get_expensesList pengeluaran (filter tanggal/kategori)
get_expense_summaryRingkasan bulanan + breakdown kategori

Auto-Detect Category Expense

KategoriKeyword Trigger
transportbensin, parkir, tol, grab, gojek, ojek
konsumsimakan, kopi, snack, catering
alatbeli, alat, sewa, perlengkapan, kamera
operasionallistrik, 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)

Pepo as Service / Boilerplate

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.

LayananAkunCatatan
Vercelvickywa452 project: pepstudio-os + vibe-chat
Supabase1 projectShared antara Pepo + PepsOS
Kenarikenari.idAPI key kn-..., PAYG balance
GitHubvickywa45Repo: vibe-chat

Tim

NamaRoleLogin
VickyOwner · Adminvickyarpan...@gmail.com
TriskaAdminCo-admin PepStudio
TulusPhotographer · Karyawantuluswb

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' ... EOF atau node script patch
  • Verify dengan file file.tsx (harus ASCII 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
Total Statistics

2 codebase · ~150 files · 40+ komponen · 20+ API routes · 25 AI model · 9 AI tools.