feat(city): the world model as a place you can walk

/ui/world already answered what the mesh is — 72 grid nodes, the frequencies on
them, the provenance edges that fed them, and a coverage block saying which of
those facts are observed and which are not modeled at all. All true, and
unwalkable. You asked to explore the city, not inspect its JSON.

grid node -> district (all 72, including the ones carrying nothing)
frequency -> building (its height is its signal count, nothing else)
signal freshness -> its lights (fresh/dim/dark, from world_state's own
age_s / interval_s — not invented here)
provenance edge -> a road in (from the origin that actually fed it)
agent -> a resident

core/city_skin.py adds no facts to the world model. The rule that keeps it a
map instead of a mockup: an aspect marked not_modeled is drawn as unavailable,
never as empty and never as full. residency and lease are not modeled, so the
city has no tenancy and says so on the page, struck through, in the world
model's own words.

Four skins over one projection, not four datasets: Civic, Radio, Organism,
Skinless. Skinless is the control — no metaphor, the model's own vocabulary —
and the plurals are spelled out because "frequencys" and "72 nucleus" read as a
mockup too.

The skyline is scaled once for the whole city rather than per district, or a
lone 2-signal building draws exactly as tall as a 100-signal one and the shape
says nothing. Projection is cached on the world's generated_at: same world,
same city, no rebuild.

Routes: /ui/city (the map), /ui/city.json (the projection), /ui/skins (what the
skins are and what they refuse to draw).

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01XGo2kuduWZMmEZGwKVNryU

core/city_skin.py

@@ -0,0 +1,289 @@
+"""
+core/city_skin.py — the world model, laid out as a place you can walk.
+
+/ui/world already answers what the mesh is: 72 grid nodes, the frequencies
+sitting on them, the provenance edges that fed them, and — the part that
+matters — a coverage block saying which of those facts are *observed* and which
+are *not modeled at all*. That JSON is true and unwalkable.
+
+This turns it into a city without adding a single fact to it:
+
+    grid node        → district        (all 72, including the empty ones)
+    frequency        → building        (its size is its signal count, nothing else)
+    signal freshness → its lights      (fresh / dim / dark, from world_state's own
+                                        age_s ÷ interval_s — not invented here)
+    provenance edge  → a road in       (from the origin that actually fed it)
+    agent            → a resident
+
+And the rule that makes it honest: an aspect the world model marks
+`not_modeled` is drawn as unavailable, never as empty and never as full.
+`residency` and `lease` are not modeled, so this city has no residents-per-
+building count and no tenancy — because inventing one is how a map starts lying.
+
+Skins are four readings of this one projection, not four datasets.
+"""
+from __future__ import annotations
+
+import time
+from typing import Any, Dict, List, Optional, Tuple
+
+SCHEMA = "signalmesh.city-skin/v1"
+
+ROWS, COLS = 9, 8
+GRID_CELLS = ROWS * COLS                    # 72, same grid as /api/grid
+ROW_LETTERS = "ALIODQBGU"                   # the dashboard's own row naming
+
+# Plurals are spelled out, not derived: "frequency" + "s" is "frequencys", and
+# more than one nucleus is nuclei. A map that misspells its own legend reads as
+# a mockup.
+SKINS = {
+    "civic": {
+        "label":    "Civic",
+        "district": "district", "building": "building",
+        "road":     "road",     "resident": "resident",
+        "plural":   {"district": "districts", "building": "buildings",
+                     "road": "roads", "resident": "residents"},
+        "blurb":    "Districts and buildings. Lit windows are fresh signals.",
+    },
+    "radio": {
+        "label":    "Radio",
+        "district": "band",     "building": "station",
+        "road":     "feed",     "resident": "listener",
+        "plural":   {"district": "bands", "building": "stations",
+                     "road": "feeds", "resident": "listeners"},
+        "blurb":    "Bands and stations. Loud stations are carrying the most.",
+    },
+    "organism": {
+        "label":    "Organism",
+        "district": "tissue",   "building": "cell",
+        "road":     "vessel",   "resident": "nucleus",
+        "plural":   {"district": "tissues", "building": "cells",
+                     "road": "vessels", "resident": "nuclei"},
+        "blurb":    "Tissues and cells. A dark cell has stopped metabolising.",
+    },
+    "skinless": {
+        "label":    "Skinless",
+        "district": "grid node", "building": "frequency",
+        "road":     "provenance edge", "resident": "agent",
+        "plural":   {"district": "grid nodes", "building": "frequencies",
+                     "road": "provenance edges", "resident": "agents"},
+        "blurb":    "No metaphor. The world model's own words.",
+    },
+}
+
+
+def coord_label(index: int) -> str:
+    """Grid index → the dashboard's coordinate, e.g. 52 → 'B5'."""
+    row, col = divmod(index, COLS)
+    return f"{ROW_LETTERS[row % len(ROW_LETTERS)]}{col + 1}"
+
+
+def _health(entry: dict) -> str:
+    state = ((entry or {}).get("health") or {}).get("state")
+    return state if state in ("fresh", "dim", "dark") else "unknown"
+
+
+def _district_state(buildings: List[dict]) -> str:
+    """A district is as alive as its liveliest building, and empty if it has none.
+
+    Deliberately not an average: one fresh frequency on a node means that node
+    is receiving, and averaging it against dark neighbours would hide that.
+    """
+    if not buildings:
+        return "empty"
+    states = {b["state"] for b in buildings}
+    for s in ("fresh", "dim", "dark"):
+        if s in states:
+            return s
+    return "unknown"
+
+
+def build(world: Dict[str, Any]) -> Dict[str, Any]:
+    """Project a world-state document into a walkable city. Adds no facts."""
+    frequencies = world.get("frequencies") or []
+    nodes       = world.get("nodes") or []
+    edges       = world.get("provenance_edges") or []
+    coverage    = world.get("coverage") or {}
+
+    # Roads arrive at a frequency; the frequency knows its district.
+    node_of: Dict[str, int] = {f.get("frequency"): f.get("node")
+                               for f in frequencies if f.get("frequency") is not None}
+
+    districts: List[Dict[str, Any]] = [{
+        "index": i, "coord": coord_label(i),
+        "row": i // COLS, "col": i % COLS,
+        "buildings": [], "residents": [], "roads": [],
+        "signal_count": 0,
+    } for i in range(GRID_CELLS)]
+
+    for f in frequencies:
+        idx = f.get("node")
+        if not isinstance(idx, int) or not 0 <= idx < GRID_CELLS:
+            continue
+        count = int(f.get("signal_count") or 0)
+        districts[idx]["buildings"].append({
+            "name":    f.get("frequency"),
+            "signals": count,
+            "state":   _health(f),
+            "age_s":   f.get("latest_age_s"),
+            "kind":    f.get("latest_type") or "",
+            "source":  f.get("source") or "",
+        })
+        districts[idx]["signal_count"] += count
+
+    for n in nodes:
+        if n.get("role") != "agent":
+            continue
+        idx = n.get("node")
+        if isinstance(idx, int) and 0 <= idx < GRID_CELLS:
+            districts[idx]["residents"].append({
+                "id": n.get("id"), "state": _health(n),
+                "source": n.get("source") or "",
+            })
+
+    inbound = 0
+    for e in edges:
+        idx = node_of.get(e.get("to"))
+        if not isinstance(idx, int) or not 0 <= idx < GRID_CELLS:
+            continue
+        districts[idx]["roads"].append({
+            "from": e.get("from"), "to": e.get("to"), "kind": e.get("kind") or "",
+            "evidence": e.get("evidence") or {},
+        })
+        inbound += 1
+
+    for d in districts:
+        d["buildings"].sort(key=lambda b: (-b["signals"], str(b["name"])))
+        d["state"] = _district_state(d["buildings"])
+
+    # The honesty panel: what this city is allowed to draw, in the world
+    # model's own words. `not_modeled` is shown as unavailable, not as zero.
+    legend = {
+        aspect: {"availability": (info or {}).get("availability", "unknown"),
+                 "drawable": (info or {}).get("availability") in ("native", "derived"),
+                 "note": (info or {}).get("caveat") or (info or {}).get("note") or ""}
+        for aspect, info in coverage.items()
+    }
+    undrawable = sorted(a for a, i in legend.items() if not i["drawable"])
+
+    lit = sum(1 for d in districts if d["state"] in ("fresh", "dim"))
+    return {
+        "schema":       SCHEMA,
+        "built_at":     time.time(),
+        "world_at":     world.get("generated_at"),
+        "world_schema": world.get("schema"),
+        "grid":         {"rows": ROWS, "cols": COLS, "cells": GRID_CELLS},
+        "districts":    districts,
+        "skins":        SKINS,
+        "legend":       legend,
+        "not_drawable": undrawable,
+        "totals": {
+            "districts_total":    GRID_CELLS,
+            "districts_occupied": sum(1 for d in districts if d["buildings"]),
+            "districts_lit":      lit,
+            "buildings":          sum(len(d["buildings"]) for d in districts),
+            "residents":          sum(len(d["residents"]) for d in districts),
+            "roads":              inbound,
+            "roads_unplaced":     len(edges) - inbound,
+            "signals":            sum(d["signal_count"] for d in districts),
+        },
+    }
+
+
+# ── cache ────────────────────────────────────────────────────────────────────
+# The projection is pure, so it only has to be redone when the world changes.
+# Keyed on the world's own generated_at: a fresh world is a cache miss, the
+# same world served twice is not.
+
+_CACHE: Dict[str, Any] = {}
+
+
+def build_cached(world: Dict[str, Any]) -> Dict[str, Any]:
+    stamp = world.get("generated_at")
+    if _CACHE.get("stamp") == stamp and stamp is not None:
+        city = dict(_CACHE["city"])
+        city["cached"] = True
+        return city
+    city = build(world)
+    city["cached"] = False
+    _CACHE.update(stamp=stamp, city=city)
+    return city
+
+
+if __name__ == "__main__":
+    assert coord_label(0) == "A1" and coord_label(7) == "A8"
+    assert coord_label(52) == "B5", coord_label(52)   # 52 = row 6, col 4 → 'B','5'
+    assert coord_label(71) == "U8"
+
+    world = {
+        "schema": "signalmesh.world-state/v1",
+        "generated_at": 1000.0,
+        "coverage": {
+            "frequency": {"availability": "native"},
+            "route":     {"availability": "derived"},
+            "residency": {"availability": "not_modeled"},
+            "lease":     {"availability": "not_modeled"},
+        },
+        "frequencies": [
+            {"frequency": "hn_top", "signal_count": 30, "node": 3,
+             "latest_age_s": 10.0, "latest_type": "feed_hydrator",
+             "health": {"state": "fresh"}, "source": "/ui/frequencies"},
+            {"frequency": "old_news", "signal_count": 2, "node": 3,
+             "latest_age_s": 99999.0, "health": {"state": "dark"},
+             "source": "/ui/frequencies"},
+            {"frequency": "offgrid", "signal_count": 5, "node": 999,
+             "health": {"state": "fresh"}},
+        ],
+        "nodes": [
+            {"id": "hn_top", "role": "frequency", "node": 3},
+            {"id": "A1", "role": "agent", "node": 3, "health": {"state": "fresh"}},
+        ],
+        "provenance_edges": [
+            {"from": "news.ycombinator.com", "to": "hn_top", "kind": "feed_origin",
+             "evidence": {"observed_items": 37}},
+            {"from": "nowhere", "to": "not_a_frequency", "kind": "feed_origin"},
+        ],
+    }
+
+    city = build(world)
+    assert len(city["districts"]) == 72, "every grid node is a district, empty or not"
+
+    d3 = city["districts"][3]
+    assert [b["name"] for b in d3["buildings"]] == ["hn_top", "old_news"], d3["buildings"]
+    assert d3["signal_count"] == 32 and d3["coord"] == "A4"
+    # one fresh building keeps the district alive even beside a dark one
+    assert d3["state"] == "fresh", d3["state"]
+    assert [r["id"] for r in d3["residents"]] == ["A1"]
+    assert len(d3["roads"]) == 1 and d3["roads"][0]["from"] == "news.ycombinator.com"
+
+    assert city["districts"][0]["state"] == "empty" and not city["districts"][0]["buildings"]
+
+    t = city["totals"]
+    assert t["buildings"] == 2, "a frequency off the grid is not placed on it"
+    assert t["roads"] == 1 and t["roads_unplaced"] == 1, t
+    assert t["districts_occupied"] == 1 and t["districts_lit"] == 1
+    assert t["signals"] == 32 and t["residents"] == 1
+
+    # the honesty rule: what the world does not model, the city must not draw
+    assert city["not_drawable"] == ["lease", "residency"], city["not_drawable"]
+    assert city["legend"]["frequency"]["drawable"] is True
+    assert city["legend"]["residency"]["drawable"] is False
+
+    assert build_cached(world)["cached"] is False
+    assert build_cached(world)["cached"] is True, "same world must not be rebuilt"
+    moved = dict(world, generated_at=2000.0)
+    assert build_cached(moved)["cached"] is False, "a new world is a new city"
+
+    # every skin must name all four things, singular and plural
+    for name, skin in SKINS.items():
+        for role in ("district", "building", "road", "resident"):
+            assert skin.get(role), (name, role)
+            assert skin["plural"].get(role), (name, role, "plural")
+    assert SKINS["skinless"]["plural"]["building"] == "frequencies"
+    assert SKINS["organism"]["plural"]["resident"] == "nuclei"
+
+    empty = build({})
+    assert len(empty["districts"]) == 72 and empty["totals"]["buildings"] == 0
+    assert all(d["state"] == "empty" for d in empty["districts"])
+
+    print("city_skin self-check OK")

signalmesh_api.py

@@ -42,6 +42,7 @@ from core.source_hydrator import source_hydrator, is_fetchable, resolve as resol
 from core import mport_articles
 from core import binder
 from core import world_state
+from core import city_skin
 from core import broadcast_journal
 from core.antenna import AntennaForge, TARGETS as ANTENNA_TARGETS
 from core.manifest_parser import manifest_registry, ManifestParser
@@ -904,6 +905,253 @@ def ui_world_state():
     """
     return _do_world_state()
 
+
+_CITY_HTML = """<!DOCTYPE html><html lang="en" data-skin="civic"><head>
+<meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1">
+<title>SignalMesh &middot; The City</title>
+<style>
+*{margin:0;padding:0;box-sizing:border-box}
+:root{
+  --bg:#070a10; --panel:#0d1219; --line:#1e2836; --ink:#e8eef7; --dim:#7f8 da0;
+  --dim:#7d8ba0; --lit:#ffce6b; --lit2:#ff9d3c; --dark:#243040; --road:#2b3a52;
+  --accent:#ffce6b; --glow:rgba(255,206,107,.30); --tile:#101823; --grid-gap:6px;
+  --radius:4px;
+}
+html[data-skin=radio]{--lit:#5df2a0;--lit2:#22c98a;--accent:#5df2a0;
+  --glow:rgba(93,242,160,.28);--tile:#0a1512;--road:#1d4438;--radius:2px}
+html[data-skin=organism]{--lit:#7ad8ff;--lit2:#3aa8e0;--accent:#7ad8ff;
+  --glow:rgba(122,216,255,.28);--tile:#0a1520;--road:#1c3a52;--radius:50%}
+html[data-skin=skinless]{--lit:#cbd5e1;--lit2:#94a3b8;--accent:#cbd5e1;
+  --glow:transparent;--tile:#0e131a;--road:#2a3340;--radius:0}
+body{background:var(--bg);color:var(--ink);
+  font:14px/1.5 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
+  min-height:100vh;display:flex;flex-direction:column}
+a{color:var(--accent)}
+header{display:flex;gap:14px;align-items:center;flex-wrap:wrap;
+  padding:12px 18px;border-bottom:1px solid var(--line);background:var(--panel)}
+h1{font-size:15px;font-weight:650;letter-spacing:.02em}
+h1 small{display:block;font-size:10.5px;color:var(--dim);font-weight:400;letter-spacing:.06em;
+  text-transform:uppercase}
+.skins{display:flex;gap:5px;margin-left:auto;flex-wrap:wrap}
+.skins button{background:transparent;border:1px solid var(--line);color:var(--dim);
+  padding:6px 13px;border-radius:99px;font-size:12px;cursor:pointer;font-family:inherit}
+.skins button[aria-pressed=true]{border-color:var(--accent);color:var(--accent);
+  box-shadow:0 0 14px var(--glow)}
+.blurb{width:100%;font-size:11.5px;color:var(--dim);order:9}
+.totals{display:flex;gap:16px;flex-wrap:wrap;padding:9px 18px;
+  border-bottom:1px solid var(--line);font-size:11px;color:var(--dim)}
+.totals b{color:var(--ink);font-weight:600}
+main{flex:1;display:grid;grid-template-columns:minmax(340px,1.15fr) minmax(300px,.85fr);
+  gap:0;align-items:start}
+@media(max-width:880px){main{grid-template-columns:1fr}}
+#map{padding:18px}
+.grid{display:grid;grid-template-columns:repeat(8,1fr);gap:var(--grid-gap)}
+.district{background:var(--tile);border:1px solid var(--line);border-radius:var(--radius);
+  aspect-ratio:1;padding:5px;cursor:pointer;position:relative;overflow:hidden;
+  display:flex;flex-direction:column;justify-content:flex-end;gap:2px;
+  transition:transform .12s,border-color .12s,box-shadow .12s}
+.district:hover{transform:translateY(-2px);border-color:var(--accent)}
+.district[aria-current=true]{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 0 18px var(--glow)}
+.district .coord{position:absolute;top:4px;left:5px;font-size:8.5px;color:var(--dim);
+  letter-spacing:.05em;font-family:ui-monospace,monospace}
+.district.empty{opacity:.42}
+.bars{display:flex;align-items:flex-end;gap:2px;height:100%;padding-top:12px}
+.bar{flex:1;min-width:2px;background:var(--dark);border-radius:1px 1px 0 0}
+.bar.fresh{background:linear-gradient(180deg,var(--lit),var(--lit2));box-shadow:0 0 7px var(--glow)}
+.bar.dim{background:var(--lit2);opacity:.5}
+.bar.dark{background:var(--dark)}
+html[data-skin=organism] .bar{border-radius:99px}
+#side{padding:18px 18px 18px 0;position:sticky;top:0;max-height:100vh;overflow:auto}
+@media(max-width:880px){#side{padding:0 18px 18px;position:static;max-height:none}}
+.card{background:var(--panel);border:1px solid var(--line);border-radius:8px;
+  padding:14px;margin-bottom:12px}
+.card h2{font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--dim);
+  font-weight:600;margin-bottom:9px}
+.bldg{display:flex;align-items:baseline;gap:8px;padding:6px 0;border-bottom:1px solid var(--line);
+  font-size:12.5px}
+.bldg:last-child{border-bottom:0}
+.bldg .nm{flex:1;font-family:ui-monospace,monospace;overflow:hidden;text-overflow:ellipsis;
+  white-space:nowrap}
+.bldg .ct{color:var(--dim);font-size:11px}
+.dot{width:7px;height:7px;border-radius:50%;flex:none;background:var(--dark)}
+.dot.fresh{background:var(--lit);box-shadow:0 0 7px var(--glow)}
+.dot.dim{background:var(--lit2);opacity:.6}
+.road{font-size:11.5px;color:var(--dim);padding:4px 0;font-family:ui-monospace,monospace;
+  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.road b{color:var(--ink);font-weight:500}
+.pill{display:inline-block;font-size:10px;padding:1px 7px;border-radius:99px;
+  border:1px solid var(--line);color:var(--dim);margin:2px 3px 2px 0}
+.unavail{opacity:.55;text-decoration:line-through}
+.empty-note{color:var(--dim);font-size:12px;font-style:italic}
+.legend-row{display:flex;justify-content:space-between;gap:10px;font-size:11.5px;
+  padding:3px 0;border-bottom:1px solid var(--line)}
+.legend-row:last-child{border-bottom:0}
+.legend-row .v{color:var(--dim);font-family:ui-monospace,monospace;font-size:10.5px}
+.key{display:flex;gap:12px;flex-wrap:wrap;font-size:11px;color:var(--dim);margin-top:10px}
+.key span{display:flex;align-items:center;gap:5px}
+</style></head><body>
+<header>
+  <h1>SignalMesh<small id="skin-sub">The City</small></h1>
+  <nav class="skins" id="skins"></nav>
+  <div class="blurb" id="blurb"></div>
+</header>
+<div class="totals" id="totals"></div>
+<main>
+  <div id="map">
+    <div class="grid" id="grid"></div>
+    <div class="key">
+      <span><i class="dot fresh"></i> fresh</span>
+      <span><i class="dot dim"></i> dim</span>
+      <span><i class="dot"></i> dark</span>
+      <span>faded = no <b id="k-bldg">buildings</b></span>
+      <span id="k-src"></span>
+    </div>
+  </div>
+  <aside id="side"></aside>
+</main>
+<script>
+const $=id=>document.getElementById(id);
+const esc=s=>String(s==null?'':s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
+let CITY=null, SKIN='civic', PICKED=null;
+
+const age=s=>{ if(s==null)return '';
+  s=Math.round(s); if(s<60)return s+'s'; if(s<3600)return Math.round(s/60)+'m';
+  if(s<86400)return Math.round(s/3600)+'h'; return Math.round(s/86400)+'d'; };
+const noun=k=>(CITY&&CITY.skins[SKIN]&&CITY.skins[SKIN][k])||k;
+const plural=k=>((CITY&&CITY.skins[SKIN]&&CITY.skins[SKIN].plural||{})[k])||noun(k);
+
+function paintSkins(){
+  $('skins').innerHTML=Object.entries(CITY.skins).map(([k,v])=>
+    `<button data-skin="${k}" aria-pressed="${k===SKIN}">${esc(v.label)}</button>`).join('');
+  $('skins').querySelectorAll('button').forEach(b=>b.onclick=()=>{
+    SKIN=b.dataset.skin; document.documentElement.dataset.skin=SKIN;
+    paintSkins(); paintTotals(); paintGrid(); paintSide();
+  });
+  $('blurb').textContent=CITY.skins[SKIN].blurb;
+  $('skin-sub').textContent=CITY.skins[SKIN].label;
+  $('k-bldg').textContent=plural('building');
+}
+
+function paintTotals(){
+  const t=CITY.totals;
+  $('totals').innerHTML=[
+    [`<b>${t.districts_lit}</b>/${t.districts_total}`, plural('district')+' lit'],
+    [`<b>${t.buildings}</b>`, plural('building')],
+    [`<b>${t.signals.toLocaleString()}</b>`, 'signals'],
+    [`<b>${t.roads}</b>`, plural('road')],
+    [`<b>${t.residents}</b>`, plural('resident')],
+  ].map(([v,l])=>`<span>${v} ${esc(l)}</span>`).join('')
+   + `<span style="margin-left:auto">world @ ${new Date((CITY.world_at||0)*1000)
+       .toLocaleTimeString()}${CITY.cached?' · cached':''}</span>`;
+}
+
+function paintGrid(){
+  // One scale for the whole city, not one per district — otherwise a lone
+  // 2-signal building draws exactly as tall as a 100-signal one and the
+  // skyline says nothing. sqrt so the long tail stays visible next to the peaks.
+  const peak=Math.max(1,...CITY.districts.flatMap(d=>d.buildings.map(b=>b.signals)));
+  const h=v=>Math.max(7,Math.round(Math.sqrt(Math.max(v,0))/Math.sqrt(peak)*100));
+  $('grid').innerHTML=CITY.districts.map(d=>{
+    const bars=d.buildings.slice(0,7);
+    const inner=bars.length
+      ? `<div class="bars">`+bars.map(b=>
+          `<i class="bar ${b.state}" style="height:${h(b.signals)}%"
+              title="${esc(b.name)} · ${b.signals}"></i>`).join('')+`</div>`
+      : '';
+    return `<div class="district ${d.buildings.length?'':'empty'}" data-i="${d.index}"
+                 aria-current="${PICKED===d.index}" tabindex="0"
+                 title="${esc(d.coord)} · ${d.buildings.length} ${esc(plural('building'))}">
+              <span class="coord">${esc(d.coord)}</span>${inner}</div>`;
+  }).join('');
+  $('grid').querySelectorAll('.district').forEach(el=>{
+    const go=()=>{PICKED=+el.dataset.i;paintGrid();paintSide();
+                  $('side').scrollIntoView({block:'nearest',behavior:'smooth'})};
+    el.onclick=go;
+    el.onkeydown=e=>{if(e.key==='Enter'||e.key===' '){e.preventDefault();go()}};
+  });
+}
+
+function paintSide(){
+  const legend=`<div class="card"><h2>What this map may draw</h2>`+
+    Object.entries(CITY.legend).map(([k,v])=>
+      `<div class="legend-row ${v.drawable?'':'unavail'}">
+         <span>${esc(k)}</span><span class="v">${esc(v.availability)}</span></div>`).join('')+
+    (CITY.not_drawable.length
+      ? `<p style="margin-top:9px;font-size:11.5px;color:var(--dim)">
+           Struck through = the world model does not carry it, so nothing here
+           invents it: <b>${CITY.not_drawable.map(esc).join(', ')}</b>.</p>` : '')+
+    `</div>`;
+
+  if(PICKED==null){
+    $('side').innerHTML=`<div class="card"><h2>Pick a ${esc(noun('district'))}</h2>
+      <p class="empty-note">All ${CITY.grid.cells} grid nodes are here, including the
+      ${CITY.totals.districts_total-CITY.totals.districts_occupied} carrying nothing.</p></div>`+legend;
+    return;
+  }
+  const d=CITY.districts[PICKED];
+  const bl=d.buildings.length?d.buildings.map(b=>
+      `<div class="bldg"><i class="dot ${b.state}"></i>
+         <span class="nm">${esc(b.name)}</span>
+         <span class="ct">${b.signals} · ${esc(age(b.age_s))}</span></div>`).join('')
+    : `<p class="empty-note">No ${esc(plural('building'))} on this node — it is
+       addressable and silent, not missing.</p>`;
+  const rd=d.roads.length?d.roads.map(r=>
+      `<div class="road">${esc(r.from)} <b>&rarr;</b> ${esc(r.to)}
+         <span class="pill">${esc(r.kind)}</span></div>`).join('')
+    : `<p class="empty-note">No observed inbound ${esc(plural('road'))}.</p>`;
+  const rs=d.residents.length?d.residents.map(r=>
+      `<span class="pill">${esc(r.id)}</span>`).join('')
+    : `<p class="empty-note">No ${esc(plural('resident'))} recorded here.</p>`;
+
+  $('side').innerHTML=`
+    <div class="card">
+      <h2>${esc(noun('district'))} ${esc(d.coord)} <span style="color:var(--accent)">·
+        ${esc(d.state)}</span></h2>
+      <div style="font-size:11.5px;color:var(--dim);margin-bottom:8px">
+        grid node ${d.index} · row ${d.row} col ${d.col} · ${d.signal_count} signals</div>
+      ${bl}
+    </div>
+    <div class="card"><h2>${esc(plural('road'))} in</h2>${rd}</div>
+    <div class="card"><h2>${esc(plural('resident'))}</h2>${rs}</div>`+legend;
+}
+
+async function load(){
+  try{
+    const r=await fetch('/ui/city.json');
+    CITY=await r.json();
+  }catch(e){
+    $('map').innerHTML='<p class="empty-note">Could not reach the mesh.</p>';return;
+  }
+  $('k-src').innerHTML='every fact from <a href="/ui/world">/ui/world</a>';
+  paintSkins(); paintTotals(); paintGrid(); paintSide();
+}
+load();
+setInterval(load,30000);
+</script></body></html>"""
+
+
+# ── The city: the same world model, as a place you can walk ──────────────────
+
+@app.get("/ui/skins", tags=["Core"], summary="Skins available over the world model")
+def ui_skins():
+    """Four readings of one projection — and what every one of them refuses to draw."""
+    city = city_skin.build_cached(_do_world_state())
+    return {"schema": city_skin.SCHEMA, "skins": city_skin.SKINS,
+            "legend": city["legend"], "not_drawable": city["not_drawable"],
+            "totals": city["totals"]}
+
+
+@app.get("/ui/city.json", tags=["Core"], summary="The world model, laid out as a city")
+def ui_city_json():
+    """Districts, buildings, roads, residents — every fact traceable to /ui/world."""
+    return city_skin.build_cached(_do_world_state())
+
+
+@app.get("/ui/city", response_class=HTMLResponse, include_in_schema=False)
+def ui_city():
+    """Walk the mesh instead of reading its JSON."""
+    return HTMLResponse(_CITY_HTML)
+
 @app.get("/identity", tags=["Core"], summary="Which copy of SignalMesh is canonical")
 def public_identity():
     """Keyless. The centrally adjudicated record for SignalMesh itself.