From 4e3f2aaf365aeba332101fb5ceab6ca22271cb12 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 2 Nov 2026 04:15:44 +0000
Subject: [PATCH 1/4] fix(vibe-coding-mad-libs): match preview wording to
 show_preview outcomes and fix the form's review issues

---
 .../skills/start-challenge/SKILL.md           |  11 +-
 challenges/vibe-coding-mad-libs/README.md     |   6 +-
 .../vibe-coding-mad-libs/challenge.json       |   2 +-
 challenges/vibe-coding-mad-libs/dice.mjs      |  48 +++++
 challenges/vibe-coding-mad-libs/intro.md      |   5 +-
 challenges/vibe-coding-mad-libs/mad-libs.mjs  |  84 ++++++--
 .../skills/start-challenge/SKILL.md           |  36 ++--
 test/vibe-coding-mad-libs.test.mjs            | 195 ++++++++++++++++--
 8 files changed, 334 insertions(+), 53 deletions(-)
 create mode 100644 challenges/vibe-coding-mad-libs/dice.mjs

diff --git a/challenges/birdsbirdbirds/skills/start-challenge/SKILL.md b/challenges/birdsbirdbirds/skills/start-challenge/SKILL.md
index 8f7a871..6eb4649 100644
--- a/challenges/birdsbirdbirds/skills/start-challenge/SKILL.md
+++ b/challenges/birdsbirdbirds/skills/start-challenge/SKILL.md
@@ -38,8 +38,11 @@ only because someone asks: its condition must hold.
 
 Open the drawing page right away, as your first action once the challenge
 starts (after `session_info`, when you have it): call `show_preview` with
-`http://127.0.0.1:4322/` without asking first. Without `show_preview`, give
-them that URL to open right away.
+`http://127.0.0.1:4322/` without asking first. When its `outcome` is
+`offered`, tell them to click Open preview to see the drawing page; nothing
+is open yet, so never say it is. When it is `navigated`, say the page is
+showing in Chrome beside the station. Without `show_preview`, or when it
+fails, give them that URL to open right away.
 
 When you resume with `draw-bird` not yet complete, first use `bash` to check
 whether `bird.png` exists in the current directory: a save made just before
@@ -111,8 +114,8 @@ checker or edit it. When it passes, report `animate`.
 
 The drawing page switches to the sky on its own once a valid `bird.json`
 exists. Tell the participant to look at it (call `show_preview` again if the
-page was closed). They can press "Draw again" to redraw; if they do, start
-again at step 1.
+page was closed, and on `offered` tell them to click Open preview). They
+can press "Draw again" to redraw; if they do, start again at step 1.
 
 Ask how the flight looks and offer one tweak, such as faster, higher, or
 more wobbly. If they want it, edit `bird.json`, rerun the checker, and let
diff --git a/challenges/vibe-coding-mad-libs/README.md b/challenges/vibe-coding-mad-libs/README.md
index b915591..11b8b05 100644
--- a/challenges/vibe-coding-mad-libs/README.md
+++ b/challenges/vibe-coding-mad-libs/README.md
@@ -2,14 +2,16 @@
 
 A 10-minute terminal challenge. The participant fills four Mad Libs blanks,
 Theme, Subject, Audience, and Style, by inventing answers or rolling physical
-dice against [`dice-sheet.md`](dice-sheet.md). Pi builds a self-contained
+dice and looking each roll up in the form's Roll dice view, which shows the
+tables in [`dice-sheet.md`](dice-sheet.md). Pi builds a self-contained
 `index.html` from the sentence, shows it in Chrome beside the station, and
 then makes one change the participant asks for.
 
 | File | Role |
 | --- | --- |
-| `mad-libs.mjs` | Pi extension: the four-blank form and `/mad-libs` |
+| `mad-libs.mjs` | Pi extension: the four-blank form, its Roll dice view, and `/mad-libs` |
 | `prompt.mjs` | Assembles and checks the sentence |
+| `dice.mjs` | Parses `dice-sheet.md` into the Roll dice tables |
 | `preview.mjs` | Serves `index.html` on `http://127.0.0.1:4321/` with live reload |
 | `install` | Installs the Pi packages the extension imports |
 | `setup`, `cleanup` | Copy the dice sheet and start the preview; stop it |
diff --git a/challenges/vibe-coding-mad-libs/challenge.json b/challenges/vibe-coding-mad-libs/challenge.json
index 55df3bc..f9572a4 100644
--- a/challenges/vibe-coding-mad-libs/challenge.json
+++ b/challenges/vibe-coding-mad-libs/challenge.json
@@ -16,7 +16,7 @@
     {
       "id": "fill-prompt",
       "title": "Fill in your prompt",
-      "hint": "Fill the four blanks. Invent answers, or roll dice and ask Pi to show dice-sheet.md.",
+      "hint": "Fill the four blanks. Invent answers, or roll dice and look them up with the form's Roll dice.",
       "done_when": "The participant sent a prompt naming a kind of app, a subject, an audience, and a style, with no blank left unfilled."
     },
     {
diff --git a/challenges/vibe-coding-mad-libs/dice.mjs b/challenges/vibe-coding-mad-libs/dice.mjs
new file mode 100644
index 0000000..5dcceb3
--- /dev/null
+++ b/challenges/vibe-coding-mad-libs/dice.mjs
@@ -0,0 +1,48 @@
+// The optional dice tables, parsed from dice-sheet.md: the one copy the form
+// shows and setup gives the workspace.
+
+import { readFileSync } from 'node:fs'
+
+import { FIELDS } from './prompt.mjs'
+
+const DICE_SHEET = new URL('./dice-sheet.md', import.meta.url)
+
+const TABLE_HEADING = /^## (\w+) \(d(\d+)\)$/
+const TABLE_ROW = /^\| (\d+) \| (.+?) \|$/
+
+/**
+ * Parses a dice sheet's `## <Label> (d<sides>)` tables into one entry per
+ * field, in field order: `{ field, die, options }`, where `options[roll - 1]`
+ * is the option for that roll. Throws naming the field when its table is
+ * missing or its rolls aren't 1 to the die's sides, in order.
+ */
+export function parseDiceSheet(markdown) {
+  const tablesByLabel = new Map()
+  let current
+  for (const line of markdown.split('\n')) {
+    const heading = TABLE_HEADING.exec(line)
+    if (heading) {
+      current = { sides: Number(heading[2]), rows: [] }
+      tablesByLabel.set(heading[1], current)
+      continue
+    }
+
+    const row = TABLE_ROW.exec(line)
+    if (row && current) current.rows.push({ roll: Number(row[1]), option: row[2] })
+  }
+
+  return FIELDS.map((field) => {
+    const table = tablesByLabel.get(field.label)
+    if (!table) throw new Error(`The dice sheet has no ${field.label} table`)
+
+    const inOrder = table.rows.length === table.sides && table.rows.every(({ roll }, index) => roll === index + 1)
+    if (!inOrder) throw new Error(`The dice sheet's ${field.label} table must list rolls 1 to ${table.sides} in order`)
+
+    return { field, die: `d${table.sides}`, options: table.rows.map(({ option }) => option) }
+  })
+}
+
+/** Reads and parses the package's own dice-sheet.md, as {@link parseDiceSheet} does. */
+export function readDiceTables() {
+  return parseDiceSheet(readFileSync(DICE_SHEET, 'utf8'))
+}
diff --git a/challenges/vibe-coding-mad-libs/intro.md b/challenges/vibe-coding-mad-libs/intro.md
index 1d1aa01..47a9187 100644
--- a/challenges/vibe-coding-mad-libs/intro.md
+++ b/challenges/vibe-coding-mad-libs/intro.md
@@ -3,9 +3,8 @@ Tell Pi what to build by filling in one sentence:
 > Build a [Theme] about [Subject] for [Audience] in [Style] style.
 
 A form opens after Pi says hello. Type your own answers, or roll the dice
-at the booth: press Esc and ask Pi to show `dice-sheet.md` to look up each
-roll, then type `/mad-libs` to return to the form. The dice are optional,
-and mixing rolled and invented answers is fine.
+at the booth and look up each roll with the form's Roll dice option. The
+dice are optional, and mixing rolled and invented answers is fine.
 
 Pi then builds your app as one web page and offers to open it in Chrome
 beside the station. Try it, ask Pi for one change, and try it again.
diff --git a/challenges/vibe-coding-mad-libs/mad-libs.mjs b/challenges/vibe-coding-mad-libs/mad-libs.mjs
index f074cec..2280f83 100644
--- a/challenges/vibe-coding-mad-libs/mad-libs.mjs
+++ b/challenges/vibe-coding-mad-libs/mad-libs.mjs
@@ -1,14 +1,17 @@
 // Pi extension: the four-blank Mad Libs form. It opens once Pi's welcome
 // finishes, reopens with /mad-libs, and sends the filled sentence as the
-// participant's message. Typing the sentence in Pi's editor works without it.
+// participant's message. Its Roll dice view shows the dice sheet's tables.
+// Typing the sentence in Pi's editor works without it.
 
 import { Input, matchesKey, truncateToWidth, wrapTextWithAnsi } from '@earendil-works/pi-tui'
 
+import { readDiceTables } from './dice.mjs'
 import { FIELDS, PROMPT_TEMPLATE, assemblePrompt, fillSentence, findBlankField, hasUnfilledBlank, isFinishedPrompt } from './prompt.mjs'
 
-/** The form's focus stops: one per field, then the Build button. */
+/** The form's focus stops: one per field, then the Build and Roll dice buttons. */
 const BUILD_BUTTON = FIELDS.length
-const FOCUS_STOPS = FIELDS.length + 1
+const ROLL_DICE_BUTTON = FIELDS.length + 1
+const FOCUS_STOPS = FIELDS.length + 2
 
 /** How many lines of the sentence preview the form shows. */
 const PREVIEW_LINES = 5
@@ -27,14 +30,30 @@ function promptAlreadySent(ctx) {
     && textParts(entry.message.content).some(isFinishedPrompt))
 }
 
+/** Joins words with no-break spaces, so wrapping never splits them. */
+const keepTogether = (text) => text.replaceAll(' ', '\u00a0')
+
+/**
+ * One line per dice table, such as `Theme (d6): 1 Dashboard · 2 Game · …`,
+ * each roll kept on one line with its option.
+ */
+function diceLines(diceTables) {
+  return diceTables.map(({ field, die, options }) => {
+    const rolls = options.map((option, index) => keepTogether(`${index + 1} ${option}`))
+
+    return `${field.label} (${die}): ${rolls.join(' · ')}`
+  })
+}
+
 /**
  * Builds the form component for `ctx.ui.custom`. `draft` keeps answers
- * across closes, keyed by field; `keybindings` supplies Pi's submit and
- * cancel keys; `done` receives the sentence, or null when cancelled.
+ * across closes, keyed by field; `diceTables` fill the Roll dice view;
+ * `keybindings` supplies Pi's submit and cancel keys; `done` receives the
+ * sentence, or null when cancelled.
  */
-function createForm({ tui, theme, keybindings, draft, done }) {
+function createForm({ tui, theme, keybindings, draft, diceTables, done }) {
   const inputs = FIELDS.map((field) => {
-    const input = new Input({ prompt: '', placeholder: field.placeholder })
+    const input = new Input({ prompt: '', placeholder: field.placeholder, placeholderStyle: (text) => theme.fg('muted', text) })
     // setValue leaves the cursor at column zero; typing the draft puts it at the end.
     if (draft[field.key]) input.handleInput(draft[field.key])
 
@@ -42,8 +61,21 @@ function createForm({ tui, theme, keybindings, draft, done }) {
   })
   let focusedStop = 0
   let hasFocus = true
+  let showingDice = false
   let error = ''
 
+  /**
+   * Draws field `index`: the focused one as its Input, with the cursor, and
+   * the rest as plain text, since Input draws a cursor even when unfocused.
+   */
+  function renderField(index, width) {
+    if (hasFocus && index === focusedStop) return inputs[index].render(width)
+
+    const value = inputs[index].getValue()
+
+    return [value || theme.fg('muted', FIELDS[index].placeholder)]
+  }
+
   /** Moves focus to stop `target`, wrapping around both ends. */
   function focusStop(target) {
     focusedStop = (target + FOCUS_STOPS) % FOCUS_STOPS
@@ -65,6 +97,23 @@ function createForm({ tui, theme, keybindings, draft, done }) {
     done(assemblePrompt(draft))
   }
 
+  /** Switches between the fields and the Roll dice view, keeping the draft. */
+  function showDice(show) {
+    showingDice = show
+    tui.requestRender()
+  }
+
+  /** Draws the dice tables, wrapped to `width`, with how to go back. */
+  function renderDice(width) {
+    const wrapWidth = Math.max(1, width)
+
+    return [
+      truncateToWidth(theme.fg('accent', theme.bold('Roll the dice')), wrapWidth),
+      truncateToWidth(theme.fg('muted', 'Type each roll\'s option into its blank, or invent your own.   Enter/Esc: back to the form'), wrapWidth),
+      ...diceLines(diceTables).flatMap((line) => wrapTextWithAnsi(line, wrapWidth)),
+    ]
+  }
+
   focusStop(0)
 
   return {
@@ -76,13 +125,21 @@ function createForm({ tui, theme, keybindings, draft, done }) {
       focusStop(focusedStop)
     },
     handleInput(data) {
+      if (showingDice) {
+        const leavesDice = keybindings.matches(data, 'tui.select.cancel') || keybindings.matches(data, 'tui.input.submit')
+
+        return leavesDice ? showDice(false) : undefined
+      }
       if (keybindings.matches(data, 'tui.select.cancel')) return done(null)
       if (matchesKey(data, 'shift+tab')) return focusStop(focusedStop - 1)
       if (matchesKey(data, 'tab')) return focusStop(focusedStop + 1)
       if (keybindings.matches(data, 'tui.input.submit')) {
-        return focusedStop === BUILD_BUTTON ? build() : focusStop(focusedStop + 1)
+        if (focusedStop === BUILD_BUTTON) return build()
+        if (focusedStop === ROLL_DICE_BUTTON) return showDice(true)
+
+        return focusStop(focusedStop + 1)
       }
-      if (focusedStop === BUILD_BUTTON) return
+      if (focusedStop >= BUILD_BUTTON) return
 
       const field = FIELDS[focusedStop]
       inputs[focusedStop].handleInput(data)
@@ -91,6 +148,8 @@ function createForm({ tui, theme, keybindings, draft, done }) {
       tui.requestRender()
     },
     render(width) {
+      if (showingDice) return renderDice(width)
+
       const fit = (text) => truncateToWidth(text, Math.max(1, width))
       const marker = (stop) => (focusedStop === stop ? '›' : ' ')
       const lines = [
@@ -99,9 +158,9 @@ function createForm({ tui, theme, keybindings, draft, done }) {
       ]
       FIELDS.forEach((field, index) => {
         lines.push(fit(`${marker(index)} ${field.label}`))
-        lines.push(...inputs[index].render(width).map(fit))
+        lines.push(...renderField(index, width).map(fit))
       })
-      lines.push(fit(`${marker(BUILD_BUTTON)} [ Build ]`), '')
+      lines.push(fit(`${marker(BUILD_BUTTON)} [ Build ]   ${marker(ROLL_DICE_BUTTON)} [ Roll dice ]`), '')
 
       const preview = wrapTextWithAnsi(fillSentence(draft), Math.max(1, width))
       lines.push(...preview.slice(0, PREVIEW_LINES).map(fit))
@@ -119,6 +178,7 @@ function createForm({ tui, theme, keybindings, draft, done }) {
 /** Registers the form, its /mad-libs command, and the typed-sentence check with Pi. */
 export default function madLibs(pi) {
   const draft = Object.fromEntries(FIELDS.map((field) => [field.key, '']))
+  const diceTables = readDiceTables()
   let formOpen = false
   let openAfterWelcome = false
 
@@ -136,7 +196,7 @@ export default function madLibs(pi) {
     formOpen = true
     let sentence
     try {
-      sentence = await ctx.ui.custom((tui, theme, keybindings, done) => createForm({ tui, theme, keybindings, draft, done }))
+      sentence = await ctx.ui.custom((tui, theme, keybindings, done) => createForm({ tui, theme, keybindings, draft, diceTables, done }))
     } catch {
       ctx.ui.notify(`The form couldn't open. Type the sentence instead: ${PROMPT_TEMPLATE}`, 'warning')
       return
diff --git a/challenges/vibe-coding-mad-libs/skills/start-challenge/SKILL.md b/challenges/vibe-coding-mad-libs/skills/start-challenge/SKILL.md
index 6469da3..8aa077d 100644
--- a/challenges/vibe-coding-mad-libs/skills/start-challenge/SKILL.md
+++ b/challenges/vibe-coding-mad-libs/skills/start-challenge/SKILL.md
@@ -9,21 +9,17 @@ Be warm, brief, and concrete. Work only in the current directory.
 
 ## Welcome
 
-Welcome the participant in two or three sentences, then say that a form opens
-once you finish: four blanks, Theme (the kind of app), Subject, Audience, and
-Style. The form shows its own keys. They can invent answers, or roll the
-booth's dice and look up each roll on the dice sheet: Esc closes the form so
-they can ask you to show it, and `/mad-libs` brings the form back. You can't
-roll for them, so never pretend you did. If the form doesn't open, they can
-type the whole sentence instead:
+Welcome the participant in two sentences: one saying a form for their four
+blanks opens once you finish, and one asking them to keep secrets and personal
+details out of their answers. The form shows its keys and its Roll dice
+tables, so don't explain them. Then end your turn, so the form can open.
 
-> Build a [Theme] about [Subject] for [Audience] in [Style] style.
+If the form doesn't open, they can type the whole sentence instead:
 
-Ask them to keep secrets and personal details out of their answers. End your
-turn there, so the form can open.
+> Build a [Theme] about [Subject] for [Audience] in [Style] style.
 
-When they ask for the dice sheet, `read` `dice-sheet.md` and show its four
-tables as they are, then remind them that `/mad-libs` reopens the form.
+You can't roll for them, so never pretend you did. When they ask for the dice
+sheet, `read` `dice-sheet.md` and show its four tables as they are.
 
 ## Steps
 
@@ -35,15 +31,21 @@ participant which step they finished instead, without mentioning points.
    you start building. A bracketed blank or a request to skip doesn't count.
 2. **build-app.** Write the app to `index.html`, then read it back to check
    it is whole. As soon as it is, call `show_preview` with
-   `http://127.0.0.1:4321/` without asking first.
-   When `show_preview` is missing or fails, give them that URL to open.
+   `http://127.0.0.1:4321/` without asking first, and word what you say by
+   its `outcome`:
+   - `offered`: a dialog is asking first, so tell them to click Open preview
+     to see their app. Nothing is open yet; never say it is.
+   - `navigated`: say their app is showing in Chrome beside the station.
+   - `show_preview` missing or failed: give them that URL to open.
+
    Nothing watches the page, so ask them to try it and tell you how it went.
    Report `build-app` only after they say it works; if it doesn't, fix it and
    ask again.
 3. **improve-app.** Ask what one thing they'd change. Make that change in
-   `index.html`. After the change, call `show_preview` again; it brings back
-   a closed preview, and an open one reloads on its own. Ask them to try it,
-   and report `improve-app` only after they confirm it works.
+   `index.html`. After the change, call `show_preview` again and word it by
+   its `outcome` as in step 2: `navigated` means the open preview now shows
+   the change, and `offered` means they click Open preview to see it. Ask
+   them to try it, and report `improve-app` only after they confirm it works.
 
 ## Building the app
 
diff --git a/test/vibe-coding-mad-libs.test.mjs b/test/vibe-coding-mad-libs.test.mjs
index 7617eaa..25b9628 100644
--- a/test/vibe-coding-mad-libs.test.mjs
+++ b/test/vibe-coding-mad-libs.test.mjs
@@ -1,6 +1,7 @@
 // Proves the vibe-coding-mad-libs package: prompt assembly, the extension
-// loading under its pinned Pi packages, and the setup and cleanup hooks. The
-// install test is the only one that uses the network, to reach the npm registry.
+// loading under its pinned Pi packages, the form it draws, and the setup and
+// cleanup hooks. Installing a copy of the package, shared by the extension and
+// form tests, is the only network use, to reach the npm registry.
 
 import assert from 'node:assert/strict'
 import { spawn } from 'node:child_process'
@@ -8,10 +9,11 @@ import { cp, link, mkdtemp, readFile, rm, stat, symlink, writeFile } from 'node:
 import { createServer, get } from 'node:http'
 import { tmpdir } from 'node:os'
 import path from 'node:path'
-import { test } from 'node:test'
+import { after, test } from 'node:test'
 import { fileURLToPath, pathToFileURL } from 'node:url'
 
-import { assemblePrompt, fillSentence, hasUnfilledBlank, isFinishedPrompt } from '../challenges/vibe-coding-mad-libs/prompt.mjs'
+import { parseDiceSheet, readDiceTables } from '../challenges/vibe-coding-mad-libs/dice.mjs'
+import { FIELDS, assemblePrompt, fillSentence, hasUnfilledBlank, isFinishedPrompt } from '../challenges/vibe-coding-mad-libs/prompt.mjs'
 
 const testDirectory = path.dirname(fileURLToPath(import.meta.url))
 const packageDirectory = path.join(testDirectory, '..', 'challenges', 'vibe-coding-mad-libs')
@@ -20,6 +22,14 @@ const serverExitTimeoutMilliseconds = 5_000
 
 const filledAnswers = { theme: 'game', subject: 'cats', audience: 'kids', style: 'retro' }
 
+/** Options for a test that may pay for the shared install. */
+const installedPackageTest = { timeout: installTimeoutMilliseconds + 60_000 }
+
+const diceSheetPath = path.join(packageDirectory, 'dice-sheet.md')
+
+const keys = { enter: '\r', escape: '\x1b', tab: '\t' }
+const reverseVideo = '\x1b[7m'
+
 /** Makes a fresh temporary directory that `context` removes when the test ends. */
 const makeTemporaryDirectory = async (context) => {
   const directory = await mkdtemp(path.join(tmpdir(), 'mad-libs-test-'))
@@ -28,6 +38,95 @@ const makeTemporaryDirectory = async (context) => {
   return directory
 }
 
+let installedPackage
+let installRoot
+after(() => installRoot && rm(installRoot, { recursive: true, force: true }))
+
+/**
+ * Copies the package without its node_modules and runs its install hook
+ * through a symlink, as a station may reach its package through one (macOS's
+ * /tmp is one). Runs once per test run and resolves with the copy's real
+ * directory; throws with install's stderr when it fails.
+ */
+const installPackageOnce = () => {
+  installedPackage ??= (async () => {
+    installRoot = await mkdtemp(path.join(tmpdir(), 'mad-libs-test-'))
+    const copy = path.join(installRoot, 'package')
+    const linked = path.join(installRoot, 'linked-package')
+    await cp(packageDirectory, copy, { recursive: true, filter: (source) => path.basename(source) !== 'node_modules' })
+    await symlink(copy, linked)
+
+    const installed = await runExecutable(path.join(linked, 'install'), [], { timeout: installTimeoutMilliseconds })
+    if (installed.code !== 0) throw new Error(`install failed: ${installed.stderr}`)
+
+    return copy
+  })()
+
+  return installedPackage
+}
+
+/** A theme that marks each color by name, so a test can see what is muted. */
+const markingTheme = {
+  fg: (color, text) => `<${color}>${text}</${color}>`,
+  bold: (text) => text,
+}
+
+/** Pi's submit and cancel keybindings, at their default keys. */
+const defaultKeybindings = {
+  matches: (data, keybinding) => ({ 'tui.input.submit': keys.enter, 'tui.select.cancel': keys.escape })[keybinding] === data,
+}
+
+/**
+ * Loads the extension from the installed copy with a fake Pi, runs
+ * /mad-libs, and returns the open form, the values it closed with, and a
+ * `screen()` that renders it 100 columns wide.
+ */
+const openMadLibsForm = async () => {
+  const { default: madLibs } = await import(pathToFileURL(path.join(await installPackageOnce(), 'mad-libs.mjs')))
+  const commands = new Map()
+  madLibs({ registerCommand: (name, command) => commands.set(name, command), on: () => {}, sendUserMessage: () => {} })
+  const closedWith = []
+  let form
+  const ctx = {
+    mode: 'tui',
+    isIdle: () => true,
+    sessionManager: { getBranch: () => [] },
+    ui: {
+      notify: () => {},
+      custom: (factory) => new Promise((resolve) => {
+        const done = (value) => {
+          closedWith.push(value)
+          resolve(value)
+        }
+        form = factory({ requestRender: () => {} }, markingTheme, defaultKeybindings, done)
+      }),
+    },
+  }
+
+  commands.get('mad-libs').handler('', ctx)
+
+  return { form, closedWith, screen: () => form.render(100) }
+}
+
+/** Moves focus from the first field to Roll dice and presses it. */
+const openDiceView = (form) => press(form, keys.tab, keys.tab, keys.tab, keys.tab, keys.tab, keys.enter)
+
+/** Lists every `| roll | option |` row of `markdown` as "roll option". */
+const diceRows = (markdown) => [...markdown.matchAll(/^\| (\d+) \| (.+?) \|$/gm)].map(([, roll, option]) => `${roll} ${option}`)
+
+/** Builds a dice sheet in dice-sheet.md's format; `tables` overrides a field's rows by label. */
+const buildDiceSheet = (tables = {}) => FIELDS.map(({ label }) => {
+  const rows = tables[label] ?? [[1, `${label} one`], [2, `${label} two`]]
+
+  return [`## ${label} (d2)`, '', '| Roll | Option |', '| --- | --- |', ...rows.map(([roll, option]) => `| ${roll} | ${option} |`)].join('\n')
+}).join('\n\n')
+
+/** Sends each of `inputs` to `form` as a separate key press or typed text. */
+const press = (form, ...inputs) => inputs.forEach((input) => form.handleInput(input))
+
+/** The line drawn just under the label of the field named `label`. */
+const fieldLine = (lines, label) => lines[lines.findIndex((line) => line.endsWith(` ${label}`)) + 1]
+
 /** Asks the operating system for a port nothing listens on right now. */
 const findFreePort = () => new Promise((resolve, reject) => {
   const server = createServer()
@@ -211,20 +310,14 @@ for (const { name, text, finished } of finishedPromptCases) {
   })
 }
 
-test('loads the extension under the pinned Pi packages after install through a symlink', { timeout: installTimeoutMilliseconds + 60_000 }, async (context) => {
-  const installedPackage = path.join(await makeTemporaryDirectory(context), 'package')
-  await cp(packageDirectory, installedPackage, { recursive: true, filter: (source) => path.basename(source) !== 'node_modules' })
-  // A station can reach its package through a symlink, as macOS's /tmp is one.
-  const linkedPackage = path.join(await makeTemporaryDirectory(context), 'linked-package')
-  await symlink(installedPackage, linkedPackage)
-  const installed = await runExecutable(path.join(linkedPackage, 'install'), [], { timeout: installTimeoutMilliseconds })
-  assert.equal(installed.code, 0, installed.stderr)
+test('loads the extension under the pinned Pi packages after install through a symlink', installedPackageTest, async (context) => {
+  const installed = await installPackageOnce()
   const projectDirectory = await makeTemporaryDirectory(context)
   const agentDirectory = await makeTemporaryDirectory(context)
-  const piDirectory = path.join(installedPackage, 'node_modules', '@earendil-works', 'pi-coding-agent')
+  const piDirectory = path.join(installed, 'node_modules', '@earendil-works', 'pi-coding-agent')
   const pi = await import(pathToFileURL(path.join(piDirectory, 'dist', 'index.js')))
 
-  const { extensions, errors } = await pi.discoverAndLoadExtensions([path.join(installedPackage, 'mad-libs.mjs')], projectDirectory, agentDirectory)
+  const { extensions, errors } = await pi.discoverAndLoadExtensions([path.join(installed, 'mad-libs.mjs')], projectDirectory, agentDirectory)
 
   const piManifest = JSON.parse(await readFile(path.join(piDirectory, 'package.json'), 'utf8'))
   assert.equal(piManifest.version, '1.0.4')
@@ -236,6 +329,80 @@ test('loads the extension under the pinned Pi packages after install through a s
   }
 })
 
+test('the form draws every placeholder muted', installedPackageTest, async () => {
+  const { form, screen } = await openMadLibsForm()
+
+  press(form, keys.tab, keys.tab, keys.tab, keys.tab)
+  const lines = screen()
+
+  for (const { label, placeholder } of FIELDS) {
+    assert.equal(fieldLine(lines, label), `<muted>${placeholder}</muted>`)
+  }
+})
+
+test('the form draws a cursor only in the focused field, over a muted placeholder', installedPackageTest, async () => {
+  const { form, screen } = await openMadLibsForm()
+
+  press(form, 'game', keys.tab)
+  const lines = screen()
+
+  assert.deepEqual(lines.filter((line) => line.includes(reverseVideo)), [fieldLine(lines, 'Subject')])
+  assert.match(fieldLine(lines, 'Subject'), /<muted>hat it is about<\/muted>/)
+  assert.equal(fieldLine(lines, 'Theme'), 'game')
+})
+
+test('reads the four dice tables from dice-sheet.md in field order', () => {
+  const tables = readDiceTables()
+
+  assert.deepEqual(tables.map(({ field, die, options }) => [field.key, die, options.length]), [
+    ['theme', 'd6', 6],
+    ['subject', 'd6', 6],
+    ['audience', 'd20', 20],
+    ['style', 'd20', 20],
+  ])
+  assert.equal(tables[0].options[0], 'Dashboard')
+  assert.equal(tables[3].options[19], 'Neon Noir')
+})
+
+const brokenDiceSheetCases = [
+  { name: 'a field has no table', markdown: buildDiceSheet().replace(/## Style[^]*$/, ''), error: /Style/ },
+  { name: 'a roll is skipped', markdown: buildDiceSheet({ Theme: [[1, 'one'], [3, 'three']] }), error: /Theme/ },
+  { name: 'the rolls do not match the die', markdown: buildDiceSheet({ Subject: [[1, 'one']] }), error: /Subject/ },
+]
+
+for (const { name, markdown, error } of brokenDiceSheetCases) {
+  test(`refuses a dice sheet where ${name}`, () => {
+    assert.throws(() => parseDiceSheet(markdown), error)
+  })
+}
+
+test('Roll dice shows every row of dice-sheet.md, compactly by field', installedPackageTest, async () => {
+  const { form, screen } = await openMadLibsForm()
+
+  openDiceView(form)
+  const shown = screen().join(' ').replaceAll('\u00a0', ' ')
+
+  assert.match(shown, /Theme \(d6\): 1 Dashboard · 2 Game · 3 Generator/)
+  for (const row of diceRows(await readFile(diceSheetPath, 'utf8'))) {
+    assert.ok(shown.includes(row), `the dice view leaves out "${row}"`)
+  }
+})
+
+for (const key of ['enter', 'escape']) {
+  test(`${key} in the dice view goes back to the fields, keeping the draft and the form open`, installedPackageTest, async () => {
+    const { form, closedWith, screen } = await openMadLibsForm()
+    press(form, 'game')
+    openDiceView(form)
+
+    press(form, keys[key])
+    const lines = screen()
+
+    assert.deepEqual(closedWith, [])
+    assert.match(lines.join('\n'), /Fill in the blanks/)
+    assert.equal(fieldLine(lines, 'Theme'), 'game')
+  })
+}
+
 test('setup copies the dice sheet and serves the waiting page', async (context) => {
   const port = await findFreePort()
   const workspace = await makeWorkspace(context, port)

From 8ef67acd95d43d88954f70c43bd2f3a99678155c Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 2 Nov 2026 04:20:56 +0000
Subject: [PATCH 2/4] fix(vibe-coding-mad-libs): address review

Name the dice option Roll dice everywhere, keep the dice view's back hint
and whole rolls visible at narrow widths, word the form fallback as
something Pi can see, say previews are offered, and fix the standalone
snippet's package path.
---
 challenges/birdsbirdbirds/README.md           |  2 +-
 challenges/vibe-coding-mad-libs/README.md     | 10 ++---
 .../vibe-coding-mad-libs/challenge.json       |  2 +-
 challenges/vibe-coding-mad-libs/dice.mjs      |  5 ++-
 challenges/vibe-coding-mad-libs/intro.md      |  4 +-
 challenges/vibe-coding-mad-libs/mad-libs.mjs  | 40 ++++++++++++-------
 .../skills/start-challenge/SKILL.md           |  2 +-
 test/vibe-coding-mad-libs.test.mjs            | 12 +++++-
 8 files changed, 49 insertions(+), 28 deletions(-)

diff --git a/challenges/birdsbirdbirds/README.md b/challenges/birdsbirdbirds/README.md
index f57d96a..60f18ad 100644
--- a/challenges/birdsbirdbirds/README.md
+++ b/challenges/birdsbirdbirds/README.md
@@ -25,7 +25,7 @@ dependencies beyond Node.
 
 ## How steps advance
 
-Pi opens the drawing page with `show_preview` as soon as the challenge
+Pi offers the drawing page with `show_preview` as soon as the challenge
 starts. The extension watches the workspace and sends Pi a hidden message
 starting with `[birdsbirdbirds]` when the participant saves a new `bird.png`.
 It starts a turn when Pi is idle and follows the current turn otherwise. The
diff --git a/challenges/vibe-coding-mad-libs/README.md b/challenges/vibe-coding-mad-libs/README.md
index 11b8b05..980da82 100644
--- a/challenges/vibe-coding-mad-libs/README.md
+++ b/challenges/vibe-coding-mad-libs/README.md
@@ -2,14 +2,14 @@
 
 A 10-minute terminal challenge. The participant fills four Mad Libs blanks,
 Theme, Subject, Audience, and Style, by inventing answers or rolling physical
-dice and looking each roll up in the form's Roll dice view, which shows the
+dice and looking each roll up under Roll dice in the form, which shows the
 tables in [`dice-sheet.md`](dice-sheet.md). Pi builds a self-contained
-`index.html` from the sentence, shows it in Chrome beside the station, and
-then makes one change the participant asks for.
+`index.html` from the sentence, offers to show it in Chrome beside the
+station, and then makes one change the participant asks for.
 
 | File | Role |
 | --- | --- |
-| `mad-libs.mjs` | Pi extension: the four-blank form, its Roll dice view, and `/mad-libs` |
+| `mad-libs.mjs` | Pi extension: the four-blank form, its Roll dice tables, and `/mad-libs` |
 | `prompt.mjs` | Assembles and checks the sentence |
 | `dice.mjs` | Parses `dice-sheet.md` into the Roll dice tables |
 | `preview.mjs` | Serves `index.html` on `http://127.0.0.1:4321/` with live reload |
@@ -22,7 +22,7 @@ Install Pi and the adapter at the versions boothstrap pins, as in
 boothstrap's authoring guide, then, from this repo's root:
 
 ```sh
-challenge="$PWD/vibe-coding-mad-libs"
+challenge="$PWD/challenges/vibe-coding-mad-libs"
 "$challenge/install"
 mkdir -p tmp/mad-libs && cd tmp/mad-libs
 "$challenge/setup"
diff --git a/challenges/vibe-coding-mad-libs/challenge.json b/challenges/vibe-coding-mad-libs/challenge.json
index f9572a4..f245878 100644
--- a/challenges/vibe-coding-mad-libs/challenge.json
+++ b/challenges/vibe-coding-mad-libs/challenge.json
@@ -16,7 +16,7 @@
     {
       "id": "fill-prompt",
       "title": "Fill in your prompt",
-      "hint": "Fill the four blanks. Invent answers, or roll dice and look them up with the form's Roll dice.",
+      "hint": "Fill the four blanks. Invent answers, or roll dice and look them up under Roll dice in the form.",
       "done_when": "The participant sent a prompt naming a kind of app, a subject, an audience, and a style, with no blank left unfilled."
     },
     {
diff --git a/challenges/vibe-coding-mad-libs/dice.mjs b/challenges/vibe-coding-mad-libs/dice.mjs
index 5dcceb3..cf7ec01 100644
--- a/challenges/vibe-coding-mad-libs/dice.mjs
+++ b/challenges/vibe-coding-mad-libs/dice.mjs
@@ -1,5 +1,6 @@
-// The optional dice tables, parsed from dice-sheet.md: the one copy the form
-// shows and setup gives the workspace.
+// The optional dice tables, parsed from dice-sheet.md. dice-sheet.md is the
+// one source: the form shows these tables, and setup copies the file into the
+// workspace.
 
 import { readFileSync } from 'node:fs'
 
diff --git a/challenges/vibe-coding-mad-libs/intro.md b/challenges/vibe-coding-mad-libs/intro.md
index 47a9187..211165d 100644
--- a/challenges/vibe-coding-mad-libs/intro.md
+++ b/challenges/vibe-coding-mad-libs/intro.md
@@ -3,8 +3,8 @@ Tell Pi what to build by filling in one sentence:
 > Build a [Theme] about [Subject] for [Audience] in [Style] style.
 
 A form opens after Pi says hello. Type your own answers, or roll the dice
-at the booth and look up each roll with the form's Roll dice option. The
-dice are optional, and mixing rolled and invented answers is fine.
+at the booth and look up each roll under Roll dice in the form. The dice are
+optional, and mixing rolled and invented answers is fine.
 
 Pi then builds your app as one web page and offers to open it in Chrome
 beside the station. Try it, ask Pi for one change, and try it again.
diff --git a/challenges/vibe-coding-mad-libs/mad-libs.mjs b/challenges/vibe-coding-mad-libs/mad-libs.mjs
index 2280f83..2dee125 100644
--- a/challenges/vibe-coding-mad-libs/mad-libs.mjs
+++ b/challenges/vibe-coding-mad-libs/mad-libs.mjs
@@ -3,7 +3,7 @@
 // participant's message. Its Roll dice view shows the dice sheet's tables.
 // Typing the sentence in Pi's editor works without it.
 
-import { Input, matchesKey, truncateToWidth, wrapTextWithAnsi } from '@earendil-works/pi-tui'
+import { Input, matchesKey, truncateToWidth, visibleWidth, wrapTextWithAnsi } from '@earendil-works/pi-tui'
 
 import { readDiceTables } from './dice.mjs'
 import { FIELDS, PROMPT_TEMPLATE, assemblePrompt, fillSentence, findBlankField, hasUnfilledBlank, isFinishedPrompt } from './prompt.mjs'
@@ -30,19 +30,27 @@ function promptAlreadySent(ctx) {
     && textParts(entry.message.content).some(isFinishedPrompt))
 }
 
-/** Joins words with no-break spaces, so wrapping never splits them. */
-const keepTogether = (text) => text.replaceAll(' ', '\u00a0')
-
 /**
- * One line per dice table, such as `Theme (d6): 1 Dashboard · 2 Game · …`,
- * each roll kept on one line with its option.
+ * Draws one dice table as `Theme (d6): 1 Dashboard · 2 Game · …`, wrapped
+ * to `width` between rolls, so a roll stays whole with the separator after
+ * it. pi-tui's wrapping can't do this: it breaks at no-break spaces too.
  */
-function diceLines(diceTables) {
-  return diceTables.map(({ field, die, options }) => {
-    const rolls = options.map((option, index) => keepTogether(`${index + 1} ${option}`))
+function diceTableLines({ field, die, options }, width) {
+  const pieces = options.map((option, index) => `${index + 1} ${option}${index < options.length - 1 ? ' ·' : ''}`)
+  const lines = []
+  let line = `${field.label} (${die}):`
+  for (const piece of pieces) {
+    if (visibleWidth(`${line} ${piece}`) <= width) {
+      line = `${line} ${piece}`
+      continue
+    }
 
-    return `${field.label} (${die}): ${rolls.join(' · ')}`
-  })
+    lines.push(line)
+    line = piece
+  }
+  lines.push(line)
+
+  return lines.map((text) => truncateToWidth(text, width))
 }
 
 /**
@@ -103,14 +111,16 @@ function createForm({ tui, theme, keybindings, draft, diceTables, done }) {
     tui.requestRender()
   }
 
-  /** Draws the dice tables, wrapped to `width`, with how to go back. */
+  /** Draws the dice tables, wrapped to `width`, with how to go back first. */
   function renderDice(width) {
     const wrapWidth = Math.max(1, width)
+    const wrap = (text) => wrapTextWithAnsi(text, wrapWidth)
 
     return [
-      truncateToWidth(theme.fg('accent', theme.bold('Roll the dice')), wrapWidth),
-      truncateToWidth(theme.fg('muted', 'Type each roll\'s option into its blank, or invent your own.   Enter/Esc: back to the form'), wrapWidth),
-      ...diceLines(diceTables).flatMap((line) => wrapTextWithAnsi(line, wrapWidth)),
+      ...wrap(theme.fg('accent', theme.bold('Roll dice'))),
+      ...wrap(theme.fg('muted', 'Enter/Esc: back to the form')),
+      ...wrap(theme.fg('muted', 'Type each roll\'s option into its blank, or invent your own.')),
+      ...diceTables.flatMap((table) => diceTableLines(table, wrapWidth)),
     ]
   }
 
diff --git a/challenges/vibe-coding-mad-libs/skills/start-challenge/SKILL.md b/challenges/vibe-coding-mad-libs/skills/start-challenge/SKILL.md
index 8aa077d..9165fa0 100644
--- a/challenges/vibe-coding-mad-libs/skills/start-challenge/SKILL.md
+++ b/challenges/vibe-coding-mad-libs/skills/start-challenge/SKILL.md
@@ -14,7 +14,7 @@ blanks opens once you finish, and one asking them to keep secrets and personal
 details out of their answers. The form shows its keys and its Roll dice
 tables, so don't explain them. Then end your turn, so the form can open.
 
-If the form doesn't open, they can type the whole sentence instead:
+If they say the form didn't open, give them this sentence to type:
 
 > Build a [Theme] about [Subject] for [Audience] in [Style] style.
 
diff --git a/test/vibe-coding-mad-libs.test.mjs b/test/vibe-coding-mad-libs.test.mjs
index 25b9628..8462e1f 100644
--- a/test/vibe-coding-mad-libs.test.mjs
+++ b/test/vibe-coding-mad-libs.test.mjs
@@ -380,7 +380,7 @@ test('Roll dice shows every row of dice-sheet.md, compactly by field', installed
   const { form, screen } = await openMadLibsForm()
 
   openDiceView(form)
-  const shown = screen().join(' ').replaceAll('\u00a0', ' ')
+  const shown = screen().join(' ')
 
   assert.match(shown, /Theme \(d6\): 1 Dashboard · 2 Game · 3 Generator/)
   for (const row of diceRows(await readFile(diceSheetPath, 'utf8'))) {
@@ -388,6 +388,16 @@ test('Roll dice shows every row of dice-sheet.md, compactly by field', installed
   }
 })
 
+test('the dice view keeps its back hint and each roll whole at 40 columns', installedPackageTest, async () => {
+  const { form } = await openMadLibsForm()
+
+  openDiceView(form)
+  const lines = form.render(40)
+
+  assert.match(lines.join(' '), /Enter\/Esc: back to the form/)
+  assert.deepEqual(lines.filter((line) => line.startsWith('·')), [])
+})
+
 for (const key of ['enter', 'escape']) {
   test(`${key} in the dice view goes back to the fields, keeping the draft and the form open`, installedPackageTest, async () => {
     const { form, closedWith, screen } = await openMadLibsForm()

From 350c2325968f97373155b9a3f8dea41d6c32cf33 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 2 Nov 2026 04:24:09 +0000
Subject: [PATCH 3/4] fix(vibe-coding-mad-libs): wrap a dice roll wider than
 the terminal

---
 challenges/vibe-coding-mad-libs/mad-libs.mjs |  5 +++--
 test/vibe-coding-mad-libs.test.mjs           | 11 +++++++++++
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/challenges/vibe-coding-mad-libs/mad-libs.mjs b/challenges/vibe-coding-mad-libs/mad-libs.mjs
index 2dee125..d50ac23 100644
--- a/challenges/vibe-coding-mad-libs/mad-libs.mjs
+++ b/challenges/vibe-coding-mad-libs/mad-libs.mjs
@@ -33,7 +33,8 @@ function promptAlreadySent(ctx) {
 /**
  * Draws one dice table as `Theme (d6): 1 Dashboard · 2 Game · …`, wrapped
  * to `width` between rolls, so a roll stays whole with the separator after
- * it. pi-tui's wrapping can't do this: it breaks at no-break spaces too.
+ * it. pi-tui's wrapping can't do this: it breaks at no-break spaces too. A
+ * roll wider than `width` wraps on its own lines.
  */
 function diceTableLines({ field, die, options }, width) {
   const pieces = options.map((option, index) => `${index + 1} ${option}${index < options.length - 1 ? ' ·' : ''}`)
@@ -50,7 +51,7 @@ function diceTableLines({ field, die, options }, width) {
   }
   lines.push(line)
 
-  return lines.map((text) => truncateToWidth(text, width))
+  return lines.flatMap((text) => wrapTextWithAnsi(text, width))
 }
 
 /**
diff --git a/test/vibe-coding-mad-libs.test.mjs b/test/vibe-coding-mad-libs.test.mjs
index 8462e1f..83e6f06 100644
--- a/test/vibe-coding-mad-libs.test.mjs
+++ b/test/vibe-coding-mad-libs.test.mjs
@@ -398,6 +398,17 @@ test('the dice view keeps its back hint and each roll whole at 40 columns', inst
   assert.deepEqual(lines.filter((line) => line.startsWith('·')), [])
 })
 
+test('the dice view wraps a roll wider than the terminal instead of cutting it', installedPackageTest, async () => {
+  const { form } = await openMadLibsForm()
+
+  openDiceView(form)
+  const shown = form.render(16).join(' ')
+
+  for (const option of ['Exhausted night-shift nurses', 'Calculator / What-If Tool', 'Audience (d20):']) {
+    assert.ok(shown.replace(/\s+/g, ' ').includes(option), `the dice view cuts "${option}"`)
+  }
+})
+
 for (const key of ['enter', 'escape']) {
   test(`${key} in the dice view goes back to the fields, keeping the draft and the form open`, installedPackageTest, async () => {
     const { form, closedWith, screen } = await openMadLibsForm()

From 4737a66267148140c9b7f00e334baaabc819b66d Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 2 Nov 2026 04:33:34 +0000
Subject: [PATCH 4/4] fix: leave BirdsBirdBirds to #36

---
 challenges/birdsbirdbirds/README.md                   |  2 +-
 .../birdsbirdbirds/skills/start-challenge/SKILL.md    | 11 ++++-------
 2 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/challenges/birdsbirdbirds/README.md b/challenges/birdsbirdbirds/README.md
index 60f18ad..f57d96a 100644
--- a/challenges/birdsbirdbirds/README.md
+++ b/challenges/birdsbirdbirds/README.md
@@ -25,7 +25,7 @@ dependencies beyond Node.
 
 ## How steps advance
 
-Pi offers the drawing page with `show_preview` as soon as the challenge
+Pi opens the drawing page with `show_preview` as soon as the challenge
 starts. The extension watches the workspace and sends Pi a hidden message
 starting with `[birdsbirdbirds]` when the participant saves a new `bird.png`.
 It starts a turn when Pi is idle and follows the current turn otherwise. The
diff --git a/challenges/birdsbirdbirds/skills/start-challenge/SKILL.md b/challenges/birdsbirdbirds/skills/start-challenge/SKILL.md
index 6eb4649..8f7a871 100644
--- a/challenges/birdsbirdbirds/skills/start-challenge/SKILL.md
+++ b/challenges/birdsbirdbirds/skills/start-challenge/SKILL.md
@@ -38,11 +38,8 @@ only because someone asks: its condition must hold.
 
 Open the drawing page right away, as your first action once the challenge
 starts (after `session_info`, when you have it): call `show_preview` with
-`http://127.0.0.1:4322/` without asking first. When its `outcome` is
-`offered`, tell them to click Open preview to see the drawing page; nothing
-is open yet, so never say it is. When it is `navigated`, say the page is
-showing in Chrome beside the station. Without `show_preview`, or when it
-fails, give them that URL to open right away.
+`http://127.0.0.1:4322/` without asking first. Without `show_preview`, give
+them that URL to open right away.
 
 When you resume with `draw-bird` not yet complete, first use `bash` to check
 whether `bird.png` exists in the current directory: a save made just before
@@ -114,8 +111,8 @@ checker or edit it. When it passes, report `animate`.
 
 The drawing page switches to the sky on its own once a valid `bird.json`
 exists. Tell the participant to look at it (call `show_preview` again if the
-page was closed, and on `offered` tell them to click Open preview). They
-can press "Draw again" to redraw; if they do, start again at step 1.
+page was closed). They can press "Draw again" to redraw; if they do, start
+again at step 1.
 
 Ask how the flight looks and offer one tweak, such as faster, higher, or
 more wobbly. If they want it, edit `bird.json`, rerun the checker, and let