🚀 OmniStack

The Developer Operating System

Any Stack. Any Cloud. Your Rules.

Demo • Features • Role System • Branching • Quick Start • Roadmap

📖 Tentang OmniStack

OmniStack adalah Developer Operating System (DevOS) — platform PaaS (Platform as a Service) modern yang menyatukan Cloud IDE, AI Prompt Engineer, CI/CD Pipeline, Container Orchestration, dan Observability dalam satu antarmuka yang elegan.

Berbeda dengan:

❌ PaaS tradisional (Vercel, Heroku, Railway) yang mahal & vendor lock-in
❌ Control Panel kuno (cPanel, CyberPanel, Plesk) yang manual & terbatas
❌ Self-hosted PaaS (Coolify, Dokploy) yang single-node & minim fitur

OmniStack menggunakan model Bring Your Own Cloud (BYOC) — Anda membawa VPS sendiri (Hetzner, AWS, DigitalOcean, IDCloudHost, Biznet), kami yang mengorkestrasinya menjadi platform kelas enterprise.

🎭 Role System & Access Control

OmniStack menggunakan Role-Based Access Control (RBAC) dengan 3 level untuk MVP. Setiap role memiliki permission yang jelas dan terukur.

👥 Overview Roles

Role	Icon	Level	Use Case	Default After Registration
ADMIN	👑	Super User	Founder, CTO, DevOps Engineer	❌ No (manual assign)
USER	👨‍💻	Standard	Developer, Indie Hacker, Team Member	✅ Yes
VIEWER	👁️	Read-Only	Product Manager, Client, Auditor	❌ No (manual assign)

👑 ADMIN — Super Administrator

Definisi: Pengguna dengan akses penuh ke seluruh sistem. Bertanggung jawab atas manajemen user, konfigurasi sistem, dan pengawasan global.

✅ Permissions (What They Can Do)

Category	Actions
User Management	Create, Read, Update, Delete semua user
Role Management	Promote/demote role user lain
Project Access	Akses semua proyek dari semua user
System Settings	Kelola SMTP, OAuth providers, API keys global
Audit & Logs	View audit logs, system metrics, error reports
Deployments	Deploy/rollback semua proyek di sistem
Dangerous Actions	Hapus user/proyek secara permanen
Billing	View & manage subscription, invoices

❌ Restrictions (What They Cannot Do)

Bypass 2FA jika di-enable
Delete their own account (harus via super-admin lain)

🎯 Use Case

Founder/CTO startup yang butuh kontrol penuh
DevOps Engineer di software house
System Administrator enterprise
Solo developer yang mengelola semua aspek

🧪 Test Account

Email:    admin@omnistack.dev
Password: admin123

📍 Post-Login Destination

Redirect: /admin (Admin Dashboard)
First View: User statistics, system health, recent activities

👨‍💻 USER — Standard Developer

Definisi: Developer yang dapat mengelola proyek dan deployment miliknya sendiri. Role default untuk sebagian besar pengguna.

✅ Permissions (What They Can Do)

Category	Actions
Own Projects	CRUD proyek miliknya sendiri
Deployments	Deploy, rollback, view logs proyek sendiri
Collaboration	Invite kolaborator ke proyeknya
Profile	Edit profile, API keys pribadi, preferences
AI Features	Gunakan AI Architect untuk generate code
GitOps	Create preview environments per PR
Monitoring	View metrics & logs proyek sendiri
FinOps	View cost tracking proyek sendiri

❌ Restrictions (What They Cannot Do)

Akses proyek user lain (kecuali di-invite sebagai collaborator)
Manage users atau system settings
View audit logs global
Delete user lain
Modify subscription/billing

🎯 Use Case

Full-stack developer dalam tim
Indie hacker dengan side projects
Mahasiswa/intern yang sedang belajar
Freelancer yang kelola proyek klien

🧪 Test Account

Email:    dev@omnistack.dev
Password: dev123

📍 Post-Login Destination

Redirect: /dashboard (Personal Dashboard)
First View: My projects, recent deployments, AI Architect quick access

👁️ VIEWER — Read-Only Observer

Definisi: Pengguna yang hanya bisa memantau dan melihat data tanpa bisa melakukan perubahan. Cocok untuk stakeholder non-teknis.

✅ Permissions (What They Can Do)

Category	Actions
Dashboards	View semua dashboard & metrics
Logs & Monitoring	Read deployment logs, APM data
Reports	View & download FinOps reports (CSV/PDF)
Projects	View (read-only) proyek yang di-share ke mereka
Alerts	Receive notifications (read-only)
Profile	Edit profile pribadi

❌ Restrictions (What They Cannot Do)

Create, edit, atau delete apapun
Deploy atau rollback aplikasi
Invite user atau collaborator
Ubah settings (system atau project)
Execute AI Architect untuk generate code
Access SSH atau terminal

🎯 Use Case

Product Manager yang monitor progress
Client/stakeholder yang ingin lihat status
Auditor compliance yang perlu observasi
Investor yang monitor burn rate
QA yang hanya perlu observasi tanpa eksekusi
Trainer/mentor yang melihat progress student

🧪 Test Account

Email:    viewer@omnistack.dev
Password: viewer123

📍 Post-Login Destination

Redirect: /dashboard (Read-Only Dashboard)
First View: Metrics overview, monitoring dashboards, reports

🔐 Permission Matrix (Detail)

Feature / Action	👑 ADMIN	👨‍💻 USER	👁️ VIEWER
User Management
View all users	✅	❌	❌
Create new user	✅	❌	❌
Edit user role	✅	❌	❌
Delete user	✅	❌	❌
Project Management
View all projects	✅	❌	❌
View own projects	✅	✅	⚠️ Shared only
Create project	✅	✅	❌
Edit project	✅	✅ Own	❌
Delete project	✅	✅ Own	❌
Deployment
Deploy any project	✅	❌	❌
Deploy own project	✅	✅	❌
Rollback deployment	✅	✅ Own	❌
View deployment logs	✅	✅ Own	✅ Shared
AI Features
Use AI Architect	✅	✅	❌
Use AI Code Reviewer	✅	✅	❌
View AI history	✅	✅ Own	❌
GitOps
Connect Git provider	✅	✅	❌
Create preview env	✅	✅	❌
View preview env	✅	✅	✅ Shared
Infrastructure
Add VPS node	✅	❌	❌
Manage clusters	✅	❌	❌
View cluster health	✅	✅	✅
Monitoring
View APM	✅	✅ Own	✅ Shared
View logs	✅	✅ Own	✅ Shared
View FinOps	✅	✅ Own	✅ Shared
Export reports	✅	✅ Own	✅ Shared
Settings
System settings	✅	❌	❌
Profile settings	✅	✅	✅
Project settings	✅	✅ Own	❌
Security
View audit logs	✅	❌	❌
Manage API keys (global)	✅	❌	❌
Manage API keys (own)	✅	✅	❌
Enable/disable 2FA (others)	✅	❌	❌

Legend:

✅ = Full access
❌ = No access
⚠️ = Conditional access (requires sharing)
"Own" = Only for resources they own
"Shared" = Only for resources shared with them

🛣️ Route Access Map

Route	ADMIN	USER	VIEWER	Public
`/` (Landing)	✅	✅	✅	✅
`/login`	✅	✅	✅	✅
`/register`	✅	✅	✅	✅
`/pricing`	✅	✅	✅	✅
`/dashboard`	✅	✅	✅ (RO)	❌
`/projects`	✅ (all)	✅ (own)	✅ (shared)	❌
`/projects/:id`	✅	✅ (own)	✅ (shared)	❌
`/ai-architect`	✅	✅	❌	❌
`/ai-reviewer`	✅	✅	❌	❌
`/deployments`	✅ (all)	✅ (own)	✅ (shared)	❌
`/monitoring`	✅	✅	✅ (RO)	❌
`/error-tracking`	✅	✅	✅ (RO)	❌
`/gitops`	✅	✅	❌	❌
`/finops`	✅	✅ (own)	✅ (shared, RO)	❌
`/settings`	✅	✅ (profile)	✅ (profile)	❌
`/admin`	✅	❌	❌	❌
`/admin/users`	✅	❌	❌	❌
`/admin/databases`	✅	❌	❌	❌
`/admin/audit`	✅	❌	❌	❌
`/admin/settings`	✅	❌	❌	❌
`/admin/infrastructure`	✅	❌	❌	❌
`/admin/ai-config`	✅	❌	❌	❌
`/admin/billing`	✅	❌	❌	❌
`/api/*`	✅	✅*	✅*	❌

Legend:

RO = Read-Only
* = Limited to own resources

Catatan: Semua halaman di atas masih mock UI — belum ada backend. Pembatasan akses VIEWER diimplementasikan di sidebar (app-sidebar.tsx menyembunyikan item) dan helper RBAC di lib/mock-data.ts.

🎨 UI/UX Differences per Role

Sidebar Navigation

Sidebar diimplementasikan di components/app-sidebar.tsx dengan 3 grup: Workspace (semua role, item bervariasi per role), Administrasi (hanya ADMIN), dan Akun (semua role). Header menampilkan identitas role (👑 Administrator amber · 👨‍💻 Developer blue · 👁️ Viewer emerald). Khusus VIEWER ada footer "Read-only mode".

👑 ADMIN Sidebar:

┌──────────────────────────────┐
│ OmniStack                    │
│ 👑 Administrator             │
├──────────────────────────────┤
│ Workspace                    │
│  🏠 Overview        → /admin │
│  📦 All Projects    → /projects │
│  🚀 Deployments     → /deployments │
│  📊 Monitoring      → /monitoring │
│  🐛 Error Tracking  → /error-tracking │
│  🔀 Preview Env     → /gitops │
│  💰 FinOps          → /finops │
│  ✨ AI Architect    → /ai-architect │
│  🧠 AI Code Reviewer→ /ai-reviewer │
├──────────────────────────────┤
│ Administrasi   ← ADMIN ONLY  │
│  👥 User Management → /admin/users │
│  🗄️ Databases       → /admin/databases │
│  📋 Audit Logs      → /admin/audit │
│  ⚙️ System Settings → /admin/settings │
│  🖥️ Infrastructure  → /admin/infrastructure │
│  🤖 AI Config       → /admin/ai-config │
│  💳 Billing         → /admin/billing │
├──────────────────────────────┤
│ Akun                         │
│  ⚙️ Settings        → /settings │
└──────────────────────────────┘

👨‍💻 USER Sidebar:

┌──────────────────────────────┐
│ OmniStack                    │
│ 👨‍💻 Developer                │
├──────────────────────────────┤
│ Workspace                    │
│  🏠 Overview        → /dashboard │
│  📦 My Projects     → /projects │
│  🚀 Deployments     → /deployments │
│  📊 Monitoring      → /monitoring │
│  🐛 Error Tracking  → /error-tracking │
│  🔀 Preview Env     → /gitops │
│  💰 FinOps          → /finops │
│  ✨ AI Architect    → /ai-architect │
│  🧠 AI Code Reviewer→ /ai-reviewer │
├──────────────────────────────┤
│ Akun                         │
│  ⚙️ Settings        → /settings │
└──────────────────────────────┘

👁️ VIEWER Sidebar:

┌──────────────────────────────┐
│ OmniStack                    │
│ 👁️ Viewer                    │
├──────────────────────────────┤
│ Workspace                    │
│  🏠 Overview (RO)   → /dashboard │
│  📦 Shared Projects → /projects │
│  🚀 Deployments     → /deployments │
│  📊 Monitoring      → /monitoring │
│  🐛 Error Tracking  → /error-tracking │
│  💰 FinOps          → /finops │
│  ❌ Preview Env     → disembunyikan │
│  ❌ AI Architect    → disembunyikan │
│  ❌ AI Code Reviewer→ disembunyikan │
├──────────────────────────────┤
│ Akun                         │
│  ⚙️ Settings        → /settings │
├──────────────────────────────┤
│ 👁️ Read-only mode            │
│  Semua tombol aksi           │
│  dinonaktifkan.              │
└──────────────────────────────┘

Perbedaan kunci antar role:

Item	ADMIN	USER	VIEWER
Overview mengarah ke	`/admin`	`/dashboard`	`/dashboard`
Label menu Projects	All Projects	My Projects	Shared Projects
Preview Environments (`/gitops`)	✅	✅	❌ Disembunyikan
AI Architect & AI Code Reviewer	✅	✅	❌ Disembunyikan
Grup Administrasi (7 item admin)	✅	❌	❌
Footer "Read-only mode"	❌	❌	✅

Button States

Action Button	ADMIN	USER	VIEWER
"Create Project"	✅ Enabled	✅ Enabled	❌ Hidden
"Deploy"	✅ Enabled	✅ Enabled (own)	❌ Disabled
"Rollback"	✅ Enabled	✅ Enabled (own)	❌ Disabled
"Delete"	✅ Enabled (red)	✅ Enabled (own, red)	❌ Hidden
"Invite User"	✅ Enabled	✅ Enabled (project)	❌ Hidden
"Export Report"	✅ Enabled	✅ Enabled	✅ Enabled
"Run AI Prompt"	✅ Enabled	✅ Enabled	❌ Disabled

🧪 Testing the Roles

Quick Test Flow

1. Test ADMIN Access:

# Login
Email: admin@omnistack.dev
Password: admin123

# Expected behavior:
✅ Redirect to /admin
✅ See all sidebar items
✅ Access /admin/users
✅ Access /admin/audit
✅ Can create/edit/delete any user
✅ Can view all projects

2. Test USER Access:

# Login
Email: dev@omnistack.dev
Password: dev123

# Expected behavior:
✅ Redirect to /dashboard
✅ See personal sidebar
✅ Access own projects only
❌ Cannot access /admin (403 or redirect)
❌ Cannot see other users' projects
✅ Can deploy own projects
✅ Can use AI Architect

3. Test VIEWER Access:

# Login
Email: viewer@omnistack.dev
Password: viewer123

# Expected behavior:
✅ Redirect to /dashboard (read-only)
✅ See limited sidebar
✅ View metrics & reports
❌ All action buttons disabled
❌ Cannot access /admin
❌ Cannot deploy or edit
✅ Can download reports

API Testing with cURL

# Test admin endpoint (should work for ADMIN only)
curl -H "Authorization: Bearer $ADMIN_TOKEN" \
  http://localhost:3000/api/admin/users

# Test project creation (should work for ADMIN + USER)
curl -X POST -H "Authorization: Bearer $USER_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{"name": "my-project"}' \
  http://localhost:3000/api/projects

# Test read-only endpoint (should work for all roles)
curl -H "Authorization: Bearer $VIEWER_TOKEN" \
  http://localhost:3000/api/metrics

🔄 Role Transitions & Lifecycle

Default Role Assignment

graph TD
    A[User Registers] --> B{Registration Method}
    B -->|Email/Password| C[Role: USER]
    B -->|GitHub OAuth| C
    B -->|Google OAuth| C
    B -->|Admin Invite| D[Assigned Role]
    C --> E[Can use platform]
    D --> E

Role Upgrade/Downgrade Flow

USER → ADMIN (by existing ADMIN)
  ├─ Requires: Approval from another ADMIN (optional)
  ├─ Notified via email
  └─ Logged in audit trail

ADMIN → USER (self-demotion or by another ADMIN)
  ├─ Requires: At least 1 ADMIN remains in system
  ├─ Session refresh required
  └─ Loses admin privileges immediately

Any → VIEWER (by ADMIN)
  ├─ Use case: Temporary read-only access
  ├─ Time-limited option available
  └─ Can be reverted anytime

Safety Mechanisms

Minimum Admin Rule: Sistem tidak mengizinkan demote ADMIN terakhir
Audit Trail: Semua perubahan role tercatat dengan timestamp & actor
Session Invalidation: Role change triggers session refresh
Email Notification: User mendapat email saat role mereka berubah
Confirmation Dialog: Destructive actions butuh konfirmasi 2-step

💼 Real-World Scenarios

Scenario 1: Startup Team (5 people)

👑 ADMIN (1): CTO
   └─ Manage all users, billing, system settings

👨‍💻 USER (3): Backend Dev, Frontend Dev, DevOps
   └─ Each manage their own projects
   └─ Collaborate via project invites

👁️ VIEWER (1): Product Manager
   └─ Monitor progress, view reports
   └─ Cannot make technical changes

Scenario 2: Software House (Agency)

👑 ADMIN (2): Founder + Tech Lead
   └─ Manage clients, billing, all projects

👨‍💻 USER (10): Developers
   └─ Assigned to specific client projects
   └─ Cannot see other clients' projects

👁️ VIEWER (5): Clients (one per project)
   └─ View their project progress
   └─ See FinOps reports for billing transparency

Scenario 3: Enterprise

👑 ADMIN (3): IT Admin + Security Officer + CTO
   └─ Separation of duties
   └─ Audit log review

👨‍💻 USER (50): Development teams
   └─ Organized by department
   └─ Role-based project access

👁️ VIEWER (20): Managers, Auditors, Compliance
   └─ Department-specific dashboards
   └─ Export reports for stakeholders

🛡️ Security Best Practices

For ADMINs

✅ Enable 2FA (wajib)
✅ Use strong unique password
✅ Review audit logs weekly
✅ Follow principle of least privilege
✅ Rotate API keys quarterly

For USERs

✅ Use GitHub OAuth (recommended)
✅ Enable 2FA
✅ Never share credentials
✅ Use scoped API keys for integrations
✅ Regularly review active sessions

For VIEWERs

✅ Read-only by design
✅ No sensitive action capability
✅ Limited data exposure
✅ Activity logged for audit

📚 Related Documentation

ARCHITECTURE.md — ADR-006: Role-based Access Control Design
CONVENTIONS.md — Role checking patterns in code
AGENTS.md — Role-based permission helper usage

🔧 Developer Guide: Checking Roles in Code

Catatan: Belum ada backend — auth & data via lib/auth-context.tsx (localStorage) dan lib/mock-data.ts. Selalu gunakan helper RBAC yang sudah ada (getMockProjectsByUser, roleAtLeast), jangan filter manual.

// Import dari mock layer (ganti ke next-auth saat backend ready)
import { useAuth } from "@/lib/auth-context"
import { getMockProjectsByUser, roleAtLeast } from "@/lib/mock-data"
import type { Role } from "@/lib/auth-context"

// In Client Component
"use client"
export function AdminSection() {
  const { user } = useAuth()

  if (!roleAtLeast(user?.role as Role | undefined, "ADMIN")) {
    return null // Hide section
  }

  return <AdminContent />
}

// Ambil proyek sesuai role (helper sudah handle RBAC)
const projects = getMockProjectsByUser(user)

✨ Complete Feature Matrix

OmniStack dibangun di atas 6 pilar utama yang mencakup seluruh siklus hidup pengembangan perangkat lunak (SDLC).

🤖 Pillar 1: AI-Powered Development

Feature	Description
AI Architect	Generate full-stack aplikasi dari prompt natural language
AI Code Reviewer	Review otomatis setiap Pull Request
AI Log Analyzer	Diagnosa error otomatis dengan root-cause analysis
AI Infra Generator	Generate Infrastructure-as-Code dari deskripsi natural
Context-Aware Refactoring	Ubah stack, AI otomatis refactor
Smart Prompt History	Semua prompt tersimpan & searchable

🎨 Pillar 2: Freedom Stack & Cloud IDE

Feature	Description
Unopinionated Stack Builder	Pilih kombinasi bebas: React/Vue/Svelte × NestJS/Hono/Django × Postgres/MySQL/Mongo
Nixpacks + Buildpacks	Auto-detect bahasa & library
Cloud IDE (Browser-based)	VS Code-like experience di browser
Live Preview (HMR)	Hot Module Replacement real-time
Device & Network Simulator	Test di berbagai device & network
Mock API Server	Frontend bisa develop paralel

🔄 Pillar 3: GitOps & CI/CD

Feature	Description
Integrated SCM	Git server bawaan atau integrasi GitHub/GitLab
Preview Environments	Setiap PR dapat URL staging + DB kloning
Visual Pipeline Builder	Drag-and-drop CI/CD workflow
Zero-Downtime Deploy	Blue/Green deployment otomatis
Instant Rollback	Kembali ke versi sebelumnya dalam 1 klik
Private Artifact Registry	Docker, NPM, PyPI registry internal

🏗️ Pillar 4: Infrastructure & Scaling

Feature	Description
Multi-Node Cluster	Gabungkan banyak VPS jadi satu pool
Horizontal Auto-Scaling	Auto scale berdasarkan metrics
Internal Service Discovery	Private DNS antar services
Database-as-a-Service	1-click Postgres/MySQL/Redis
Point-in-Time Recovery	Restore database ke detik spesifik
Edge CDN Integration	Cache aset ke seluruh dunia

📊 Pillar 5: Observability & FinOps

Feature	Description
Centralized Logging	Semua log dalam satu searchable UI
APM	Response time, error rate per-aplikasi
Real User Monitoring	Core Web Vitals dari user real
Error Tracking	Auto-create issue saat error
FinOps Dashboard	Biaya per-aplikasi real-time
Cost Allocation	Tagih klien berdasarkan resource

🛡️ Pillar 6: Security & Enterprise

Feature	Description
RBAC (Role-Based Access)	3 role: ADMIN, USER, VIEWER ← NEW!
Automated SAST/DAST	Scan kerentanan otomatis
Secrets Vault	Simpan secrets terenkripsi
Audit Logs	Track siapa melakukan apa
SSO (SAML/OIDC)	Integrasi corporate identity
2FA Authentication	TOTP-based two-factor auth
On-Premise Deployment	Install di jaringan internal
White-Label Mode	Agensi jual dengan brand sendiri

🏗️ Architecture

High-Level System Design

┌─────────────────────────────────────────────────────────────┐
│                      CONTROL PLANE                           │
│  ┌──────────┐  ┌──────────┐  ┌──────────┐  ┌──────────┐    │
│  │ Dashboard│  │   API    │  │   Auth   │  │  Billing │    │
│  │   (UI)   │  │ (GraphQL)│  │(NextAuth)│  │ (Stripe) │    │
│  └──────────┘  └──────────┘  └──────────┘  └──────────┘    │
│                                                              │
│  ┌──────────────────────────────────────────────────────┐   │
│  │              RBAC LAYER (NEW!)                         │   │
│  │   👑 ADMIN  │  👨‍💻 USER  │  👁️ VIEWER  │  🔒 Middleware  │   │
│  └──────────────────────────────────────────────────────┘   │
└─────────────────────────────┬───────────────────────────────┘
                              │
                              ▼
┌─────────────────────────────────────────────────────────────┐
│                      DATA PLANE                              │
│  ┌──────────┐  ┌──────────┐  ┌──────────┐                  │
│  │ Agent    │  │ Agent    │  │ Agent    │                  │
│  │ VPS #1   │  │ VPS #2   │  │ VPS #N   │                  │
│  └──────────┘  └──────────┘  └──────────┘                  │
└─────────────────────────────────────────────────────────────┘

Tech Stack

Layer	Technology	Status
Framework	Next.js 16.3 (App Router + Turbopack)	✅ Aktif
Language	TypeScript 5 (strict mode)	✅ Aktif
Styling	Tailwind CSS v4	✅ Aktif
UI Components	shadcn/ui (Base UI primitives)	✅ Aktif
Icons	Lucide React + react-icons/si	✅ Aktif
Theme	next-themes (dark/light mode)	✅ Aktif
Auth	Mock via localStorage (`lib/auth-context.tsx`)	🧪 Mock — NextAuth v5 planned
Database	Belum ada — data mock (`lib/mock-data.ts`)	🧪 Mock — Prisma + PostgreSQL planned
RBAC	Helper di `lib/mock-data.ts` (ADMIN/USER/VIEWER)	🧪 Mock UI
AI Agent Infra	Skills, sub-agents, KG, memory (`.opencode/`, `docs/kg/`)	✅ Aktif
Deployment	Belum dikonfigurasi	🔮 Docker/K8s planned

🎯 Use Cases

👨‍💻 Indie Developer

✅ Deploy 1-klik dari GitHub
✅ AI Architect generate boilerplate
✅ Free tier untuk 3 proyek

🚀 Startup Tech

✅ Preview environments per PR
✅ Auto-scaling saat traffic spike
✅ FinOps untuk track burn rate

🏢 Software House / Agency

✅ White-label untuk jual "cloud hosting"
✅ Cost allocation per-klien
✅ Role: ADMIN untuk tech lead, USER untuk dev, VIEWER untuk client

🏛️ Enterprise / Government

✅ On-premise deployment
✅ SSO dengan corporate identity
✅ Audit logs untuk compliance
✅ Role-based data isolation

⚔️ Comparison with Competitors

Feature	OmniStack	Vercel/Heroku	CyberPanel	Coolify
AI Prompt Engineer	✅	❌	❌	❌
Cloud IDE	✅	❌	❌	❌
RBAC (3 roles)	✅	⚠️ Limited	❌	⚠️ Basic
Preview Environments	✅	✅	❌	⚠️
Multi-Node Cluster	✅	⚠️	❌	⚠️
FinOps per-app	✅	❌	❌	❌
BYOC Model	✅	❌	✅	✅
On-Premise	✅	❌	✅	✅

🚀 Quick Start

Prasyarat

Node.js ≥ 20.9.0 (LTS)
npm ≥ 10.x atau pnpm/bun
Git
PostgreSQL (optional, SQLite for dev)

Installation

# 1. Clone repository
git clone https://github.com/yourusername/omnistack.git
cd omnistack

# 2. Install dependencies
npm install

# 3. Run development server
npm run dev

Buka http://localhost:3000 dan login dengan salah satu test account (quick-login tersedia di halaman /login):

👑 ADMIN:   admin@omnistack.dev / admin123
👨‍💻 USER:    dev@omnistack.dev / dev123
👁️ VIEWER:  viewer@omnistack.dev / viewer123

Available Scripts

npm run dev          # Dev server dengan Turbopack
npm run build        # Production build
npm run start        # Start production server
npm run lint         # Run ESLint

# Quality gate (AI agents / CI)
bash .opencode/skills/omnistack-quality-gate/scripts/verify.sh            # lint + typecheck + build
bash .opencode/skills/omnistack-quality-gate/scripts/verify.sh --no-build # lint + typecheck saja

# Knowledge graph
bash .opencode/skills/omnistack-kg/scripts/validate-kg.sh                 # validasi docs/kg/

Catatan: Saat ini belum ada backend/database — auth & data masih mock (localStorage via lib/auth-context.tsx + lib/mock-data.ts). Test account didefinisikan di lib/mock-data.ts. Perintah Prisma/migrate akan aktif setelah integrasi database.

📁 Project Structure

omnistack/
├── app/
│   ├── layout.tsx               # Root layout (ThemeProvider, TooltipProvider)
│   ├── page.tsx                 # Landing page
│   ├── globals.css              # Theme tokens + global styles
│   ├── (dashboard)/             # Authenticated pages (route group)
│   │   ├── layout.tsx           # Dashboard shell (Sidebar + TopNav)
│   │   ├── dashboard/           # Overview dashboard
│   │   ├── projects/            # ✅ Project management (CRUD + RBAC mock)
│   │   │   └── _components/     # Page-specific components
│   │   ├── [id]/                # Detail proyek
│   │   ├── ai-architect/        # AI Architect (WIP)
│   │   ├── ai-reviewer/         # AI Code Reviewer (WIP)
│   │   ├── deployments/         # Deployment history
│   │   ├── finops/              # Cost tracking
│   │   ├── gitops/              # GitOps / preview environments
│   │   ├── monitoring/          # Observability
│   │   ├── error-tracking/      # Error tracking
│   │   ├── admin/               # Admin-only pages (RBAC: ADMIN)
│   │   └── settings/            # Settings
│   ├── login/                   # Login (mock auth + quick-login)
│   └── register/                # Registrasi (mock)
├── components/
│   ├── ui/                      # shadcn/ui Base UI primitives (DO NOT EDIT)
│   ├── app-sidebar.tsx          # Main sidebar
│   ├── top-nav.tsx              # Top navigation bar
│   ├── project-status-badge.tsx # Badge status (Live/Building/Failed/Stopped)
│   └── theme-provider.tsx       # Dark/light mode provider
├── lib/
│   ├── auth-context.tsx         # Mock auth context (localStorage)
│   ├── mock-data.ts             # Mock data + RBAC helpers
│   └── utils.ts                 # Utilities (cn, dll)
├── hooks/                       # Custom React hooks
├── docs/kg/                     # Knowledge graph markdown (AI agents)
└── .opencode/                   # AI agent infrastructure (lihat INFRASTRUCTURE.md)
    ├── skills/                  # 5 skill on-demand
    ├── agent/                   # Sub-agents (implementer, reviewer, curator)
    ├── command/                 # Commands (/mvp, /kg)
    └── memory/                  # Memory externalization (todo, decisions, errors)

🌿 Branching Strategy

Repo ini punya 4 branch, dan mereka membentuk satu garis lurus — bukan cabang-cabang yang paralel. Pahami ini dulu sebelum mulai kontribusi.

graph LR
    A["dev — legacy, MVP awal"] -->|"+17 commit: fitur UI/UX"| B["dev-1 — branch fitur AKTIF"]
    B -->|"PR #1–#7, merge"| C["main — produksi"]
    C -->|"push ke main, CI otomatis"| D["gh-pages — artifact static export"]
    D --> E["Live: yogiex.github.io/omnistack"]

📌 Fungsi Masing-masing Branch

Branch	Fungsi	Ditulis oleh	Kapan berubah	Status
`dev`	Snapshot MVP awal: landing page, auth flow, dashboard shell	—	Tidak lagi sejak 21 Agu 2026	☠️ Legacy
`dev-1`	Branch fitur aktif. Semua fitur baru dikerjakan di sini	Kamu	Setiap kali selesai fitur	🔶 Aktif — 1 commit di depan `main`
`main`	Hasil integrasi seluruh PR. Ini yang dipake user	Merge PR	Setelah PR #1–#7 di-merge	✅ Produksi
`gh-pages`	Output `npm run build` (static export)	GitHub Actions	Otomatis tiap push ke `main`	🤖 Otomatis — jangan edit manual

⚠️ Jebakan Nama: `dev` ≠ `dev-1`

Ini sumber kebingungan paling sering. Keduanya branch berbeda, bukan alias:

dev — branch MVP paling awal, total 5 commit, puncaknya masih "edit readme.md". Berhenti develop 21 Agustus 2026.
dev-1 — branch yang tumbuh dari dev, lalu dikasih suffix -1 karena dev sudah dipakai. Semua fitur setelah MVP (RBAC mock, AI Architect, FinOps, AI Code Reviewer, Cloud IDE, dsb.) ada di sini.

Semua isi dev sudah fully merged ke main, jadi dev tidak menyimpan apa pun yang belum ada di main. Aman dihapus:

git branch -d dev   # aman — sudah merged

🔁 Workflow Harian

# 1. Selalu mulai dari dev-1, bukan dev
git checkout dev-1
git pull origin dev-1

# 2. ... kerjakan fitur kamu, commit seperti biasa
git add .
git commit -m "feat(scope): description"
git push origin dev-1

# 3. Buka Pull Request dev-1 → main di GitHub, lalu merge

⛔ Kenapa Tidak Langsung Push ke `main`?

.github/workflows/deploy.yml memakai trigger:

on:
  push:
    branches: [main]   # ← push ke main = LANGSUNG deploy

Artinya setiap push ke main akan memicu build & deploy ke GitHub Pages. Kalau kamu bypass PR dan langsung push ke main, kode yang belum di-review langsung tayang ke user. Karena itu semua perubahan harus lewat PR dev-1 → main.

🏷️ Status Commit di Masing-masing Branch

Ref	Commit	Tanggal	Isi
`dev`	`3029daa`	21 Agu 2026	"edit readme.md 2" — punta MVP
`dev-1`	`7bb7714`	24 Agu 2026	`feat(logs)` — belum di-merge ke `main`
`main`	`69bc6b2`	24 Agu 2026	Merge PR #7 — produksi
`gh-pages`	`ea909d4`	24 Agu 2026	Build artifact dari `main`

Catatan: gh-pages di-force-orphan oleh CI, jadi riwayat git-nya dihapus tiap deploy. Jangan pernah commit manual ke branch ini.

🗺️ Roadmap

✅ Phase 1: Foundation (Q3 2026) - COMPLETED

Next.js 16 + shadcn/ui (Base UI) setup
Landing page komprehensif
Dashboard shell + sidebar RBAC-aware
RBAC mock system (ADMIN/USER/VIEWER) via lib/mock-data.ts
Mock auth (lib/auth-context.tsx, localStorage)
AI agent infrastructure: skills, sub-agents, /mvp command, memory, knowledge graph (docs/kg/)

🚧 Phase 2: Core Features (Q4 2026) - IN PROGRESS

Project CRUD (mock UI dengan RBAC)
AI Architect real integration
NextAuth.js v5 + GitHub OAuth (ganti mock auth)
Prisma + PostgreSQL (ganti mock data)
Cloud IDE
User management UI (admin)

🔮 Phase 3: Infrastructure (Q1 2027) - PLANNED

🌟 Phase 4: Enterprise (Q2 2027) - PLANNED

🤝 Contributing

Sebelum mulai: baca 🌿 Branching Strategy dulu. Semua fitur baru dikerjakan di branch dev-1, lalu di-merge ke main via PR. Jangan push langsung ke main — itu akan memicu deploy otomatis.

Kontribusi diterima! Baca dulu:

CONVENTIONS.md — Code conventions
ARCHITECTURE.md — System design
DESIGN.md — Design system
AGENTS.md — AI agent guidelines
INFRASTRUCTURE.md — AI agent infrastructure (skills, agents, KG, memory)

📚 Documentation

Document	Purpose
README.md	This file
ARCHITECTURE.md	System design
CONVENTIONS.md	Code conventions
DESIGN.md	Design system
AGENTS.md	AI agent guide
INFRASTRUCTURE.md	AI agent infrastructure
CHANGELOG.md	Version history
docs/audits/PROJECT-AUDIT.md	🔍 Audit codebase (289 temuan)

🙏 Acknowledgments

Next.js — The React Framework
shadcn/ui — Beautiful components
NextAuth.js — Authentication
Prisma — Database ORM
Tailwind CSS — Utility-first CSS
Lucide — Beautiful icons
Linear & Vercel — UX inspiration

📄 License

MIT License — lihat LICENSE.

Your Stack. Your Rules. Our Engine.

Built with ❤️ for developers, by developers.

🚀 Get Started • 🎭 Test Roles • 📖 Read Docs

Name		Name	Last commit message	Last commit date
.github/workflows		.github/workflows
.opencode		.opencode
app		app
components		components
docker		docker
docs		docs
hooks		hooks
lib		lib
public		public
scripts		scripts
.dockerignore		.dockerignore
.env.example		.env.example
.gitignore		.gitignore
AGENTS.md		AGENTS.md
ARCHITECTURE.md		ARCHITECTURE.md
CHANGELOG.md		CHANGELOG.md
CLAUDE.md		CLAUDE.md
CONVENTIONS.md		CONVENTIONS.md
DESIGN.md		DESIGN.md
Dockerfile		Dockerfile
INFRASTRUCTURE.md		INFRASTRUCTURE.md
README.docker.md		README.docker.md
README.md		README.md
ai-code-reviewer-page.md		ai-code-reviewer-page.md
components.json		components.json
docker-compose.yml		docker-compose.yml
eslint.config.mjs		eslint.config.mjs
next-update-fitur-competitor-v0-vercel-cyberpanel.md		next-update-fitur-competitor-v0-vercel-cyberpanel.md
next-update-fitur-git-integration.md		next-update-fitur-git-integration.md
next.config.ts		next.config.ts
package-lock.json		package-lock.json
package.json		package.json
postcss.config.mjs		postcss.config.mjs
qwen-result.txt		qwen-result.txt
qwen-uiux-page-finops.md		qwen-uiux-page-finops.md
tsconfig.json		tsconfig.json

Latest commit

History

Folders and files

Repository files navigation

🚀 OmniStack

The Developer Operating System

📖 Tentang OmniStack

🎭 Role System & Access Control

👥 Overview Roles

👑 ADMIN — Super Administrator

✅ Permissions (What They Can Do)

❌ Restrictions (What They Cannot Do)

🎯 Use Case

🧪 Test Account

📍 Post-Login Destination

👨‍💻 USER — Standard Developer

✅ Permissions (What They Can Do)

❌ Restrictions (What They Cannot Do)

🎯 Use Case

🧪 Test Account

📍 Post-Login Destination

👁️ VIEWER — Read-Only Observer

✅ Permissions (What They Can Do)

❌ Restrictions (What They Cannot Do)

🎯 Use Case

🧪 Test Account

📍 Post-Login Destination

🔐 Permission Matrix (Detail)

🛣️ Route Access Map

🎨 UI/UX Differences per Role

Sidebar Navigation

Button States

🧪 Testing the Roles

Quick Test Flow

API Testing with cURL

🔄 Role Transitions & Lifecycle

Default Role Assignment

Role Upgrade/Downgrade Flow

Safety Mechanisms

💼 Real-World Scenarios

Scenario 1: Startup Team (5 people)

Scenario 2: Software House (Agency)

Scenario 3: Enterprise

🛡️ Security Best Practices

For ADMINs

For USERs

For VIEWERs

📚 Related Documentation

🔧 Developer Guide: Checking Roles in Code

✨ Complete Feature Matrix

🤖 Pillar 1: AI-Powered Development

🎨 Pillar 2: Freedom Stack & Cloud IDE

🔄 Pillar 3: GitOps & CI/CD

🏗️ Pillar 4: Infrastructure & Scaling

📊 Pillar 5: Observability & FinOps

🛡️ Pillar 6: Security & Enterprise

🏗️ Architecture

High-Level System Design

Tech Stack

🎯 Use Cases

👨‍💻 Indie Developer

🚀 Startup Tech

🏢 Software House / Agency

🏛️ Enterprise / Government

⚔️ Comparison with Competitors

🚀 Quick Start

Prasyarat

Installation

Available Scripts

📁 Project Structure

🌿 Branching Strategy

📌 Fungsi Masing-masing Branch

⚠️ Jebakan Nama: dev ≠ dev-1

🔁 Workflow Harian

⛔ Kenapa Tidak Langsung Push ke main?

🏷️ Status Commit di Masing-masing Branch

🗺️ Roadmap

✅ Phase 1: Foundation (Q3 2026) - COMPLETED

🚧 Phase 2: Core Features (Q4 2026) - IN PROGRESS

🔮 Phase 3: Infrastructure (Q1 2027) - PLANNED

⚠️ Jebakan Nama: `dev` ≠ `dev-1`

⛔ Kenapa Tidak Langsung Push ke `main`?