← Home

Architecture demo

Each card exercises a different layer of the hexagonal + Next.js stack. Open DevTools Network to see Server Action POSTs and check the terminal for pino log output.

Server Component

Server layer

Rendered on the server. Calls domain adapters directly — no client JavaScript required for this block.

Rendered at
2026-08-09T16:21:53.969Z
Node
v22.23.2
Next.js
16.2.12
Logging adapter
pino-console-adapter
Client ComponentViewModel

ViewModel layer

Client component subscribes via useSyncExternalStore. Actions call registered ports → Server Actions → server adapters → domain.

Status
idle
Client ComponentServer Action

Server Action layer

Form uses useActionState with a "use server" action — no ViewModel port registration needed for this direct path.

Request flow

Server Component
  └─ getServerRuntimeInfo() → @agent-sandbox/server-adapters → LoggingPort

Client + ViewModel
  └─ useLogging() → runSmokeTestLog()
       └─ getLoggingPorts().smokeTestLog
            └─ smokeTestLogRpc ("use server")
                 └─ createLoggingAdapter() → domain Result<T,E>

Client + useActionState
  └─ greetFormAction ("use server")
       └─ createLoggingAdapter() → domain Result<T,E>