From fdc28ac68664c7342a8940a8f7d69f31f0e3a28d Mon Sep 17 00:00:00 2001
From: Justin Visser <justinfvisser@gmail.com>
Date: Wed, 10 Jun 2026 17:45:29 +0200
Subject: [PATCH] web: world controls, slice 6 of M3

The lower grid completes: reach chart left, World card right. Two
headline levers (chance to forward, education budget as count plus
share) move instantly and rerun through the store's debounce; the
advanced disclosure holds students, friends per student, clique
tendency, first poster, and the three named seeds, each seed with a
dice reroll plus a Reroll world button (one coalesced run).

Engine 400s render inline under the card header in rose with the
offending field marked by name match; network failures keep using the
banner with retry. A graph-seed reroll remounts the network svg keyed
by graph hash, fading the new layout in over 200 ms.
---
 web/src/App.vue                       |  18 +-
 web/src/components/AdvancedFields.vue | 248 ++++++++++++++++++++++++++
 web/src/components/ControlsCard.vue   |  84 +++++++++
 web/src/components/LeverSlider.vue    | 154 ++++++++++++++++
 web/src/components/NetworkView.vue    |  17 +-
 web/src/components/ReachChart.vue     |   5 +-
 6 files changed, 520 insertions(+), 6 deletions(-)
 create mode 100644 web/src/components/AdvancedFields.vue
 create mode 100644 web/src/components/ControlsCard.vue
 create mode 100644 web/src/components/LeverSlider.vue

diff --git a/web/src/App.vue b/web/src/App.vue
index f136fc3..0f4a719 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { onMounted } from 'vue'
 import AppBar from '@/components/AppBar.vue'
+import ControlsCard from '@/components/ControlsCard.vue'
 import ErrorBanner from '@/components/ErrorBanner.vue'
 import FooterDisclaimer from '@/components/FooterDisclaimer.vue'
 import HeroHeadline from '@/components/HeroHeadline.vue'
@@ -33,7 +34,10 @@ onMounted(async () => {
     <PanelGrid />
     <LegendRow />
     <PlayerBar />
-    <ReachChart />
+    <div class="lower">
+      <ReachChart />
+      <ControlsCard />
+    </div>
     <ResultsTable
       :panels="store.state.panels"
       :results-by-panel-id="store.state.resultsByPanelId"
@@ -51,9 +55,21 @@ onMounted(async () => {
   padding: 36px 28px 30px;
 }
 
+.lower {
+  display: grid;
+  grid-template-columns: 7fr 5fr;
+  gap: 18px;
+  margin-top: 26px;
+  align-items: start;
+}
+
 @media (max-width: 760px) {
   .page {
     padding: 22px 16px;
   }
+
+  .lower {
+    grid-template-columns: 1fr;
+  }
 }
 </style>
diff --git a/web/src/components/AdvancedFields.vue b/web/src/components/AdvancedFields.vue
new file mode 100644
index 0000000..9591f3b
--- /dev/null
+++ b/web/src/components/AdvancedFields.vue
@@ -0,0 +1,248 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useSimStore } from '@/composables/useSimStore'
+import type { Config } from '@/types/engine'
+
+// The collapsible advanced grid (spec section 4): world-shaping numbers
+// plus the three seeds, each seed with a dice reroll (spec 5.3). "Reroll
+// world" rerolls all three at once; the debounced run coalesces them.
+
+const store = useSimStore()
+
+interface NumberFieldDef {
+  field: keyof Config
+  label: string
+  min: number
+  step: number
+}
+
+const numberFields: NumberFieldDef[] = [
+  { field: 'numStudents', label: 'Students', min: 2, step: 1 },
+  { field: 'edgesPerNode', label: 'Friends per student', min: 1, step: 1 },
+  { field: 'triangleProb', label: 'Clique tendency', min: 0, step: 0.05 },
+  { field: 'origin', label: 'First poster', min: 0, step: 1 },
+]
+
+interface SeedFieldDef {
+  field: keyof Config
+  label: string
+}
+
+const seedFields: SeedFieldDef[] = [
+  { field: 'graphSeed', label: 'Friendship network' },
+  { field: 'thresholdSeed', label: 'Who resists' },
+  { field: 'educationSeed', label: 'Random picks' },
+]
+
+// The engine's 400 message names the offending Go/JSON field; mark it.
+const offendingField = computed(() => {
+  const validationError = store.state.validationError
+  if (!validationError) return null
+  const allFields = [...numberFields, ...seedFields].map(({ field }) => field)
+  return allFields.find((field) => validationError.includes(field)) ?? null
+})
+
+function setField(field: keyof Config, event: Event) {
+  const nextValue = (event.target as HTMLInputElement).valueAsNumber
+  if (Number.isFinite(nextValue)) store.setBaseField(field, nextValue)
+}
+
+function freshSeed(): number {
+  const buffer = new Uint32Array(1)
+  crypto.getRandomValues(buffer)
+  return buffer[0] ?? 0
+}
+
+function reroll(field: keyof Config) {
+  store.setBaseField(field, freshSeed())
+}
+
+function rerollWorld() {
+  for (const { field } of seedFields) store.setBaseField(field, freshSeed())
+}
+</script>
+
+<template>
+  <details class="adv" open>
+    <summary>
+      <svg class="ic chevron" viewBox="0 0 24 24" aria-hidden="true"><path d="M9 6l6 6-6 6" /></svg>
+      Advanced
+    </summary>
+    <div class="grid">
+      <label
+        v-for="def in numberFields"
+        :key="def.field"
+        class="field"
+        :class="{ invalid: offendingField === def.field }"
+      >
+        <span class="fl">{{ def.label }}</span>
+        <input
+          type="number"
+          :min="def.min"
+          :step="def.step"
+          :value="store.state.base[def.field]"
+          :aria-invalid="offendingField === def.field || undefined"
+          @change="setField(def.field, $event)"
+        />
+      </label>
+      <span
+        v-for="def in seedFields"
+        :key="def.field"
+        class="field"
+        :class="{ invalid: offendingField === def.field }"
+      >
+        <label class="seed">
+          <span class="fl">{{ def.label }}</span>
+          <input
+            type="number"
+            min="0"
+            step="1"
+            :value="store.state.base[def.field]"
+            :aria-invalid="offendingField === def.field || undefined"
+            @change="setField(def.field, $event)"
+          />
+        </label>
+        <button
+          class="dice"
+          type="button"
+          :aria-label="`Reroll ${def.label}`"
+          @click="reroll(def.field)"
+        >
+          <svg class="ic" viewBox="0 0 24 24">
+            <rect x="4" y="4" width="16" height="16" rx="3" />
+            <path d="M9 9h.01M15 15h.01M15 9h.01M9 15h.01" />
+          </svg>
+        </button>
+      </span>
+    </div>
+    <button class="reroll-world" type="button" @click="rerollWorld()">Reroll world</button>
+  </details>
+</template>
+
+<style scoped>
+.adv {
+  margin-top: 20px;
+  border-top: 1px solid var(--border-soft);
+  padding-top: 14px;
+}
+
+summary {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--ink-3);
+  cursor: pointer;
+  list-style: none;
+  border-radius: 8px;
+  padding: 2px 4px;
+}
+
+summary::-webkit-details-marker {
+  display: none;
+}
+
+.chevron {
+  width: 14px;
+  height: 14px;
+  transition: transform 0.15s;
+}
+
+details[open] .chevron {
+  transform: rotate(90deg);
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px 14px;
+  margin-top: 12px;
+}
+
+.field {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  border: 1px solid var(--border-soft);
+  background: var(--bg);
+  border-radius: 10px;
+  padding: 7px 11px;
+  font-size: 13px;
+}
+
+.field.invalid {
+  border-color: var(--spread);
+}
+
+.fl {
+  color: var(--ink-3);
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+.seed {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  flex: 1;
+  min-width: 0;
+}
+
+input[type='number'] {
+  width: 72px;
+  font: 600 13px/1.4 inherit;
+  font-family: inherit;
+  color: var(--ink-2);
+  background: none;
+  border: none;
+  text-align: right;
+  padding: 0;
+}
+
+.dice {
+  border: none;
+  background: none;
+  padding: 2px;
+  border-radius: 6px;
+  color: var(--ink-4);
+  display: grid;
+  place-items: center;
+  cursor: pointer;
+  flex: none;
+}
+
+.dice:hover {
+  color: var(--ink);
+}
+
+.dice svg.ic {
+  width: 14px;
+  height: 14px;
+}
+
+.reroll-world {
+  margin-top: 12px;
+  font-size: 12.5px;
+  font-weight: 600;
+  color: var(--ink-3);
+  background: none;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 5px 12px;
+  cursor: pointer;
+}
+
+.reroll-world:hover {
+  border-color: var(--ink-4);
+  color: var(--ink);
+}
+
+@media (max-width: 760px) {
+  .grid {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/web/src/components/ControlsCard.vue b/web/src/components/ControlsCard.vue
new file mode 100644
index 0000000..81fcd4d
--- /dev/null
+++ b/web/src/components/ControlsCard.vue
@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import AdvancedFields from './AdvancedFields.vue'
+import LeverSlider from './LeverSlider.vue'
+import { useSimStore } from '@/composables/useSimStore'
+import { formatPct } from '@/lib/format'
+
+// The world card (spec slice 6): two headline levers, the advanced grid,
+// and the inline spot for engine 400s. Lever changes hit the store
+// immediately and rerun every panel after the shared debounce.
+
+const store = useSimStore()
+
+const base = computed(() => store.state.base)
+
+const educationDisplay = computed(() => {
+  const share = (base.value.numEducated / Math.max(base.value.numStudents, 1)) * 100
+  return `${base.value.numEducated} · ${formatPct(share)}`
+})
+
+const offendsForwardProb = computed(
+  () => store.state.validationError?.includes('forwardProb') ?? false,
+)
+const offendsNumEducated = computed(
+  () => store.state.validationError?.includes('numEducated') ?? false,
+)
+</script>
+
+<template>
+  <section class="card ctl" aria-label="World settings">
+    <h3>World</h3>
+    <p v-if="store.state.validationError" class="invalid-note" role="alert">
+      {{ store.state.validationError }}
+    </p>
+    <LeverSlider
+      label="Chance to forward"
+      hint="per friendship, per round"
+      :value="base.forwardProb"
+      :min="0"
+      :max="1"
+      :step="0.01"
+      :display-value="formatPct(base.forwardProb * 100)"
+      :invalid="offendsForwardProb"
+      @update="(value) => store.setBaseField('forwardProb', value)"
+    />
+    <LeverSlider
+      label="Education budget"
+      hint="students the program reaches"
+      :value="base.numEducated"
+      :min="0"
+      :max="base.numStudents"
+      :step="1"
+      :display-value="educationDisplay"
+      :invalid="offendsNumEducated"
+      @update="(value) => store.setBaseField('numEducated', value)"
+    />
+    <AdvancedFields />
+  </section>
+</template>
+
+<style scoped>
+.card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow);
+  padding: 20px 22px;
+}
+
+h3 {
+  font-size: 13px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--ink-4);
+}
+
+.invalid-note {
+  margin-top: 8px;
+  font-size: 12.5px;
+  font-weight: 500;
+  color: var(--spread);
+}
+</style>
diff --git a/web/src/components/LeverSlider.vue b/web/src/components/LeverSlider.vue
new file mode 100644
index 0000000..0c6f70e
--- /dev/null
+++ b/web/src/components/LeverSlider.vue
@@ -0,0 +1,154 @@
+<script setup lang="ts">
+import { computed, useId } from 'vue'
+
+// One labelled lever (spec 5.2): the thumb moves immediately on input,
+// the store debounces the actual rerun. Teal accent per the token table.
+
+const props = defineProps<{
+  label: string
+  hint: string
+  value: number
+  min: number
+  max: number
+  step: number
+  displayValue: string
+  invalid?: boolean
+}>()
+
+const emit = defineEmits<{ update: [value: number] }>()
+
+const inputId = useId()
+
+const progressPct = computed(() =>
+  props.max > props.min ? ((props.value - props.min) / (props.max - props.min)) * 100 : 0,
+)
+
+function onInput(event: Event) {
+  const nextValue = (event.target as HTMLInputElement).valueAsNumber
+  if (Number.isFinite(nextValue)) emit('update', nextValue)
+}
+</script>
+
+<template>
+  <div class="row" :class="{ invalid }">
+    <label :for="inputId">
+      {{ label }}
+      <span class="hint">{{ hint }}</span>
+    </label>
+    <input
+      :id="inputId"
+      type="range"
+      :min="min"
+      :max="max"
+      :step="step"
+      :value="value"
+      :style="{ '--progress': `${progressPct}%` }"
+      :aria-valuetext="displayValue"
+      :aria-invalid="invalid || undefined"
+      @input="onInput"
+    />
+    <span class="val">{{ displayValue }}</span>
+  </div>
+</template>
+
+<style scoped>
+.row {
+  display: grid;
+  grid-template-columns: 150px 1fr 78px;
+  align-items: center;
+  gap: 14px;
+  margin-top: 18px;
+}
+
+label {
+  font-size: 14px;
+  font-weight: 550;
+  color: var(--ink-2);
+}
+
+.hint {
+  display: block;
+  font-size: 12px;
+  font-weight: 400;
+  color: var(--ink-4);
+  margin-top: 1px;
+}
+
+.val {
+  justify-self: end;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--ink-2);
+  background: var(--bg);
+  border: 1px solid var(--border-soft);
+  border-radius: 8px;
+  padding: 3px 10px;
+  white-space: nowrap;
+}
+
+.row.invalid .val {
+  border-color: var(--spread);
+  color: var(--spread);
+}
+
+input[type='range'] {
+  appearance: none;
+  width: 100%;
+  height: 20px;
+  margin: 0;
+  background: transparent;
+  cursor: pointer;
+}
+
+input[type='range']::-webkit-slider-runnable-track {
+  height: 3px;
+  border-radius: 3px;
+  background: linear-gradient(
+    to right,
+    var(--edu) var(--progress, 0%),
+    var(--border) var(--progress, 0%)
+  );
+}
+
+input[type='range']::-webkit-slider-thumb {
+  appearance: none;
+  width: 15px;
+  height: 15px;
+  margin-top: -6px;
+  border-radius: 50%;
+  background: var(--surface);
+  border: 2px solid var(--edu);
+  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.2);
+}
+
+input[type='range']::-moz-range-track {
+  height: 3px;
+  border-radius: 3px;
+  background: var(--border);
+}
+
+input[type='range']::-moz-range-progress {
+  height: 3px;
+  border-radius: 3px;
+  background: var(--edu);
+}
+
+input[type='range']::-moz-range-thumb {
+  width: 11px;
+  height: 11px;
+  border-radius: 50%;
+  background: var(--surface);
+  border: 2px solid var(--edu);
+  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.2);
+}
+
+@media (max-width: 760px) {
+  .row {
+    grid-template-columns: 1fr 78px;
+  }
+
+  label {
+    grid-column: 1 / -1;
+  }
+}
+</style>
diff --git a/web/src/components/NetworkView.vue b/web/src/components/NetworkView.vue
index 7f08ee6..374912a 100644
--- a/web/src/components/NetworkView.vue
+++ b/web/src/components/NetworkView.vue
@@ -16,7 +16,8 @@ const props = defineProps<{ panel: PanelSpec }>()
 const store = useSimStore()
 
 const effectiveConfig = computed(() => store.effectiveConfig(props.panel))
-const edges = computed(() => store.state.edgesByGraphHash[graphKey(effectiveConfig.value)] ?? [])
+const panelGraphKey = computed(() => graphKey(effectiveConfig.value))
+const edges = computed(() => store.state.edgesByGraphHash[panelGraphKey.value] ?? [])
 const result = computed(() => store.state.resultsByPanelId[props.panel.id])
 const layout = computed(() => layoutForGraph(effectiveConfig.value, edges.value))
 
@@ -64,6 +65,7 @@ function popDelay(nodeIndex: number): string {
 
 <template>
   <svg
+    :key="panelGraphKey"
     class="net"
     :viewBox="`0 0 ${NETWORK_VIEW_WIDTH} ${NETWORK_VIEW_HEIGHT}`"
     :style="{ '--pop-ms': `${popDurationMs}ms` }"
@@ -123,6 +125,19 @@ function popDelay(nodeIndex: number): string {
   height: auto;
   display: block;
   margin-top: 4px;
+  /* A graph-seed reroll remounts the svg (keyed by graph hash); the new
+     layout fades in (spec 5.3). Skipped under reduced motion globally. */
+  animation: layout-fade 200ms ease-out;
+}
+
+@keyframes layout-fade {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
 }
 
 /* Nodes reached this round fade and scale in across the full round
diff --git a/web/src/components/ReachChart.vue b/web/src/components/ReachChart.vue
index 6016af2..69baf38 100644
--- a/web/src/components/ReachChart.vue
+++ b/web/src/components/ReachChart.vue
@@ -65,9 +65,7 @@ const curves = computed<ChartCurve[]>(() =>
   }),
 )
 
-const gridLines = computed(() =>
-  [0, 25, 50, 75, 100].map((pct) => ({ pct, y: pctToY(pct) })),
-)
+const gridLines = computed(() => [0, 25, 50, 75, 100].map((pct) => ({ pct, y: pctToY(pct) })))
 
 // Label every round while they fit; thin out for long runs.
 const roundLabels = computed(() => {
@@ -159,7 +157,6 @@ const playheadX = computed(() => roundToX(store.state.round))
   border-radius: var(--radius);
   box-shadow: var(--shadow);
   padding: 20px 22px;
-  margin-top: 26px;
 }
 
 h3 {