zlh-grind/CONSTRAINTS.md

2.5 KiB

ZeroLagHub — Frontend Constraints (ZLH Grind)

These constraints are non-negotiable.
They exist to prevent architectural drift, instability, and "demo-ware" UI patterns.

Runtime & Framework

  • Node.js 22 LTS
  • Next.js App Router
  • React 18
  • TypeScript
  • Build once → run many
  • No runtime builds
  • No PM2 during active development

SSR & Client Boundaries

  • Any file that touches:
    • window
    • document
    • location
    • WebSockets
    • xterm / DOM refs
      MUST be a client component with "use client" as the first line.
  • No browser globals at module scope in server components.
  • Prefer useEffect for browser-only logic.

UI Philosophy

  • Control-plane first, not marketing gimmicks.
  • Flat UI by default.
  • Subtlety beats spectacle.
  • Readability > novelty.

Explicitly Forbidden

  • Neon / RGB accent colors outside error states
  • Scanline / CRT / HUD overlays
  • Persistent 3D transforms or perspective UI
  • Excessive glow stacking
  • Clip-path bevel frames
  • Continuous decorative animations

Branding

  • Brand: ZeroLagHub
  • Shorthand: ZLH
  • Gaming heritage is acceptable, esports aesthetic is not.

Authentication Constraints (APIv2)

  • APIv2 authentication is stateless
  • JWT tokens are issued by APIv2 only
  • No CSRF protection is allowed
  • No cookies are allowed for auth
  • Portal stores tokens client-side (sessionStorage)
  • APIv1 and Pterodactyl auth patterns are forbidden

Network & Agent Architecture (CRITICAL)

Frontend Cannot Reach Agents

The Rule

  • Frontend must never call agents directly
  • All agent access flows through API
  • Container IPs are internal-only (10.x network)
  • No CORS headers exist on agents

Why This Is Enforced

  • Agents are not web services
  • They have no public network path
  • Direct calls would fail (no route)
  • API enforces auth, logging, rate limits

Correct Pattern

Frontend → API → Agent

Forbidden Pattern

Frontend → Agent (FAILS)

Common Violations

Adding CORS to Agents

  • Never add CORS headers to agents
  • Agents are not HTTP APIs
  • This breaks security model

Exposing Agent Ports

  • Do not proxy agent ports through Caddy
  • Do not expose container IPs
  • API is the only gateway

Frontend Shortcuts

  • No direct WebSocket to agent
  • No fetch() to container IPs
  • No "quick fixes" that bypass API

Enforcement

If a change violates these constraints:

  • The change must be reverted
  • The documentation takes precedence
  • AI tools must be corrected

These constraints override convenience.