M8: the browser becomes the storyteller

The interface was AI-DnD's with this product's features bolted into it. The
navigation read Home · Adventures · Scenarios · Settings · AI Chat; starting a
story meant first picking a *world*, and making a world meant a JSON stat-schema
form, a story-card table and an art picker. The play screen had a Branches tab.
The input had three modes. Sixteen of the sixteen controls on a two-turn story
had no accessible name — they were single glyphs with a tooltip.

All of that was measured in a real browser before anything was changed, and the
measurements are in planning/reports/M8-IMPLEMENTATION-REPORT.md §C. Almost
nothing underneath was wrong: the play loop, the history controls, the takes,
the Save Points, the state correction and the knowledge library all worked. What
was wrong was what a reader was asked to understand in order to use them.

So the shape now is one entry point and one screen:

  Campaigns -> Campaign -> Story
                           State · Knowledge · Context · Save Points · Settings

Everything that is not the story lives in a panel that starts closed. The
top navigation bar is hidden on the story screen entirely, because on that one
screen the story is the interface.

Play is one natural-language field. An action and a piece of quoted dialogue are
both just what the reader wrote, and B01/B02 confirmed against a real narrator
that the model reads the quotes without being told which kind of turn it is.
What survives from the old Story mode is a Story direction toggle, which is not
a fourth mode: it changes who is being spoken to, not what kind of action is
taken, and the box is visibly marked while it is on.

Branch, fork, node, merge and head appear nowhere a reader can see them. The
branch panel and the tree overlay are gone from the browser. The mechanism is
untouched — takes, divergence, retained futures and Save Points all still work,
and their endpoints are still tested. This is a decision about what a reader is
asked to understand, not a reduction of what the product can do.

The two defects worth the space:

A player action is stored with AI Dungeon's "> You " prefix. That was right when
the Do mode asked for a bare verb phrase. With one field the spec tells the
reader to write "I enter the tavern", and the result was "> You I enter the
tavern." — in the transcript, in the replayed history, and therefore in the
narration, where a small model imitates it and writes "You I thank her". M8's
own design surfaced it, so M8 fixed it: the prefix is added only when the reader
has not already written a subject. The ">" marker, which is what actually
identifies a player turn in the prompt, is unchanged in every case.

And a stale `.input-bar { display: flex }` in play.css overrode the new
composer, because that sheet is imported after the new one. The direction row
and the input row laid out side by side and the box was unusably narrow. Found
by opening the product in a browser, not by reading the CSS — which is the
argument for having done that first.

Failures now have the taxonomy the spec asked for rather than one toast: model,
generation, state, knowledge, server, each with the thing to do about it. A
failed turn leaves the reader's words in the box and says so. The classification
reads backend strings, so it is a fallback ladder rather than a lookup — an
unrecognised message still classifies, still shows the server's own words and
still offers Retry.

`Settings.model` could be empty with nothing saying so until the first turn
failed with a provider error. The header now reports Ollama in five states, and
an unconfigured or missing model offers the models actually installed on the
endpoint, from the connection test that already knew them. Nothing is chosen
automatically: an endpoint's first model may be an embedding model, which cannot
narrate at all.

Narrator prose is rendered as safe Markdown — headings, emphasis, lists,
blockquotes, code. The safety is structural rather than filtered: every node is
a React element built from parsed text, and there is no dangerouslySetInnerHTML
in the file. A sanitizer is not needed to make markup safe if markup is never
produced from input. Link schemes are checked with the URL parser rather than a
pattern, because the bypasses are all in the parsing. A remote image is a
placeholder naming the blocked address; the knowledge and context panels
deliberately do not use this renderer at all, because they exist to show a
reader exactly what is in their file.

Backend, and only what the browser could not otherwise reach:

  AdventureCreate.opening   a start action could only come from a Scenario, so
                            every campaign made in the new setup flow opened on
                            a blank page. Same node, same code path.
  canon_rules               campaign_canon has been the highest authority in a
                            campaign since M5, read by the prompt builder and
                            the state validator, and had no API at all — a
                            fixture had to write it with SQL.
  a 401 and a 429 message   the last user-facing text describing a hosted
                            deployment. One told the reader to check an API key
                            that has not existed since M2.

No schema change and no migration: proved by building a database with a server
running the M7 commit's own code and opening it with this one.

The project had no frontend tests. It has 132 now, across ten files, running
in about six seconds — the enabled state of every history control, the take
selector, the confirmations, the panels, the five model states, the failure
taxonomy, the focus trap, accessibility, and that the reserved dictation control
never touches the microphone. Writing them found a real defect: the focus trap
filtered candidates with offsetParent, which is null inside the fixed-position
ancestor the dialog has and which jsdom never computes — it would have behaved
differently in the tests from the browser.

They do not replace the real-browser runs, and both kinds of evidence are in the
report. The browser suites drive the production build served by the real backend
with a real local narrator, including a genuine process restart.

A verification pass over all of it then found three more, each by driving the
product rather than reading it:

Stepping between alternate takes did nothing. The pager asked whether a take
lived on another line by comparing `target.branch_id !== action.branch_id`, and
`ActionOut` has never carried `branch_id` — so the comparison was permanently
`number !== undefined`, always true, and every step took the branch-switch path.
For two takes of an ordinary retry, which share a line until one is written
below, that meant switching to the line already being read: the same window came
back and nothing moved. D07 is a required v1 acceptance test. The fix needed no
new field — the variants list already carries every attempt's branch and marks
the live one.

The first regression test for that passed against the broken code, because its
fixture gave the action a `branch_id` the real payload never sends. That is the
exact failure M7's review was about, so the fixture was corrected, the tests were
re-run against the reverted code and failed for the right reason, and the
fixture now carries a docstring saying why the field must never come back.

And the knowledge panel pointed readers at an "embedding model" while the
setting is called "Model for meaning-based search" — a reader sent looking for a
field that does not exist by that name.

Campaign canon was measured rather than assumed. Editing it after play is a
configuration change: every turn already played keeps the canon it was actually
given, in its own context snapshot, and the accepted story, the state document
and the state audit log are byte-identical across an edit. It is not routed
through M5's state audit, because canon is not narrative state and doing so
would create the second representation the spec forbids. What the editor does
now is say so, once a campaign has moments.

`BROWSER-UX-SPEC.md` §38 asked for a "Show Hidden Story State" toggle. There is
no hidden story state — a secret lives in a narrator-only knowledge source and
never enters the state document. The section is rewritten to require what it
actually meant: ordinary surfaces must not carry narrator-only information,
advanced inspection must withhold it by default behind an explicit warned
choice, and no second store may be invented to give a toggle something to
reveal. The protection is stricter than before, not weaker.

Closeout. An independent review returned M8 IMPLEMENTATION: PASS subject to
evidence and documentation cleanup, and this commit carries that cleanup:

The report named two frontend bundles as the artifact behind its acceptance
evidence. The saved run logs settle it. index-Ii-lARp9.js, built at 18:53:02
from this tree, is the one final frozen artifact behind all 157 browser checks;
index-C6E5Uvtu.js is superseded — it predates the D09 fix and its acceptance
suite ended 54/55 on exactly that defect. No tracked file under backend/app or
frontend/src has a modification time after the freeze, so the whole final
campaign describes one build. §P sets the two side by side.

Finding 14 — the app budgets 16,384 prompt tokens while an Ollama that sees no
VRAM enforces 4,096 — is resolved operationally, with no application change.
The OpenAI-compatible endpoint this app speaks accepts num_ctx and ignores it,
and reloads the model at its own default, so a native call cannot prime it
either. A model derived with POST /api/create carries the parameter, is honoured
through the app's own OpenAI-compatible path, and appears in /v1/models — which
is the listing the Settings model picker already reads. Measured end to end.
The procedure is in DEVELOPMENT.md; nothing in the repository depends on any
particular derived model existing. Adding provider code to work around this was
declined deliberately: it would mean either a second native request path,
against ADR 011, or a parameter the endpoint provably ignores.

The §38 rewrite is ratified as a requirement clarification aligned with the
implemented architecture, and the spec gains the clause finding 3 was really
about: withheld material must be absent from the rendered DOM, not merely
collapsed in it.

The report's §U carries the M9 handoff — what a portable campaign has to include,
whether historical context snapshots belong in the bundle, what happens to
inherited story cards, and that a restored campaign may meet a different context
window than the one that wrote it. None of it is implemented here.

Final: backend 950 passed / 14 skipped; frontend 132 passed; lint, production
build and Docker build clean; 157 browser checks across six suites, zero
failures. M8 is implemented, verified, reviewed and accepted (2026-09-06).
M9 has not been started.

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

frontend/src/pages/NewCampaign.jsx

@@ -0,0 +1,298 @@
+/* Starting a campaign, in one screen.
+ *
+ * `BROWSER-UX-SPEC.md` §41-42 and §7 of the M8 brief. What it replaced was a
+ * scenario gallery followed by a placeholder modal: to begin a story you first
+ * picked a *world*, and to make a world you opened an editor with a JSON stat
+ * schema, a story-card table and an art picker. That is a fine way to build a
+ * D&D module and a poor way to start a mystery.
+ *
+ * Two rules shaped this form.
+ *
+ * **Only the name is required.** Everything else has a sensible blank. A reader
+ * who types "Westhaven" and presses Start gets a working campaign and can write
+ * the first line themselves; the rest of the fields are there for someone who
+ * already knows what they want. §7 is explicit that the data model must not be
+ * a gate on beginning.
+ *
+ * **No genre is privileged.** There is no fantasy vocabulary in the labels, the
+ * placeholders or the composed instructions — the same form has to fit a
+ * western and a horror story. Genre and tone are free text with suggestions
+ * rather than a closed list, because a closed list is a judgement about which
+ * stories this product is for.
+ *
+ * The style answers are composed into the campaign's narrator instructions
+ * (`ai_instructions`), which is the field the prompt builder already reads. No
+ * new backend concept was invented to hold "tone" — it is a sentence in the
+ * instructions, which is what it would have to become anyway.
+ */
+
+import { useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { api } from '../api'
+import { useToast } from '../components'
+import { classifyError } from '../errors'
+import { blocksPlay, useModelStatus } from '../modelStatus'
+import { ModelSetupNotice } from '../ModelSetupNotice'
+
+const GENRES = [
+  'Fantasy', 'Science fiction', 'Mystery', 'Historical',
+  'Western', 'Horror', 'Thriller', 'Literary',
+]
+const TONES = [
+  'Grounded and restrained', 'Warm and hopeful', 'Bleak', 'Wry',
+  'Tense', 'Whimsical', 'Epic',
+]
+const POV = [
+  { value: 'second-present', label: 'Second person, present tense ("You walk…")' },
+  { value: 'first-past', label: 'First person, past tense ("I walked…")' },
+  { value: 'third-past', label: 'Third person, past tense ("She walked…")' },
+  { value: 'third-present', label: 'Third person, present tense ("She walks…")' },
+]
+const LENGTHS = [
+  { value: 'brief', label: 'Brief — a paragraph or two' },
+  { value: 'medium', label: 'Medium — two to four paragraphs' },
+  { value: 'long', label: 'Long — four or more paragraphs' },
+]
+
+const POV_SENTENCE = {
+  'second-present': 'Write in second person, present tense.',
+  'first-past': 'Write in first person, past tense.',
+  'third-past': 'Write in third person, past tense.',
+  'third-present': 'Write in third person, present tense.',
+}
+const LENGTH_SENTENCE = {
+  brief: 'Keep responses brief — one or two paragraphs.',
+  medium: 'Keep responses to roughly two to four paragraphs.',
+  long: 'Write at length — four or more paragraphs.',
+}
+
+/**
+ * Turns the style answers into narrator instructions.
+ *
+ * Exported because the composition is the one piece of real logic on this
+ * screen and a component test can check it without rendering anything.
+ */
+export function composeInstructions({ genre, tone, pov, length, style }) {
+  const lines = []
+  if (genre.trim()) lines.push(`This is a ${genre.trim().toLowerCase()} story.`)
+  if (tone.trim()) lines.push(`The tone is ${tone.trim().toLowerCase()}.`)
+  if (POV_SENTENCE[pov]) lines.push(POV_SENTENCE[pov])
+  if (LENGTH_SENTENCE[length]) lines.push(LENGTH_SENTENCE[length])
+  // Always last, so a reader's own words can override anything above them.
+  if (style.trim()) lines.push(style.trim())
+  return lines.join(' ')
+}
+
+/** A text field with a datalist of suggestions — open, not a closed set. */
+function SuggestField({ id, label, value, onChange, options, placeholder, hint }) {
+  return (
+    <div className="field">
+      <label htmlFor={id}>{label}</label>
+      <input
+        id={id}
+        type="text"
+        value={value}
+        list={`${id}-options`}
+        placeholder={placeholder}
+        autoComplete="off"
+        onChange={(e) => onChange(e.target.value)}
+      />
+      <datalist id={`${id}-options`}>
+        {options.map((o) => <option key={o} value={o} />)}
+      </datalist>
+      {hint && <p className="field-hint">{hint}</p>}
+    </div>
+  )
+}
+
+export default function NewCampaign() {
+  const navigate = useNavigate()
+  const toast = useToast()
+  const { status } = useModelStatus()
+
+  const [title, setTitle] = useState('')
+  const [genre, setGenre] = useState('')
+  const [tone, setTone] = useState('')
+  const [pov, setPov] = useState('second-present')
+  const [length, setLength] = useState('medium')
+  const [style, setStyle] = useState('')
+  const [protagonist, setProtagonist] = useState('')
+  const [pronouns, setPronouns] = useState('')
+  const [protagonistDesc, setProtagonistDesc] = useState('')
+  const [opening, setOpening] = useState('')
+  const [canon, setCanon] = useState('')
+  const [creating, setCreating] = useState(false)
+
+  const start = async (event) => {
+    event.preventDefault()
+    if (!title.trim() || creating) return
+    setCreating(true)
+    try {
+      const campaign = await api.createAdventure({
+        title: title.trim(),
+        opening: opening.trim(),
+        // One rule per line is the lightest editor that produces a list, and it
+        // is what a person writing rules actually does.
+        canon_rules: canon.split('\n').map((r) => r.trim()).filter(Boolean),
+        persona_name: protagonist.trim(),
+        persona_pronouns: pronouns.trim(),
+        persona_desc: protagonistDesc.trim(),
+      })
+      const instructions = composeInstructions({ genre, tone, pov, length, style })
+      if (instructions) {
+        await api.updateAdventure(campaign.id, { ai_instructions: instructions })
+      }
+      navigate(`/play/${campaign.id}`)
+    } catch (err) {
+      toast(classifyError(err.message).detail, 'error')
+      setCreating(false)
+    }
+  }
+
+  return (
+    <div className="page setup">
+      <h1>New campaign</h1>
+      <p className="setup-lede">
+        Only a name is needed. Everything else can be changed later, or left to
+        the story to decide.
+      </p>
+
+      {blocksPlay(status) && <ModelSetupNotice />}
+
+      <form onSubmit={start}>
+        <section className="setup-section">
+          <h2>Name</h2>
+          <div className="field">
+            <label htmlFor="campaign-title">What is this story called?</label>
+            <input
+              id="campaign-title"
+              type="text"
+              required
+              autoFocus
+              maxLength={120}
+              value={title}
+              placeholder="The Westhaven Enquiry"
+              onChange={(e) => setTitle(e.target.value)}
+            />
+          </div>
+        </section>
+
+        <section className="setup-section">
+          <h2>Story profile</h2>
+          <div className="field-row">
+            <SuggestField
+              id="campaign-genre" label="Genre" value={genre} onChange={setGenre}
+              options={GENRES} placeholder="Mystery"
+            />
+            <SuggestField
+              id="campaign-tone" label="Tone" value={tone} onChange={setTone}
+              options={TONES} placeholder="Grounded and restrained"
+            />
+          </div>
+          <div className="field-row">
+            <div className="field">
+              <label htmlFor="campaign-pov">Voice</label>
+              <select id="campaign-pov" value={pov} onChange={(e) => setPov(e.target.value)}>
+                {POV.map((o) => <option key={o.value} value={o.value}>{o.label}</option>)}
+              </select>
+            </div>
+            <div className="field">
+              <label htmlFor="campaign-length">Narration length</label>
+              <select
+                id="campaign-length" value={length}
+                onChange={(e) => setLength(e.target.value)}
+              >
+                {LENGTHS.map((o) => <option key={o.value} value={o.value}>{o.label}</option>)}
+              </select>
+            </div>
+          </div>
+          <div className="field">
+            <label htmlFor="campaign-style">Anything else the narrator should know</label>
+            <textarea
+              id="campaign-style" rows={2} maxLength={2000} value={style}
+              placeholder="Never resolve a scene with violence without warning me first."
+              onChange={(e) => setStyle(e.target.value)}
+            />
+          </div>
+        </section>
+
+        <section className="setup-section">
+          <h2>Protagonist</h2>
+          <div className="field-row">
+            <div className="field">
+              <label htmlFor="campaign-protagonist">Name</label>
+              <input
+                id="campaign-protagonist" type="text" maxLength={80} value={protagonist}
+                placeholder="Aldric" autoComplete="off"
+                onChange={(e) => setProtagonist(e.target.value)}
+              />
+            </div>
+            <div className="field">
+              <label htmlFor="campaign-pronouns">Pronouns</label>
+              <input
+                id="campaign-pronouns" type="text" maxLength={40} value={pronouns}
+                placeholder="they/them" autoComplete="off"
+                onChange={(e) => setPronouns(e.target.value)}
+              />
+            </div>
+          </div>
+          <div className="field">
+            <label htmlFor="campaign-protagonist-desc">Who are they?</label>
+            <textarea
+              id="campaign-protagonist-desc" rows={2} maxLength={2000} value={protagonistDesc}
+              placeholder="A traveling investigator, patient and hard to lie to."
+              onChange={(e) => setProtagonistDesc(e.target.value)}
+            />
+          </div>
+        </section>
+
+        <section className="setup-section">
+          <h2>Opening scene</h2>
+          <div className="field">
+            <label htmlFor="campaign-opening">Where does the story begin?</label>
+            <textarea
+              id="campaign-opening" rows={4} maxLength={8000} value={opening}
+              placeholder={
+                'You sit at a shared table in the Crooked Lantern Tavern. In your '
+                + 'pocket is a small silver key you took from a missing scholar’s desk.'
+              }
+              onChange={(e) => setOpening(e.target.value)}
+            />
+            <p className="field-hint">
+              Left blank, the story opens on an empty page and begins with
+              whatever you write first.
+            </p>
+          </div>
+        </section>
+
+        <section className="setup-section">
+          <h2>Canon</h2>
+          <div className="field">
+            <label htmlFor="campaign-canon">
+              What is true in this story, and must stay true?
+            </label>
+            <textarea
+              id="campaign-canon" rows={4} maxLength={8000} value={canon}
+              placeholder={'One rule per line.\nResurrection is impossible.\nNobody in this town owns a car.'}
+              onChange={(e) => setCanon(e.target.value)}
+            />
+            <p className="field-hint">
+              One per line. These carry more authority than anything the story
+              later invents — the narrator is told them, and a turn that
+              contradicts one is refused. You can change them at any time.
+            </p>
+          </div>
+        </section>
+
+        <div className="setup-actions">
+          <button type="submit" className="primary" disabled={!title.trim() || creating}>
+            {creating ? 'Starting…' : 'Start campaign'}
+          </button>
+          <button type="button" onClick={() => navigate('/')} disabled={creating}>
+            Cancel
+          </button>
+        </div>
+      </form>
+    </div>
+  )
+}