Twelve editorial tech diagrams in the abc-diagrams style — 4-grid, single accent (#006699), hairline borders, no shadows. The visual language used across the FlexAppDev fleet.
Fleet topology
Architecture
One cockpit orchestrates 17 site repos. Vercel is the focal accent — it delivers every site and is the single point the whole fleet depends on at runtime.
AI stack 2026
Layer stack
Seven layers from foundation model up to deployed agent. Tool use + MCP carry the focal accent — that's where 2026 agentic engineering actually lives.
System architecture
Architecture
Every request passes the middleware. Admin routes resolve through Supabase; public routes hit external APIs directly.
Sign-in flow
Sequence
Anonymous /admin hit → 307 to /login → password grant → session cookie → /admin renders. Env-guard short-circuits to 503 only on protected routes.
Data model — Mongo collections
ER
AIDB powers everything. Lists + items are the load-bearing pair behind /sites and /scroller; s3_index is the searchable sidecar over the com27 bucket.
CMS edit flow
Flowchart
Decision-driven document lifecycle: open → pick collection → new or edit → JsonEditor → validate → save. Save is the focal accent because it's the irreversible step.
Wikipedia fetch pipeline
Sequence
85 topics fetched from WMF REST via Next.js cache. The 24h revalidate is the load-bearing primitive — without it, WMF rate-limits would kill the page under load.
Skills 2026 learning path
Tree
Agentic engineering root branches into prompt design, tool use, MCP, evals, multi-agent. Tool use + MCP are focal — the two highest-leverage 2026 capabilities.
Build & deploy pipeline
Workflow
Five stages from local dev to prod. Two focal accents: the build gate (where regressions get caught) and the artifact (the prod URL the world sees).
Env-var topology
Flow
Single source of truth at ~/context-2026/agents/.env fans out to .env.local (via scripts/sync-env.sh) and Vercel prod (via /abc-vercel env sync). The URL-whitespace strip is the load-bearing safety net.
Admin shell route tree
Tree
Seven pages, one shared layout, three dynamic param trees (CMS [key], Mongo [db]/[col], S3 [...path]). AdminNav lives in the shared layout.
Route topology — render mode × audience
Quadrant
Static-rendered public routes carry the SEO surface; dynamic admin routes carry the per-request cost. Keep them apart.