Frontend redesign + LLM sprite chatter; backend chatter endpoint

tejasprabhune · tejasprabhune · commit 7cd2197fd620 · 2026-06-15T22:55:00.000-07:00
UI
- Title is now the city switcher: a glass column-select (Pixelify titles); the
  active city shows in the title button, clicking opens the dropdown of cities.
- "whole city" button moved directly under the title (no more overlap).
- News bubble: same opacity as the rest of the chrome; click to expand the full
  set of articles (date · headline · summary) that are informing the residents.
- Loading bar spans the status bubble width, sits underneath it with spacing.
- Bigger, more readable chrome; emojis removed throughout.
- About card: notes the five cities now supported + a build credit.

Per-resident LLM chatter (replaces hardcoded SF phrases)
- New POST /branches/:bid/chatter: one short, in-character present-tense thought
  per requested resident, batched into a single Sonnet call (Engine::chatter).
- Frontend requests chatter only for the sprites currently on screen and caches
  it, so calls stay sparse. Falls back to a city-neutral local pool while it
  loads — fixing SF chatter ("Karl the Fog", Muni, the bay) leaking into other
  cities.
diff --git a/crates/sim-core/src/api.rs b/crates/sim-core/src/api.rs
@@ -84,6 +84,7 @@ pub fn router(state: AppState) -> Router {
         .route("/branches/:bid", get(branch_status))
         .route("/branches/:bid", delete(delete_branch))
         .route("/branches/:bid/agents", get(branch_agents))
+        .route("/branches/:bid/chatter", post(branch_chatter))
         .route("/branches/:bid/poll", post(branch_poll))
         .route("/branches/:bid/predict-market", post(predict_market))
         .route("/branches/:bid/stream", get(branch_stream))
@@ -452,6 +453,31 @@ async fn branch_agents(State(st): State<AppState>, Path(bid): Path<String>, Quer
     })).into_response()
 }
 
+#[derive(serde::Deserialize)]
+struct ChatterReq {
+    #[serde(default)]
+    ids: Vec<u32>,
+}
+
+/// Ambient sprite chatter for the residents currently on screen — one short,
+/// in-character LLM thought per requested resident, batched into a single call.
+/// The UI asks only for visible sprites and caches the result, so this is sparse.
+async fn branch_chatter(
+    State(st): State<AppState>,
+    Path(bid): Path<String>,
+    Json(req): Json<ChatterReq>,
+) -> impl IntoResponse {
+    let (ctx, _bs) = match find_branch(&st, &bid) {
+        Some(x) => x,
+        None => return (StatusCode::NOT_FOUND, Json(json!({"error":"branch not found"}))).into_response(),
+    };
+    let ids: Vec<u32> = req.ids.into_iter().take(16).collect();
+    let pairs = st.engine.chatter(&ctx.population, &ids).await;
+    let map: serde_json::Map<String, Value> =
+        pairs.into_iter().map(|(id, t)| (id.to_string(), Value::String(t))).collect();
+    Json(json!({ "chatter": map })).into_response()
+}
+
 async fn branch_poll(State(st): State<AppState>, Path(bid): Path<String>, Json(req): Json<Value>) -> impl IntoResponse {
     let (ctx, _bs) = match find_branch(&st, &bid) {
         Some(x) => x,
diff --git a/crates/sim-core/src/predict.rs b/crates/sim-core/src/predict.rs
@@ -482,6 +482,76 @@ p_yes is a probability between 0 and 1. Be realistic and calibrated to {city_nam
         let delta = after.p_yes - baseline.p_yes;
         Ok((baseline, after, delta))
     }
+
+    /// Ambient sprite chatter: one short, in-character present-tense thought per
+    /// requested resident, in a single batched LLM call. Sparse by design — the
+    /// UI only asks for the handful of residents currently on screen and caches
+    /// the results, so this is cheap. Returns (agent_id, thought) pairs; ids the
+    /// model drops are simply omitted (the UI keeps its fallback for those).
+    pub async fn chatter(&self, pop: &Population, ids: &[u32]) -> Vec<(u32, String)> {
+        let people: Vec<(u32, &str)> = ids
+            .iter()
+            .filter_map(|&id| pop.agents.get(id as usize).map(|a| (id, a.persona.as_str())))
+            .collect();
+        if people.is_empty() {
+            return vec![];
+        }
+        let sys = format!(
+            "You voice the private inner monologue of real {city} residents for an ambient \
+city simulation. For each resident, write the one short thought running through their head \
+right now as they go about an ordinary day — first person, present tense, at most 9 words, \
+specific and true to exactly who they are (their age, job, neighborhood, money pressures, \
+family, and values). Make each distinct and human; vary the mood; some mundane, some hopeful, \
+some worried. No names, no hashtags, no surrounding quotes. \
+Respond with STRICT JSON only: [{{\"i\":<index>,\"t\":\"<thought>\"}}].",
+            city = pop.profile.prompt_name,
+        );
+        let mut user = String::from("Residents:\n");
+        for (idx, (_id, prose)) in people.iter().enumerate() {
+            user.push_str(&format!("{idx}. {prose}\n"));
+        }
+        let model = Model::parse("claude-sonnet-4-6");
+        let max_tokens = (people.len() as u32 * 48 + 256).min(2400);
+        // best-effort: a failed call just means the UI keeps its local fallback.
+        let text = match self.client.complete(model, &sys, &user, max_tokens).await {
+            Ok(t) => t,
+            Err(_) => return vec![],
+        };
+        parse_chatter(&text, &people)
+    }
+}
+
+/// Parse the `[{"i":n,"t":"..."}]` chatter response, mapping each index back to
+/// its agent id. Tolerant of code fences / surrounding prose.
+fn parse_chatter(text: &str, people: &[(u32, &str)]) -> Vec<(u32, String)> {
+    let start = match text.find('[') {
+        Some(i) => i,
+        None => return vec![],
+    };
+    let end = match text.rfind(']') {
+        Some(i) if i > start => i,
+        _ => return vec![],
+    };
+    let arr: serde_json::Value = match serde_json::from_str(&text[start..=end]) {
+        Ok(v) => v,
+        Err(_) => return vec![],
+    };
+    let mut out = Vec::new();
+    if let Some(items) = arr.as_array() {
+        for it in items {
+            let idx = it.get("i").and_then(|v| v.as_u64()).map(|v| v as usize);
+            let thought = it.get("t").and_then(|v| v.as_str());
+            if let (Some(idx), Some(t)) = (idx, thought) {
+                if let Some((id, _)) = people.get(idx) {
+                    let t = t.trim().trim_matches('"').trim();
+                    if !t.is_empty() {
+                        out.push((*id, t.to_string()));
+                    }
+                }
+            }
+        }
+    }
+    out
 }
 
 #[cfg(test)]
diff --git a/frontend/index.html b/frontend/index.html
@@ -20,10 +20,17 @@
   <canvas id="map"></canvas>
 
   <div id="ui">
-    <!-- top-left: title (pixel font, all black) + city switcher -->
-    <div class="title-row">
-      <div id="title" class="title">sim francisco</div>
-      <div id="city-switcher" class="city-switcher hidden" role="group" aria-label="Choose a city"></div>
+    <!-- top-left: the title IS the city switcher — a glass column of city titles -->
+    <div id="title-select" class="title-select">
+      <button id="title-btn" class="title title-btn" type="button"
+              aria-haspopup="listbox" aria-expanded="false" aria-label="Switch city">
+        <span id="title-current" class="title-current">sim francisco</span>
+        <svg class="title-caret" viewBox="0 0 24 24" width="17" height="17" aria-hidden="true">
+          <path fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"
+                stroke-linejoin="round" d="M6 9l6 6 6-6" />
+        </svg>
+      </button>
+      <div id="title-menu" class="title-menu hidden" role="listbox" aria-label="Cities"></div>
     </div>
 
     <!-- simulation status: city · residents · knowledge-clock (top-right) -->
@@ -89,6 +96,7 @@
       <div class="about-h">The pitch</div>
       <p>What if you could predict how your customers responded to releases before they went out into the real world? Or if you could get a signal on who will win an election?</p>
       <p>We simulated the population of San Francisco distributed across real US Census data and achieved near-parity with these types of real-world events.</p>
+      <p>It now spans <b>five US cities</b> — San Francisco plus <b>neu york</b> (New York City), <b>synth la</b> (Los Angeles), <b>cybercago</b> (Chicago), and <b>simami</b> (Miami) — each its own Census-sampled population. Switch between them from the title in the top-left.</p>
 
       <div class="about-h">Historically predictive</div>
       <p>How do we know if our simulation of SF is accurate? The honest test needs a model whose knowledge cutoff <i>predates</i> the event, so it can't have just memorized the outcome. The older Claude models with a 2023 cutoff have since been <b>retired</b> — so for this leakage-free backtest we ran <b>GPT-4o</b> (knowledge cutoff <b>October 2023</b>) and asked the twin city to predict results it had never seen. (The live app you're using runs the current <b>Claude Sonnet 4.6</b>.)</p>
@@ -108,6 +116,10 @@
       <div class="about-h">The future</div>
       <p>All of decision-making is predicated on our understanding of causality. How will the choices we make influence the world? How will people react?</p>
       <p>To enable (first) SF, and then the world, to understand the causal nature of reality, we present <span class="about-name">sim francisco</span>.</p>
+
+      <div class="about-credit">
+        Built by <b>Tejas Prabhune</b> and <b>Tanmayi Dasari</b> · 2nd place, <b>Claude Build Day</b> (June 13, 2026).
+      </div>
     </div>
 
     <!-- character inspector (tap a character when zoomed in) -->
diff --git a/frontend/src/api.js b/frontend/src/api.js
@@ -45,6 +45,15 @@ export const getCities = () => req("/cities", { timeout: 12000 });
 export const getNews = (city) =>
   req(`/cities/${encodeURIComponent(city)}/news`, { timeout: 10000 });
 
+// Ambient LLM chatter for the residents currently on screen (sparse + batched).
+// Returns { chatter: { "<agentId>": "<thought>", ... } }.
+export const getChatter = (branchId, ids) =>
+  req(`/branches/${encodeURIComponent(branchId)}/chatter`, {
+    method: "POST",
+    body: { ids },
+    timeout: 15000,
+  });
+
 // Classify a free-form question for a city before polling. Returns either
 // { supported:true, framing, question, description, options } or
 // { supported:false, reason, examples }.
diff --git a/frontend/src/app.js b/frontend/src/app.js
@@ -17,7 +17,10 @@ import * as api from "./api.js";
 const $ = (id) => document.getElementById(id);
 const els = {
   canvas: $("map"),
-  citySwitcher: $("city-switcher"),
+  titleSelect: $("title-select"),
+  titleBtn: $("title-btn"),
+  titleCurrent: $("title-current"),
+  titleMenu: $("title-menu"),
   status: $("status"),
   newsBubble: $("news-bubble"),
   boot: $("boot"),
@@ -54,12 +57,27 @@ const state = {
   cities: [],            // [{slug, display, bbox, ...}] from GET /cities
   city: null,            // the active city object (falls back to a synthetic "sf")
   switching: false,      // true while a city swap is re-creating the simulation
+  news: [],              // the active city's recent articles (expandable bubble)
+  newsExpanded: false,   // whether the news bubble is showing all of them
 };
 
 // fallback city when /cities is unavailable — keeps the single-city SF behavior.
 const SF_FALLBACK = { slug: "sf", display: "sim francisco", bbox: { ...MAP.bbox }, default: true };
 const citySlug = () => state.city?.slug || "sf";
 
+// fetch LLM chatter for the residents now on screen (sparse, batched, best-effort)
+async function requestChatter(ids) {
+  if (!state.mainBranch || !ids?.length) return;
+  const branch = state.mainBranch;
+  try {
+    const data = await api.getChatter(branch, ids);
+    if (branch !== state.mainBranch) return;            // city swapped mid-flight — drop it
+    const ch = data?.chatter || {};
+    for (const [id, text] of Object.entries(ch)) map.setThought(Number(id), text);
+  } catch { /* best-effort: residents keep their neutral fallback thought */ }
+}
+map.onNeedChatter = requestChatter;
+
 const isBusy = () => state.phase === "waiting" || state.phase === "reveal";
 const inputOpen = () => els.ask.dataset.state === "input";
 
@@ -91,7 +109,7 @@ async function boot() {
     if (cities.length) {
       state.cities = cities;
       initial = cities.find((c) => c.default) || cities[0];
-      buildCitySwitcher();
+      buildTitleSelect();
     }
   } catch (err) {
     console.warn("city catalog unavailable, falling back to SF:", err);
@@ -108,9 +126,10 @@ async function loadCity(city) {
   MAP.base = `assets/${city.slug}_tiles.png`;
   if (city.bbox) MAP.bbox = { ...city.bbox };
   map.setBase(MAP.base);
-  syncActiveChip();
+  syncActiveTitle();
 
   els.status.textContent = `waking ${city.display}…`;
+  hide(els.newsBubble);            // clear the previous city's news while loading
   show(els.boot); setBoot(0.06);
   try {
     const sim = await api.createSimulation({ city: city.slug });
@@ -123,10 +142,11 @@ async function loadCity(city) {
     if (!agents.length) throw new Error("no agents returned");
     map.setAgents(agents);
     state.residents = agents.length;
+    map.setSim(city.slug, state.mainBranch);     // scope ambient chatter to this city + branch
     setBoot(1);
-    setTimeout(() => hide(els.boot), 450);       // let the bar finish, then fade out
     setIdleStatus();
-    loadNews(city.slug);                         // fill the fleeting news bubble (best-effort)
+    // let the bar finish, fade it out, then surface the news in its place (no overlap)
+    setTimeout(() => { hide(els.boot); loadNews(city.slug); }, 450);
     state.phase = "idle";
   } catch (err) {
     console.error(err);
@@ -146,7 +166,7 @@ function setIdleStatus() {
   const kd = state.city?.knowledge_date;
   // the clock = the date up to which the residents know the news (their knowledge cutoff)
   const clock = kd
-    ? `<span class="status-clock">🕐 residents know the news up to ${escapeHtml(fmtDate(kd))}</span>`
+    ? `<span class="status-clock">residents know the news up to ${escapeHtml(fmtDate(kd))}</span>`
     : "";
   if (window.innerWidth < 560) {
     els.status.innerHTML = `${n} residents`;              // compact on phones
@@ -162,42 +182,96 @@ function fmtDate(iso) {
   return d.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" });
 }
 
-// fetch the city's recent news into the fleeting bubble (best-effort)
+// fetch the city's recent news into the bubble (best-effort); click to expand all
 async function loadNews(slug) {
+  state.newsExpanded = false;
   try {
     const data = await api.getNews(slug);
-    const arts = (data.articles || []).slice(0, 3);
-    if (!arts.length) { hide(els.newsBubble); return; }
-    els.newsBubble.innerHTML =
-      `<span class="news-head">📰 informing the residents</span>` +
-      arts.map((a) => `<span class="news-item">${escapeHtml(a.headline)}</span>`).join("");
+    state.news = data.articles || [];
+    if (!state.news.length) { hide(els.newsBubble); return; }
+    renderNews();
     show(els.newsBubble);
   } catch {
+    state.news = [];
     hide(els.newsBubble);
   }
 }
 
-// ── city switcher ─────────────────────────────────────────────────────────
-function buildCitySwitcher() {
-  els.citySwitcher.innerHTML = state.cities.map((c) =>
-    `<button class="city-chip" type="button" data-slug="${escapeHtml(c.slug)}"
-       aria-pressed="false">${escapeHtml(c.display)}</button>`
+// render the news bubble in its current (collapsed / expanded) state
+function renderNews() {
+  const arts = state.news;
+  if (!arts.length) { hide(els.newsBubble); return; }
+  els.newsBubble.dataset.expanded = state.newsExpanded ? "true" : "false";
+  const caret = arts.length > 1
+    ? `<svg class="news-toggle" viewBox="0 0 24 24" width="13" height="13" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" d="M6 9l6 6 6-6"/></svg>`
+    : "";
+  const head = `<span class="news-head"><span>informing the residents</span>${caret}</span>`;
+  const body = state.newsExpanded
+    ? arts.map((a) =>
+        `<div class="news-art">` +
+        (a.date ? `<span class="news-art-date">${escapeHtml(fmtDate(a.date))}</span>` : "") +
+        `<span class="news-art-head">${escapeHtml(a.headline)}</span>` +
+        (a.summary ? `<span class="news-art-sum">${escapeHtml(a.summary)}</span>` : "") +
+        `</div>`
+      ).join("")
+    : arts.slice(0, 3).map((a) => `<span class="news-item">${escapeHtml(a.headline)}</span>`).join("");
+  els.newsBubble.innerHTML = head + body;
+}
+
+// click the bubble to expand it to all the news updating the residents (and back)
+els.newsBubble.addEventListener("click", () => {
+  if (!state.news.length) return;
+  state.newsExpanded = !state.newsExpanded;
+  renderNews();
+});
+
+// ── title-select: the title itself is the city switcher ────────────────────
+function buildTitleSelect() {
+  els.titleMenu.innerHTML = state.cities.map((c) =>
+    `<button class="title-option" type="button" role="option" data-slug="${escapeHtml(c.slug)}"
+       aria-selected="false">${escapeHtml(c.display)}</button>`
   ).join("");
-  els.citySwitcher.querySelectorAll(".city-chip").forEach((btn) => {
-    btn.addEventListener("click", () => onSelectCity(btn.dataset.slug));
+  els.titleMenu.querySelectorAll(".title-option").forEach((btn) => {
+    btn.addEventListener("click", () => { closeTitleMenu(); onSelectCity(btn.dataset.slug); });
   });
-  show(els.citySwitcher);
+  syncActiveTitle();
 }
 
-// reflect the active city + lock the chips while a swap is in flight
-function syncActiveChip() {
-  els.citySwitcher.querySelectorAll(".city-chip").forEach((btn) => {
-    const active = btn.dataset.slug === citySlug();
-    btn.setAttribute("aria-pressed", active ? "true" : "false");
+function titleMenuOpen() { return els.titleBtn.getAttribute("aria-expanded") === "true"; }
+function openTitleMenu() {
+  if (state.cities.length <= 1 || state.switching) return;
+  show(els.titleMenu);
+  els.titleBtn.setAttribute("aria-expanded", "true");
+}
+function closeTitleMenu() {
+  hide(els.titleMenu);
+  els.titleBtn.setAttribute("aria-expanded", "false");
+}
+function toggleTitleMenu() { titleMenuOpen() ? closeTitleMenu() : openTitleMenu(); }
+
+// reflect the active city in the title button + the menu; lock while swapping
+function syncActiveTitle() {
+  const city = state.cities.find((c) => c.slug === citySlug());
+  els.titleCurrent.textContent = city?.display || state.city?.display || "sim francisco";
+  els.titleMenu.querySelectorAll(".title-option").forEach((btn) => {
+    btn.setAttribute("aria-selected", btn.dataset.slug === citySlug() ? "true" : "false");
     btn.disabled = state.switching;
   });
+  els.titleBtn.disabled = state.switching || state.cities.length <= 1;
 }
 
+// title-button toggles the dropdown; click-away / Escape close it
+els.titleBtn.addEventListener("click", (e) => {
+  e.stopPropagation();
+  if (!els.titleBtn.disabled) toggleTitleMenu();
+});
+document.addEventListener("click", (e) => {
+  if (titleMenuOpen() && !els.titleSelect.contains(e.target)) closeTitleMenu();
+});
+document.addEventListener("keydown", (e) => {
+  if (e.key === "Escape" && titleMenuOpen()) closeTitleMenu();
+});
+
 async function onSelectCity(slug) {
   if (state.switching || slug === citySlug()) return;
   const city = state.cities.find((c) => c.slug === slug);
@@ -215,12 +289,12 @@ async function onSelectCity(slug) {
 
   state.switching = true;
   state.phase = "booting";
-  syncActiveChip();
+  syncActiveTitle();
   try {
     await loadCity(city);
   } finally {
     state.switching = false;
-    syncActiveChip();
+    syncActiveTitle();
   }
 }
 // keep the status text right-sized across orientation changes
diff --git a/frontend/src/map.js b/frontend/src/map.js
diff --git a/frontend/styles.css b/frontend/styles.css
