Engineering

About this codebase

Hand-written stack. 9,235 LoC of curated source on display across 8 modules. Every Source button opens the actual code that powers the panel above it.

Live system stats

Sessions

—

Injections

—

Threats

—

Blocked

—

Uptime

—

DB SSE Geo WebContainer

Architecture overview

The application is a Next.js 14 App Router project split into seven modules. Each module has its own route, its own lib/ subtree (the actual algorithm), and a UI layer that wires the algorithm to React state. The UI never owns logic that we’d want to test — it always delegates to a typed function in lib/. The scripts/collect-sources.mjs script runs as a prebuild step, snapshots the curated source files into lib/sources.generated.ts, and the SourceDrawer reads from that artifact at runtime — so what you see is exactly what shipped.

From-scratch modules (LoC)

takeover

Takeover Engine

6 files · 1347 LoC

vault

Session Vault

6 files · 936 LoC

runtime

Live Runtime

3 files · 894 LoC

bridge

Bridge Monitor

6 files · 1004 LoC

threats

Threat Intelligence

10 files · 981 LoC

agent

Agent Core

11 files · 1348 LoC

ast

AST Lab

9 files · 1728 LoC

shell

Shell & Source Drawer

10 files · 998 LoC

Dependencies (and why each one earns its keep)

Package	Why
next 14	App Router for code-split routes; built-in COOP/COEP header config for WebContainer.
react 18	Concurrent rendering primitives; suspense boundaries for the source drawer.
typescript 5 (strict)	Discriminated unions for AST nodes and agent events; zero `any`.
tailwindcss 3	Atomic styling for fast iteration; no runtime CSS-in-JS cost.
framer-motion 11	Page transitions and source drawer; no custom animation engine needed.
lucide-react	Tree-shakeable SVG icon set; ~1KB per icon used.
@codemirror/* + @uiw/react-codemirror	Read-only code viewer in the source drawer; mature TS/JS highlighting.
@webcontainer/api	Genuine in-browser Node.js sandbox. We wrote the orchestrator, not the runtime.
geist	Variable font shipped as a single file; no Google-fonts CSS round-trip.

Comparison table — concern by concern

Concern	Our approach	Framework rejected	Why
Agent loop	lib/agent/loop.ts — 170 LoC async generator with explicit retry on validation fail	Langchain / LlamaIndex	We need predictable control flow, typed events, and the ability to swap the LLM transport in 1 line. Frameworks force a programming model on you and obscure the loop.
Structured outputs	lib/agent/structured.ts — 180 LoC subset JSON-schema validator with friendly errors	zod / ajv	No external schema language; the same schema we send to the model is the one we validate locally. Smaller surface area, easier to extend with model-specific quirks.
AST manipulation	lib/ast/* — full tokenizer/parser/transformer/codegen, ~900 LoC, fully typed	Babel / Acorn / SWC	For our use case (instrumentation, codemods on a known dialect) we want the AST shape we want, not the union of every JS proposal. Build is faster, debugging is direct.
Session isolation	lib/vault/session.ts — Proxy-based context binding that throws CrossContextError	iframe sandbox / dedicated worker	Both have their place; in-process Proxy is the right primitive for soft isolation in a single tab. We compose it with WebContainer for hard isolation when needed.
WebView <-> native bridge	lib/bridge/protocol.ts — typed envelopes, id correlation, timeout, backpressure	react-native-webview event bus	Vendor APIs assume their world. We standardise on a Transport interface so the same code talks to postMessage, iOS, Android, or a unit test.
Threat rules	lib/threats/rules.ts — typed `when … then severity=…` rule objects	Drools-style CEP engines	Every rule fits on one screen and is type-checked against the Event union. Reviewers can audit the entire policy in 60 seconds.
In-browser Node.js	lib/runtime/container.ts — orchestrator with explicit COOP/COEP preflight and diagnostics	(no rejection) — uses @webcontainer/api	WebContainer is the runtime. We wrote the orchestrator: boot, install, run, request, log streaming, diagnostic-driven error reporting.