Phase 1: chunk store, tile rendering pipeline, and Leaflet viewer

api: WS gateway with token auth (Postgres-backed servers table, seeded via
`bun run seed`), column-granularity chunk store (hand-written SQL
migrations, no drizzle-kit CLI — its config loader needs esbuild, which
doesn't install cleanly here), dirty-chunk Redis stream producer with
per-flush dedup, and a tile-serving route.

worker: consumes the dirty-chunk stream via a proper consumer group,
rasterizes each chunk's columns into a single-resolution top-down PNG
(static pre-Flattening block-id palette), uploads to MinIO, and upserts
the tile pointer.

frontend: barebones Leaflet 2D viewer (CRS.Simple, one native zoom level)
wired to /api/servers and /api/tiles.

Object storage: tiles live in a dedicated `mcmapper-tiles` bucket on the
existing shared MinIO instance (devstack-minio on octo-winsrv) instead of
a per-stack container, via a scoped access key limited to that one bucket
— see README's "Object storage" section. MINIO_SECRET_KEY is real and is
deliberately not committed; docker-compose layers an untracked .env over
.env.example for it.

Full pipeline verified end-to-end against live containers: WS auth ->
Postgres upsert -> deduped Redis dirty-chunk event -> worker rasterize ->
MinIO upload -> tile fetch through the api route, including from the
actual mod-side WS client (see MCMapper-Mod's matching commit).

frontend/src/index.ts

@@ -2,15 +2,15 @@ import { Elysia } from "elysia";
 import pug from "pug";
 import { join } from "path";
 
-// Phase 0 skeleton: one server-rendered page. The real map viewer (Leaflet 2D + Babylon 3D
-// canvases, server selector, chat box, marker tool) lands starting Phase 1 — this just proves
-// the Pug+Tailwind+Alpine rendering pipeline end to end.
+// Phase 1: a barebones Leaflet 2D viewer (see public/js/map.js). Babylon 3D canvas, chat box,
+// marker tool, and admin panel land in later phases per the plan's phased delivery.
 const renderIndex = pug.compileFile(join(import.meta.dir, "views/index.pug"));
 
 const app = new Elysia()
   .get("/", () => new Response(renderIndex({}), { headers: { "Content-Type": "text/html" } }))
   .get("/health", () => ({ status: "ok" }))
   .get("/css/tailwind.css", () => Bun.file(join(import.meta.dir, "public/css/tailwind.css")))
+  .get("/js/map.js", () => Bun.file(join(import.meta.dir, "public/js/map.js")))
   .listen(Number(process.env.PORT ?? 3001));
 
 console.log(`[frontend] listening on :${app.server?.port}`);

frontend/src/public/js/map.js

@@ -0,0 +1,38 @@
+// Barebones Leaflet viewer (Phase 1). No auth/marker/chat UI yet — those are Phase 3/4.
+//
+// Tiles are one Minecraft chunk (16x16 blocks) each, upscaled to 256px, at a single native
+// zoom level (see api's tile route + worker/src/render/cpu.rs) — Leaflet stretches that one
+// native zoom to whatever zoom the user picks via `maxNativeZoom`/`minNativeZoom`.
+//
+// Coordinate mapping: Leaflet's CRS.Simple treats [lat, lng] as [y, x] with y growing upward
+// on screen. Minecraft's Z grows south (visually "down" on a conventional north-up map), so
+// tile y = -chunkZ here; the api negates it back to chunkZ when looking up the tile pointer
+// (see api/src/index.ts's /api/tiles route comment).
+function mapmapper() {
+  return {
+    loading: true,
+    server: null,
+    leaflet: null,
+
+    async init() {
+      const servers = await fetch("/api/servers").then((r) => r.json());
+      this.loading = false;
+      this.server = servers[0] ?? null;
+
+      this.leaflet = L.map("map", { crs: L.CRS.Simple, minZoom: -4, maxZoom: 6 });
+      this.leaflet.setView([0, 0], 0);
+
+      if (this.server) {
+        L.tileLayer(`/api/tiles/${this.server.id}/0/{z}/{x}/{y}.png`, {
+          tileSize: 256,
+          minNativeZoom: 0,
+          maxNativeZoom: 0,
+          noWrap: true,
+          errorTileUrl:
+            "data:image/svg+xml;base64," +
+            btoa('<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256"><rect width="256" height="256" fill="#1e1e28"/></svg>'),
+        }).addTo(this.leaflet);
+      }
+    },
+  };
+}

frontend/src/views/index.pug

@@ -5,8 +5,19 @@ html(lang="en")
     meta(name="viewport" content="width=device-width, initial-scale=1")
     title MCMapper
     link(rel="stylesheet" href="/css/tailwind.css")
+    link(rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css")
     script(defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js")
-  body.bg-neutral-900.text-neutral-100.min-h-screen.flex.items-center.justify-center
-    div(x-data="{ ready: true }")
-      h1.text-2xl.font-semibold MCMapper
-      p.text-neutral-400(x-show="ready") Backend scaffold is up. Map viewer lands in Phase 1.
+    script(src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js")
+    style.
+      html, body, #map { height: 100%; margin: 0; }
+  body.bg-neutral-900.text-neutral-100
+    div#app.h-screen.flex.flex-col(x-data="mapmapper()" x-init="init()")
+      header.px-4.py-2.flex.items-center.gap-4.border-b.border-neutral-700
+        h1.text-lg.font-semibold MCMapper
+        span.text-sm.text-neutral-400(x-show="!loading && server")
+          | Viewing:
+          span(x-text="server?.name")
+        span.text-sm.text-neutral-500(x-show="loading") loading servers…
+        span.text-sm.text-red-400(x-show="!loading && !server") No server registered yet — see backend README (bun run seed).
+      div#map.flex-1
+    script(src="/js/map.js")