codehava-agent-kit 1.0.0

package/templates/.agent/skills/webapp-testing/scripts/playwright_runner.py

@@ -0,0 +1,173 @@
+#!/usr/bin/env python3
+"""
+Skill: webapp-testing
+Script: playwright_runner.py
+Purpose: Run basic Playwright browser tests
+Usage: python playwright_runner.py <url> [--screenshot]
+Output: JSON with page info, health status, and optional screenshot path
+Note: Requires playwright (pip install playwright && playwright install chromium)
+Screenshots: Saved to system temp directory (auto-cleaned by OS)
+"""
+import sys
+import json
+import os
+import tempfile
+from datetime import datetime
+
+# Fix Windows console encoding for Unicode output
+try:
+    sys.stdout.reconfigure(encoding='utf-8', errors='replace')
+    sys.stderr.reconfigure(encoding='utf-8', errors='replace')
+except AttributeError:
+    pass  # Python < 3.7
+
+try:
+    from playwright.sync_api import sync_playwright
+    PLAYWRIGHT_AVAILABLE = True
+except ImportError:
+    PLAYWRIGHT_AVAILABLE = False
+
+
+def run_basic_test(url: str, take_screenshot: bool = False) -> dict:
+    """Run basic browser test on URL."""
+    if not PLAYWRIGHT_AVAILABLE:
+        return {
+            "error": "Playwright not installed",
+            "fix": "pip install playwright && playwright install chromium"
+        }
+    
+    result = {
+        "url": url,
+        "timestamp": datetime.now().isoformat(),
+        "status": "pending"
+    }
+    
+    try:
+        with sync_playwright() as p:
+            browser = p.chromium.launch(headless=True)
+            context = browser.new_context(
+                viewport={"width": 1280, "height": 720},
+                user_agent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36"
+            )
+            page = context.new_page()
+            
+            # Navigate
+            response = page.goto(url, wait_until="networkidle", timeout=30000)
+            
+            # Basic info
+            result["page"] = {
+                "title": page.title(),
+                "url": page.url,
+                "status_code": response.status if response else None
+            }
+            
+            # Health checks
+            result["health"] = {
+                "loaded": response.ok if response else False,
+                "has_title": bool(page.title()),
+                "has_h1": page.locator("h1").count() > 0,
+                "has_links": page.locator("a").count() > 0,
+                "has_images": page.locator("img").count() > 0
+            }
+            
+            # Console errors
+            console_errors = []
+            page.on("console", lambda msg: console_errors.append(msg.text) if msg.type == "error" else None)
+            
+            # Performance metrics
+            result["performance"] = {
+                "dom_content_loaded": page.evaluate("window.performance.timing.domContentLoadedEventEnd - window.performance.timing.navigationStart"),
+                "load_complete": page.evaluate("window.performance.timing.loadEventEnd - window.performance.timing.navigationStart")
+            }
+            
+            # Screenshot - uses system temp directory (cross-platform, auto-cleaned)
+            if take_screenshot:
+                # Cross-platform: Windows=%TEMP%, Linux/macOS=/tmp
+                screenshot_dir = os.path.join(tempfile.gettempdir(), "maestro_screenshots")
+                os.makedirs(screenshot_dir, exist_ok=True)
+                screenshot_path = os.path.join(screenshot_dir, f"screenshot_{datetime.now().strftime('%Y%m%d_%H%M%S')}.png")
+                page.screenshot(path=screenshot_path, full_page=True)
+                result["screenshot"] = screenshot_path
+                result["screenshot_note"] = "Saved to temp directory (auto-cleaned by OS)"
+            
+            # Element counts
+            result["elements"] = {
+                "links": page.locator("a").count(),
+                "buttons": page.locator("button").count(),
+                "inputs": page.locator("input").count(),
+                "images": page.locator("img").count(),
+                "forms": page.locator("form").count()
+            }
+            
+            browser.close()
+            
+            result["status"] = "success" if result["health"]["loaded"] else "failed"
+            result["summary"] = "[OK] Page loaded successfully" if result["status"] == "success" else "[X] Page failed to load"
+            
+    except Exception as e:
+        result["status"] = "error"
+        result["error"] = str(e)
+        result["summary"] = f"[X] Error: {str(e)[:100]}"
+    
+    return result
+
+
+def run_accessibility_check(url: str) -> dict:
+    """Run basic accessibility check."""
+    if not PLAYWRIGHT_AVAILABLE:
+        return {"error": "Playwright not installed"}
+    
+    result = {"url": url, "accessibility": {}}
+    
+    try:
+        with sync_playwright() as p:
+            browser = p.chromium.launch(headless=True)
+            page = browser.new_page()
+            page.goto(url, wait_until="networkidle", timeout=30000)
+            
+            # Basic a11y checks
+            result["accessibility"] = {
+                "images_with_alt": page.locator("img[alt]").count(),
+                "images_without_alt": page.locator("img:not([alt])").count(),
+                "buttons_with_label": page.locator("button[aria-label], button:has-text('')").count(),
+                "links_with_text": page.locator("a:has-text('')").count(),
+                "form_labels": page.locator("label").count(),
+                "headings": {
+                    "h1": page.locator("h1").count(),
+                    "h2": page.locator("h2").count(),
+                    "h3": page.locator("h3").count()
+                }
+            }
+            
+            browser.close()
+            result["status"] = "success"
+            
+    except Exception as e:
+        result["status"] = "error"
+        result["error"] = str(e)
+    
+    return result
+
+
+if __name__ == "__main__":
+    if len(sys.argv) < 2:
+        print(json.dumps({
+            "error": "Usage: python playwright_runner.py <url> [--screenshot] [--a11y]",
+            "examples": [
+                "python playwright_runner.py https://example.com",
+                "python playwright_runner.py https://example.com --screenshot",
+                "python playwright_runner.py https://example.com --a11y"
+            ]
+        }, indent=2))
+        sys.exit(1)
+    
+    url = sys.argv[1]
+    take_screenshot = "--screenshot" in sys.argv
+    check_a11y = "--a11y" in sys.argv
+    
+    if check_a11y:
+        result = run_accessibility_check(url)
+    else:
+        result = run_basic_test(url, take_screenshot)
+    
+    print(json.dumps(result, indent=2))

package/templates/.agent/skills/xendit-integration/SKILL.md

@@ -0,0 +1,100 @@
+---
+name: xendit-integration
+description: |
+  Use when working with Xendit payment integration: creating payment links,
+  handling webhooks, implementing split payment, or managing disbursements.
+  Triggers on "xendit", "payment", "invoice", "webhook", "split payment",
+  "disbursement", or "VA/QRIS/e-wallet". Do NOT use for non-payment features.
+---
+
+# Xendit Integration — Pola Wajib Project Ini
+
+## Client Setup (`lib/payment/xendit.ts`)
+
+```typescript
+import Xendit from 'xendit-node'
+export const xendit = new Xendit({ secretKey: process.env.XENDIT_SECRET_KEY! })
+```
+
+## Buat Payment Link dengan Split
+
+```typescript
+export async function createPayment(params: {
+  orderId: string
+  amount: number
+  email: string
+  description: string
+  subMerchantId?: string
+}) {
+  return xendit.Invoice.create({
+    externalID: params.orderId,
+    amount: params.amount,
+    payerEmail: params.email,
+    description: params.description,
+    // Split payment — hanya jika subMerchantId ada
+    ...(params.subMerchantId && {
+      forUserID: params.subMerchantId,
+      withFeeRule: process.env.XENDIT_FEE_RULE_ID,
+    }),
+    successRedirectURL: `${process.env.NEXT_PUBLIC_APP_URL}/payment/success`,
+    failureRedirectURL: `${process.env.NEXT_PUBLIC_APP_URL}/payment/failed`,
+  })
+}
+```
+
+## Webhook Handler (`app/api/payment/webhook/route.ts`)
+
+```typescript
+import { headers } from 'next/headers'
+import { paymentQueue } from '@/lib/queue'
+
+export async function POST(req: Request) {
+  // STEP 1: Verifikasi callback token — WAJIB, jangan skip
+  const callbackToken = (await headers()).get('x-callback-token')
+  if (callbackToken !== process.env.XENDIT_CALLBACK_TOKEN) {
+    return Response.json({ error: 'Unauthorized' }, { status: 403 })
+  }
+
+  const payload = await req.json()
+
+  // STEP 2: Enqueue ke BullMQ — JANGAN proses langsung (bisa timeout 30s)
+  await paymentQueue.add('process-webhook', payload, {
+    attempts: 3,
+    backoff: { type: 'exponential', delay: 1000 },
+  })
+
+  // STEP 3: Return 200 segera ke Xendit (mereka retry jika tidak dapat 200)
+  return Response.json({ received: true })
+}
+```
+
+## Status Payment
+
+```typescript
+// Status standar Xendit yang harus ditangani:
+type XenditStatus = 'PENDING' | 'PAID' | 'EXPIRED' | 'FAILED'
+
+// Di database, simpan:
+// - xendit_id (Invoice ID dari Xendit)
+// - xendit_external_id (externalID yang kita set)
+// - status (map dari XenditStatus)
+```
+
+## Aturan Wajib
+
+- SELALU verifikasi `x-callback-token` sebelum proses webhook apapun
+- SELALU simpan `xendit_id` dan `external_id` di database
+- JANGAN trust status dari client — always verify dari webhook
+- JANGAN proses webhook langsung di handler — gunakan BullMQ queue
+- Xendit retry webhook jika tidak dapat HTTP 200 dalam 30 detik
+
+## Testing di Sandbox
+
+```bash
+# Set di .env.local untuk development
+XENDIT_SECRET_KEY=xnd_development_...
+XENDIT_CALLBACK_TOKEN=test_callback_token_123
+
+# Test webhook via Xendit Dashboard:
+# Settings → Webhooks → Test → pilih event → send
+```

package/templates/.agent/snippets/@react-component-template.tsx

@@ -0,0 +1,29 @@
+// @ts-nocheck
+import React from 'react';
+
+interface ComponentProps {
+  /**
+   * Title text for the component.
+   */
+  title: string;
+}
+
+/**
+ * Standard Codehava React Component Template
+ * AI MUST ADHERE TO THIS RULE:
+ * 1. Dilarang melakukan fetch data langsung di komponen UI (presentational component). Fetch harus di parent atau via state-manager.
+ * 2. Wajib menggunakan struktur class Tailwind yang rapi dan konsisten.
+ */
+export default function StandardComponent({ title }: ComponentProps) {
+  return (
+    <div className="flex flex-col gap-4 p-4 rounded-xl shadow-sm border border-gray-100 bg-white">
+      <h2 className="text-xl font-bold text-gray-800 tracking-tight">
+        {title}
+      </h2>
+      <div className="text-gray-600 font-medium">
+        {/* Konten komponen di sini */}
+        Isi komponen
+      </div>
+    </div>
+  );
+}

package/templates/.agent/workflows/brainstorm.md

@@ -0,0 +1,113 @@
+---
+description: Structured brainstorming for projects and features. Explores multiple options before implementation.
+---
+
+# /brainstorm - Structured Idea Exploration
+
+$ARGUMENTS
+
+---
+
+## Purpose
+
+This command activates BRAINSTORM mode for structured idea exploration. Use when you need to explore options before committing to an implementation.
+
+---
+
+## Behavior
+
+When `/brainstorm` is triggered:
+
+1. **Understand the goal**
+   - What problem are we solving?
+   - Who is the user?
+   - What constraints exist?
+
+2. **Generate options**
+   - Provide at least 3 different approaches
+   - Each with pros and cons
+   - Consider unconventional solutions
+
+3. **Compare and recommend**
+   - Summarize tradeoffs
+   - Give a recommendation with reasoning
+
+---
+
+## Output Format
+
+```markdown
+## 🧠 Brainstorm: [Topic]
+
+### Context
+[Brief problem statement]
+
+---
+
+### Option A: [Name]
+[Description]
+
+✅ **Pros:**
+- [benefit 1]
+- [benefit 2]
+
+❌ **Cons:**
+- [drawback 1]
+
+📊 **Effort:** Low | Medium | High
+
+---
+
+### Option B: [Name]
+[Description]
+
+✅ **Pros:**
+- [benefit 1]
+
+❌ **Cons:**
+- [drawback 1]
+- [drawback 2]
+
+📊 **Effort:** Low | Medium | High
+
+---
+
+### Option C: [Name]
+[Description]
+
+✅ **Pros:**
+- [benefit 1]
+
+❌ **Cons:**
+- [drawback 1]
+
+📊 **Effort:** Low | Medium | High
+
+---
+
+## 💡 Recommendation
+
+**Option [X]** because [reasoning].
+
+What direction would you like to explore?
+```
+
+---
+
+## Examples
+
+```
+/brainstorm authentication system
+/brainstorm state management for complex form
+/brainstorm database schema for social app
+/brainstorm caching strategy
+```
+
+---
+
+## Key Principles
+
+- **No code** - this is about ideas, not implementation
+- **Visual when helpful** - use diagrams for architecture
+- **Honest tradeoffs** - don't hide complexity
+- **Defer to user** - present options, let them decide

package/templates/.agent/workflows/create.md

@@ -0,0 +1,59 @@
+---
+description: Create new application command. Triggers App Builder skill and starts interactive dialogue with user.
+---
+
+# /create - Create Application
+
+$ARGUMENTS
+
+---
+
+## Task
+
+This command starts a new application creation process.
+
+### Steps:
+
+1. **Request Analysis**
+   - Understand what the user wants
+   - If information is missing, use `conversation-manager` skill to ask
+
+2. **Project Planning**
+   - Use `project-planner` agent for task breakdown
+   - Determine tech stack
+   - Plan file structure
+   - Create plan file and proceed to building
+
+3. **Application Building (After Approval)**
+   - Orchestrate with `app-builder` skill
+   - Coordinate expert agents:
+     - `database-architect` → Schema
+     - `backend-specialist` → API
+     - `frontend-specialist` → UI
+
+4. **Preview**
+   - Start with `auto_preview.py` when complete
+   - Present URL to user
+
+---
+
+## Usage Examples
+
+```
+/create blog site
+/create e-commerce app with product listing and cart
+/create todo app
+/create Instagram clone
+/create crm system with customer management
+```
+
+---
+
+## Before Starting
+
+If request is unclear, ask these questions:
+- What type of application?
+- What are the basic features?
+- Who will use it?
+
+Use defaults, add details later.

package/templates/.agent/workflows/db-migrate.md

@@ -0,0 +1,26 @@
+---
+description: Jalankan database migration Prisma di production via Coolify. Gunakan sebelum setiap deploy yang ada perubahan schema.
+---
+
+1. Pastikan kamu sudah commit dan push semua perubahan schema.prisma ke Git.
+
+2. Buat backup database production sebelum migration.
+// turbo
+3. Run `git status` untuk konfirmasi tidak ada perubahan yang belum di-commit.
+
+4. Tampilkan migration yang pending dengan menjalankan:
+   `npx prisma migrate status`
+   Tunggu hasilnya dan tunjukkan ke user.
+
+5. Minta konfirmasi user sebelum lanjut: "Migration di atas akan dijalankan. Lanjutkan? (yes/no)"
+
+6. Jika user konfirmasi yes, jalankan migration:
+   `npx prisma migrate deploy`
+   Jangan gunakan `prisma migrate dev` — itu hanya untuk development.
+
+7. Verifikasi migration berhasil dengan menjalankan:
+   `npx prisma migrate status`
+   Pastikan tidak ada migration yang pending.
+
+8. Update Development Log di `docs/06-DEVELOPMENT-LOG.md` dengan entry baru:
+   `[DEPLOY] Migration [nama migration] dijalankan di production - [tanggal]`

package/templates/.agent/workflows/debug.md

@@ -0,0 +1,103 @@
+---
+description: Debugging command. Activates DEBUG mode for systematic problem investigation.
+---
+
+# /debug - Systematic Problem Investigation
+
+$ARGUMENTS
+
+---
+
+## Purpose
+
+This command activates DEBUG mode for systematic investigation of issues, errors, or unexpected behavior.
+
+---
+
+## Behavior
+
+When `/debug` is triggered:
+
+1. **Gather information**
+   - Error message
+   - Reproduction steps
+   - Expected vs actual behavior
+   - Recent changes
+
+2. **Form hypotheses**
+   - List possible causes
+   - Order by likelihood
+
+3. **Investigate systematically**
+   - Test each hypothesis
+   - Check logs, data flow
+   - Use elimination method
+
+4. **Fix and prevent**
+   - Apply fix
+   - Explain root cause
+   - Add prevention measures
+
+---
+
+## Output Format
+
+```markdown
+## 🔍 Debug: [Issue]
+
+### 1. Symptom
+[What's happening]
+
+### 2. Information Gathered
+- Error: `[error message]`
+- File: `[filepath]`
+- Line: [line number]
+
+### 3. Hypotheses
+1. ❓ [Most likely cause]
+2. ❓ [Second possibility]
+3. ❓ [Less likely cause]
+
+### 4. Investigation
+
+**Testing hypothesis 1:**
+[What I checked] → [Result]
+
+**Testing hypothesis 2:**
+[What I checked] → [Result]
+
+### 5. Root Cause
+🎯 **[Explanation of why this happened]**
+
+### 6. Fix
+```[language]
+// Before
+[broken code]
+
+// After
+[fixed code]
+```
+
+### 7. Prevention
+🛡️ [How to prevent this in the future]
+```
+
+---
+
+## Examples
+
+```
+/debug login not working
+/debug API returns 500
+/debug form doesn't submit
+/debug data not saving
+```
+
+---
+
+## Key Principles
+
+- **Ask before assuming** - get full error context
+- **Test hypotheses** - don't guess randomly
+- **Explain why** - not just what to fix
+- **Prevent recurrence** - add tests, validation

package/templates/.agent/workflows/deploy.md

@@ -0,0 +1,35 @@
+---
+description: Deploy ke production via Coolify webhook. Jalankan setelah semua tests pass dan PR merged ke main.
+---
+
+1. Pastikan kamu di branch `main` dan sudah pull latest:
+// turbo
+   `git checkout main && git pull origin main`
+
+2. Jalankan type check dan lint:
+// turbo
+   `npm run type-check && npm run lint`
+   Jika ada error, STOP dan fix dulu sebelum lanjut.
+
+3. Cek apakah ada migration database yang perlu dijalankan.
+   Jika ada perubahan schema, jalankan workflow `/db-migrate` dulu.
+
+4. Tampilkan ringkasan commit sejak deploy terakhir:
+// turbo
+   `git log --oneline $(git describe --tags --abbrev=0)..HEAD`
+
+5. Minta konfirmasi user: "Commit di atas akan di-deploy ke production. Lanjutkan? (yes/no)"
+
+6. Jika user konfirmasi yes, trigger Coolify deploy via webhook:
+// turbo
+   `curl -X POST -H "Authorization: Bearer $COOLIFY_TOKEN" "https://[IP-VPS]:8000/api/v1/deploy?uuid=$COOLIFY_APP_UUID"`
+
+7. Buka Coolify dashboard dan pantau proses deploy. URL: https://[IP-VPS]:8000
+
+8. Setelah deploy selesai, cek health endpoint:
+// turbo
+   `curl https://[domain].com/api/health`
+   Response harus: `{"status":"ok","db":"ok","redis":"ok"}`
+
+9. Update Development Log di `docs/06-DEVELOPMENT-LOG.md`:
+   `[DEPLOY] Deploy production [tanggal] - [ringkasan fitur yang di-deploy]`

package/templates/.agent/workflows/dev-reset.md

@@ -0,0 +1,40 @@
+---
+description: Reset environment development — bersihkan node_modules, restart containers, reset database dev. Gunakan saat ada dependency issue atau mau mulai dari awal.
+---
+
+1. Tanya user: "Reset database juga? Data dev akan hilang. (yes/no)"
+
+2. Stop dan bersihkan containers:
+// turbo
+   `docker compose down -v`
+
+3. Bersihkan node_modules dan cache:
+// turbo
+   `rm -rf apps/web/node_modules apps/web/.next && npm cache clean --force`
+
+4. Reinstall dependencies:
+// turbo
+   `npm install`
+
+5. Start containers baru:
+// turbo
+   `docker compose up -d`
+   Tunggu sampai postgres dan redis healthy (sekitar 10 detik).
+
+6. Jalankan Prisma migration:
+// turbo
+   `npx prisma migrate dev`
+
+7. Jika user tadi menjawab "yes" untuk reset database, jalankan seed:
+// turbo
+   `npx prisma db seed`
+
+8. Generate Prisma client:
+// turbo
+   `npx prisma generate`
+
+9. Jalankan type check untuk pastikan semua baik:
+// turbo
+   `npm run type-check`
+
+10. Tampilkan ringkasan: "Environment reset selesai. Siap development."