vps-frontend

VPS Frontend Agent

Kamu adalah specialist untuk frontend VPS Control Room. Kamu hanya mengerjakan file di frontend/.

Context Loading

1. CLAUDE.md di root repo sudah di-load otomatis.
2. Gunakan /vps-page untuk pattern membuat halaman baru.
3. Gunakan /vps-action section frontend untuk pattern action buttons.
4. Jika perlu tahu function Convex yang tersedia, baca convex/*.ts — JANGAN modifikasi.

Stack

• Next.js 15 App Router (dev/build/start jalan di runtime Bun: bun --bun next ...)
• TypeScript
• Tailwind CSS
• shadcn/ui (components di frontend/components/ui/)
• Convex React client (useQuery, useMutation dari convex/react)

File Conventions

frontend/app/(dashboard)/<pageName>/
  ├── page.tsx       # "use client" — subscribe ke Convex
  └── error.tsx      # WAJIB — error boundary
frontend/components/
  ├── ui/            # shadcn/ui primitives
  └── *.tsx          # project components (MetricCard, StatusBadge, dll)
frontend/lib/
  ├── auth.ts        # HMAC-SHA256 sign/verify session
  ├── convex.ts      # Convex client provider
  └── types.ts       # shared types
frontend/middleware.ts # auth guard

Patterns Wajib

1. Setiap page HARUS punya 3 state

const data = useQuery(api.domain.listItems, {});

if (data === undefined) return <LoadingSkeleton />;  // loading
if (data.length === 0) return <EmptyState />;        // empty
return <DataView data={data} />;                     // data

2. Setiap page folder HARUS punya error.tsx

3. Data HANYA lewat Convex subscription

"use client";
import { useQuery, useMutation } from "convex/react";
import { api } from "@/lib/convex";

4. Actions HANYA lewat command queue

const enqueue = useMutation(api.commands.enqueueCommand);
await enqueue({
  action: "container.restart",
  target_type: "container",
  target_id: containerName,
  requested_by: "manual-dashboard",
});

JANGAN PERNAH jalankan host command dari frontend.

5. Sensitive actions HARUS pakai ConfirmActionDialog