▸~/technical

Technical mode.

Architecture, decisions and trade-offs — only what’s true. Mission pages now open their technical layer by default.

01MISSION 000 · THIS SITE

How PRINCE.EXE is built.

This website: a portfolio built as a personal operating system, with an AI assistant that answers only from verified portfolio data and refuses to guess.

CONTENT
- Typed /data modules
- Fact model: verified · unverified · required
RENDERING
- Next.js App Router
- Server components
- Static generation per module & mission
INTERACTION
- Client islands: boot, terminal, skill engine
- React ViewTransition
INTELLIGENCE
- Knowledge chunks
- BM25 retriever
- Refusal gate
- Claude · local fallback
QUALITY
- Vitest: data integrity, retrieval
- Playwright e2e + axe

FIG · PRINCE.EXE — SYSTEM LAYERS

WHY THIS STACK

Server-rendered routes put every word in the HTML for crawlers and screen readers; the OS layer is progressive enhancement.
React’s built-in ViewTransition handles route transitions, so there is no animation library in the bundle.

TRADE-OFFS

Lexical (BM25) retrieval instead of embeddings: the corpus is small and curated, so keyword retrieval is predictable, free and unit-testable. The Retriever interface lets an embedding store drop in later.
In-memory rate limiting is per server instance — fine for a portfolio, with a shared-store upgrade path documented.

PERFORMANCE

Three.js loads only after the page is idle, and only on capable devices; mobile and reduced-motion visitors get a static SVG.
The Ask Prince panel is code-split and loaded on first open.

ASK PRINCE · REQUEST PIPELINE

01
QUESTION
≤ 500 chars, validated with zod
02
RATE LIMIT
10 requests / 10 min / IP
03
RETRIEVE
BM25 over verified chunks only
04
GATE
top score ≥ 2.2 · no personal topics · named terms must exist
05
ANSWER
Claude, grounded on top chunks — or a local extract with no model
06
EVIDENCE
every answer links to the pages it came from

API SURFACE

POST	/api/ask	Ask Prince. NDJSON stream: meta (evidence, retrieval trace) → text deltas → done. 400 / 429 on bad input or rate limit.
POST	/api/contact	Validated contact form with honeypot and rate limit. Sends via Resend when configured; otherwise 503 → mailto fallback.
GET	/sitemap.xml · /robots.txt	Generated from the same data as the pages.

02MISSION 001 · AVRLABS

Artabia →

WEB CLIENT
- React app
- Artist dashboard
- AR viewer · “View it in your space”
3D GALLERIES
- Unity WebGL builds × 6 themes
- WebXR manager
- webxr-polyfill fallback
SERVICES
- Node.js backend
- Digital asset management
- AI-powered features
DELIVERY
- Brotli-compressed framework builds
- Per-gallery build artefacts
UNVERIFIEDVERIFY — Unverified
- IPFS
- NFT minting pipeline

FIG · ARTABIA — SYSTEM LAYERS

React
Node.js
Unity WebGL
WebXR
webxr-polyfill
Brotli

IMPLEMENTATION NOTES

Each gallery is its own Unity WebGL build with a WebXR bridge exposing AR, VR, hit-testing and haptics to the page.

WHY THIS STACK

The galleries are Unity WebGL builds with a WebXR bridge, so the same scene runs as a normal 3D page or enters AR/VR where the device supports it.

TRADE-OFFS

Patching the compiled framework file instead of rebuilding seven Unity projects: fast and reversible (backups are kept), at the cost of needing an exact-match, self-verifying script.
Prerendering vs. moving to an SSR framework for the marketing site: both fix the root cause; prerendering is the smaller change, SSR the more durable one.

PERFORMANCE

Builds are served brotli-compressed; the patch recompresses at maximum quality so the fix ships at the same compression level as the original.

IMPLEMENTATION

Guards, in order: skip if already patched → exactly one match per site → syntax gate → backup → write → read back and compare.

03MISSION 003 · PERSONAL PROJECT

Job Agent →

INTERFACE
- apps/web · React + Vite dashboard
- Live agent log over SSE
API
- apps/server · Express
- Agent orchestration
- Job-source adapters
AGENT
- State machine
- Page & question observers
- Interaction engine
- Navigation
- Debug recorder
INTELLIGENCE
- AIProvider → OpenAI-compatible | Mock
- Ranking · dedupe · field mapping
DATA
- Prisma
- PostgreSQL
TEST BED
- apps/mock-career-site
- Every hard form pattern, one route each

FIG · JOB AGENT — SYSTEM LAYERS

TypeScript
React
Vite
Express
Server-Sent Events
Playwright (Chromium)
Prisma
PostgreSQL
Docker Compose
Vitest
OpenAI-compatible LLM API

IMPLEMENTATION NOTES

Every browser interaction goes through one InteractionEngine: it fills a field, reads it back and retries with a different strategy if the read-back disagrees.
Application state survives every page change and is persisted after each transition, so a server restart can resume a run.

WHY THIS STACK

Playwright drives real Chromium with a persistent profile, so browser sessions live in the profile, not the database — no website passwords are stored.
Server-Sent Events stream every agent action to the dashboard as it happens.

TRADE-OFFS

Semi-automatic by default with auto-submit off: slower than a fully autonomous agent, but no application leaves without a human seeing it.
A pluggable AIProvider with a mock implementation, so the whole pipeline — tests included — runs without an API key.

PERFORMANCE

Action, retry, navigation and time limits are enforced on every run.

IMPLEMENTATION

New job boards are JobSourceAdapter implementations; a site that blocks automation returns BLOCKED_REQUIRES_USER instead of attempting evasion.

04MISSION 002 · AVRLABS

ARviewz →

WEB CLIENT
- React app
- Three.js 3D viewer
- AR view
API
- Node.js
- REST APIs
CLOUD
- Cloud integrations
UNVERIFIEDVERIFY — Unverified
- WebXR / AR.js
- AWS S3 asset delivery

FIG · ARVIEWZ — SYSTEM LAYERS

React
Node.js
Three.js
REST APIs
Cloud integrations

WHY THIS STACK

Three.js renders the 3D product views directly in the browser — no native app to install.

TRADE-OFFS

[TECHNICAL TRADEOFFS REQUIRED]

PERFORMANCE

[PERFORMANCE WORK REQUIRED]

IMPLEMENTATION

[IMPLEMENTATION DETAILS REQUIRED]