From 514edbd8643ec3eff2921591084e0037c95f3290 Mon Sep 17 00:00:00 2001
From: nschimme <5505185+nschimme@users.noreply.github.com>
Date: Sun, 20 Sep 2026 19:38:05 +0000
Subject: [PATCH 01/13] feat(tutorial): implement step rewind replaying and
 reactive pager

- Clear log and cleanly replay history up to the target step on back navigation
- Add reactive pager for multiline MUD outputs with desktop space/enter shortcuts and mobile tap bar
- Reposition Exit button to top-right header across viewports
---
 .../theme/components/TutorialPlayer.vue       | 298 +++++++++++++-----
 1 file changed, 227 insertions(+), 71 deletions(-)

diff --git a/docs/.vitepress/theme/components/TutorialPlayer.vue b/docs/.vitepress/theme/components/TutorialPlayer.vue
index 2d50cb5..86507dc 100644
--- a/docs/.vitepress/theme/components/TutorialPlayer.vue
+++ b/docs/.vitepress/theme/components/TutorialPlayer.vue
@@ -97,6 +97,12 @@ const isSheetOpen = ref(false)
 const isExpanded = ref(false)
 const isModalOpen = ref(false)
 
+// Reactive Pager State
+const pendingPagerChunks = ref([]) // Remaining unrevealed chunks
+const currentPagerTotal = ref(1)
+const currentPagerIndex = ref(1)
+const isPagerActive = computed(() => pendingPagerChunks.value.length > 0)
+
 function openModal() {
   isModalOpen.value = true
 }
@@ -135,14 +141,76 @@ function handleFullscreenChange() {
   }
 }
 
+function advancePager() {
+  if (!isPagerActive.value) return
+  const nextChunk = pendingPagerChunks.value.shift()
+  if (nextChunk) {
+    log.value.push(nextChunk)
+    currentPagerIndex.value++
+    scrollLog()
+  }
+}
+
+function flushPager() {
+  while (pendingPagerChunks.value.length > 0) {
+    const chunk = pendingPagerChunks.value.shift()
+    if (chunk) log.value.push(chunk)
+  }
+  scrollLog()
+}
+
 function handleKeydown(e) {
   if (e.key === 'Escape' && isExpanded.value) {
     if (!document.fullscreenElement) {
       toggleExpand()
     }
+  } else if (isPagerActive.value) {
+    // Only intercept Space key for pager if target is body or input field is empty
+    if (e.key === ' ' || e.key === 'Spacebar' || e.key === 'PageDown') {
+      if (e.target === document.body || (e.target === inputEl.value && !entry.value)) {
+        e.preventDefault()
+        advancePager()
+      }
+    } else if (e.key === 'Enter' && e.target !== inputEl.value) {
+      e.preventDefault()
+      advancePager()
+    }
   }
 }
 
+function pushLogItem(item) {
+  // If item is an example or story with multiline body, check if it needs paging
+  if ((item.kind === 'example' || item.kind === 'story') && item.body) {
+    const lines = item.body.split('\n')
+    // Chunk threshold: if lines > 8
+    if (lines.length > 8) {
+      const chunks = []
+      const chunkSize = 6
+      for (let i = 0; i < lines.length; i += chunkSize) {
+        chunks.push(lines.slice(i, i + chunkSize).join('\n'))
+      }
+
+      // First chunk is pushed immediately
+      item.body = chunks[0]
+      log.value.push(item)
+
+      // Remaining chunks placed in queue
+      const remaining = chunks.slice(1).map(c => ({
+        kind: item.kind,
+        body: c
+      }))
+      pendingPagerChunks.value = remaining
+      currentPagerIndex.value = 1
+      currentPagerTotal.value = chunks.length
+      scrollLog()
+      return
+    }
+  }
+
+  log.value.push(item)
+  scrollLog()
+}
+
 const logEl = ref(null)
 const inputEl = ref(null)
 
@@ -192,46 +260,101 @@ function scrollLog() {
   }
 }
 
-function renderStepLog() {
-  subStepIdx.value = 0
+function goToStep(targetIdx) {
+  pendingPagerChunks.value = []
+  const steps = stepsList.value
+  if (!steps || steps.length === 0) {
+    subStepIdx.value = 0
+    finished.value = false
+    log.value = [{
+      kind: 'lesson',
+      chapterNum: chapterNum.value,
+      title: chapterTitle.value,
+      teach: teachList.value,
+      note: null,
+      ask: null
+    }]
+    scrollLog()
+    focusInput()
+    return
+  }
+
+  const clampedIdx = Math.max(0, Math.min(targetIdx, steps.length - 1))
+  subStepIdx.value = clampedIdx
   finished.value = false
 
   const newLog = []
-  newLog.push({
-    kind: 'lesson',
-    chapterNum: chapterNum.value,
-    title: chapterTitle.value,
-    teach: teachList.value,
-    note: currentSubStep.value ? currentSubStep.value.note : null,
-    ask: currentSubStep.value ? currentSubStep.value.ask : null
-  })
+
+  for (let i = 0; i <= clampedIdx; i++) {
+    const st = steps[i]
+    if (!st) continue
+
+    if (i === 0) {
+      newLog.push({
+        kind: 'lesson',
+        chapterNum: chapterNum.value,
+        title: chapterTitle.value,
+        teach: teachList.value,
+        note: st.note || null,
+        ask: st.ask || null
+      })
+    } else {
+      newLog.push({
+        kind: 'prompt_next',
+        stepIndex: i,
+        totalSteps: steps.length,
+        note: st.note || null,
+        ask: st.ask || null
+      })
+    }
+
+    if (i < clampedIdx) {
+      // Replay completed step response
+      if (st.ask) {
+        newLog.push({ kind: 'echo', text: st.ask })
+        const rawRes = st.response || mumeResponses.value[st.ask.toLowerCase()] || ''
+        const body = rawRes ? rawRes.replace(/^>[^\n]*\n?/, '') : ''
+        if (body) {
+          newLog.push({ kind: 'example', body })
+        }
+      } else if (st.text || st.response) {
+        newLog.push({
+          kind: 'story',
+          body: st.text || st.response
+        })
+      }
+    }
+  }
 
   log.value = newLog
-  scrollLog()
 
-  if (currentSubStep.value && !currentSubStep.value.ask && (currentSubStep.value.text || currentSubStep.value.response)) {
-    log.value.push({
+  const activeStep = steps[clampedIdx]
+  if (activeStep && !activeStep.ask && (activeStep.text || activeStep.response)) {
+    pushLogItem({
       kind: 'story',
-      body: currentSubStep.value.text || currentSubStep.value.response
+      body: activeStep.text || activeStep.response
     })
-    scrollLog()
     setTimeout(() => {
       advanceSubStep()
     }, 250)
   } else {
+    scrollLog()
     focusInput()
   }
 }
 
+function renderStepLog() {
+  goToStep(0)
+}
+
 function completeChapter() {
   finished.value = true
-  log.value.push({
+  pushLogItem({
     kind: 'chapter_complete',
     chapterNum: chapterNum.value,
     title: chapterTitle.value,
     nextUrl: nextChapterUrl.value
   })
-  scrollLog()
 }
 
 function advanceNext() {
@@ -244,29 +367,7 @@ function advanceNext() {
 
 function advanceSubStep() {
   if (subStepIdx.value < stepsList.value.length - 1) {
-    subStepIdx.value++
-    const nextSub = currentSubStep.value
-
-    if (nextSub.ask) {
-      log.value.push({
-        kind: 'prompt_next',
-        stepIndex: subStepIdx.value,
-        totalSteps: stepsList.value.length,
-        note: nextSub.note || null,
-        ask: nextSub.ask
-      })
-      scrollLog()
-      focusInput()
-    } else if (nextSub.text || nextSub.response) {
-      log.value.push({
-        kind: 'story',
-        body: nextSub.text || nextSub.response
-      })
-      scrollLog()
-      setTimeout(() => {
-        advanceSubStep()
-      }, 250)
-    }
+    goToStep(subStepIdx.value + 1)
   } else {
     completeChapter()
   }
@@ -274,20 +375,22 @@ function advanceSubStep() {
 
 function prevSubStep() {
   if (subStepIdx.value > 0) {
-    subStepIdx.value--
-    const prevSub = currentSubStep.value
-    log.value.push({
-      kind: 'prompt_prev',
-      stepIndex: subStepIdx.value,
-      totalSteps: stepsList.value.length,
-      note: prevSub.note || null,
-      ask: prevSub.ask
-    })
-    scrollLog()
+    goToStep(subStepIdx.value - 1)
   }
 }
 
 function submit() {
+  // If pager is active when submitting, advance or flush pager first if input is empty
+  if (isPagerActive.value) {
+    if (!entry.value.trim()) {
+      advancePager()
+      focusInput()
+      return
+    } else {
+      flushPager()
+    }
+  }
+
   const raw = entry.value.trim()
   const cmd = raw.toLowerCase()
   entry.value = ''
@@ -302,7 +405,7 @@ function submit() {
     return
   }
 
-  if (raw) { log.value.push({ kind: 'echo', text: raw }) }
+  if (raw) { pushLogItem({ kind: 'echo', text: raw }) }
 
   if (cmd === 'skip') { advanceNext(); focusInput(); return }
   if (cmd === 'tutorial') { navigateToUrl(allChapters[0]?.url || '/play/tutorial/1-orientation'); focusInput(); return }
@@ -311,8 +414,7 @@ function submit() {
 
   if (!curStep) {
     if (cmd && mumeResponses.value[cmd]) {
-      log.value.push({ kind: 'example', body: mumeResponses.value[cmd] })
-      scrollLog()
+      pushLogItem({ kind: 'example', body: mumeResponses.value[cmd] })
     } else {
       advanceNext()
     }
@@ -321,8 +423,7 @@ function submit() {
   }
 
   if (!cmd) {
-    log.value.push({ kind: 'error', text: curStep.hint || (`Type: ${curStep.ask}`) })
-    scrollLog()
+    pushLogItem({ kind: 'error', text: curStep.hint || (`Type: ${curStep.ask}`) })
     focusInput()
     return
   }
@@ -334,16 +435,34 @@ function submit() {
     const rawRes = curStep.response || curStep.example || mumeResponses.value[cmd] || ''
     const body = rawRes ? rawRes.replace(/^>[^\n]*\n?/, '') : ''
     if (body) {
-      log.value.push({ kind: 'example', body })
+      pushLogItem({ kind: 'example', body })
+    }
+    if (subStepIdx.value < stepsList.value.length - 1) {
+      subStepIdx.value++
+      const nextSub = currentSubStep.value
+      if (nextSub) {
+        log.value.push({
+          kind: 'prompt_next',
+          stepIndex: subStepIdx.value,
+          totalSteps: stepsList.value.length,
+          note: nextSub.note || null,
+          ask: nextSub.ask || null
+        })
+        if (!nextSub.ask && (nextSub.text || nextSub.response)) {
+          pushLogItem({
+            kind: 'story',
+            body: nextSub.text || nextSub.response
+          })
+        }
+      }
+    } else {
+      completeChapter()
     }
-    advanceSubStep()
   } else if (mumeResponses.value[cmd]) {
-    log.value.push({ kind: 'example', body: mumeResponses.value[cmd] })
-    log.value.push({ kind: 'error', text: 'Good try! To proceed in this step, ' + (curStep.hint || (`try: ${curStep.ask}`)) })
-    scrollLog()
+    pushLogItem({ kind: 'example', body: mumeResponses.value[cmd] })
+    pushLogItem({ kind: 'error', text: 'Good try! To proceed in this step, ' + (curStep.hint || (`try: ${curStep.ask}`)) })
   } else {
-    log.value.push({ kind: 'error', text: 'MUME does not know that one here. ' + (curStep.hint || (`Try: ${curStep.ask}`)) })
-    scrollLog()
+    pushLogItem({ kind: 'error', text: 'MUME does not know that one here. ' + (curStep.hint || (`Try: ${curStep.ask}`)) })
   }
   focusInput()
 }
@@ -515,14 +634,25 @@ onUnmounted(() => {
             </div>
           </div>
 
+          <!-- Sticky Pager Banner for Desktop & Touch Devices -->
+          <div v-if="isPagerActive" class="tut-pager-banner" @click="advancePager">
+            <span class="tut-pager-text">
+              <i class="fa fa-chevron-down" aria-hidden="true"></i>
+              <span>[ MORE &mdash; Page {{ currentPagerIndex }} of {{ currentPagerTotal }} &mdash; Press Space/Enter or Tap ]</span>
+            </span>
+            <button type="button" class="tut-pager-btn" @click.stop="advancePager" aria-label="Next Page">
+              More &darr;
+            </button>
+          </div>
+
           <div class="tut-prompt">
             <span class="tut-caret">&gt;</span>
             <input ref="inputEl" v-model="entry" @keydown.enter.prevent="submit"
                    autocomplete="off" spellcheck="false"
-                   :placeholder="finished ? (nextChapterUrl ? 'Press Enter to continue to next chapter...' : 'Tutorial complete — press Enter for options') : 'type here, then press Enter'"
+                   :placeholder="isPagerActive ? 'Press Space, Enter, or Tap More...' : (finished ? (nextChapterUrl ? 'Press Enter to continue to next chapter...' : 'Tutorial complete — press Enter for options') : 'type here, then press Enter')"
                    aria-label="Type a command" />
             <button type="button" class="tut-send-btn" @click="submit" aria-label="Send Command">
-              {{ finished ? (nextChapterUrl ? 'Next' : 'Options') : 'Send' }}
+              {{ isPagerActive ? 'More' : (finished ? (nextChapterUrl ? 'Next' : 'Options') : 'Send') }}
             </button>
           </div>
         </div>
@@ -596,10 +726,12 @@ onUnmounted(() => {
 
           <!-- Integrated Step Indicator Pills -->
           <div class="tut-step-pills" v-if="stepsList.length > 1">
-            <span v-for="(st, sIdx) in stepsList" :key="sIdx"
-                  class="tut-step-pill"
-                  :class="{ active: sIdx === subStepIdx, done: sIdx < subStepIdx }"
-                  :title="'Step ' + (sIdx + 1) + ' of ' + stepsList.length"></span>
+            <button v-for="(st, sIdx) in stepsList" :key="sIdx"
+                    type="button"
+                    class="tut-step-pill tut-step-pill-btn"
+                    :class="{ active: sIdx === subStepIdx, done: sIdx < subStepIdx }"
+                    :title="'Jump to Step ' + (sIdx + 1) + ' of ' + stepsList.length"
+                    @click="goToStep(sIdx)"></button>
           </div>
           <span v-else class="tut-ch-badge">Ch {{ chapterNum }}</span>
 
@@ -642,9 +774,9 @@ onUnmounted(() => {
   background: rgba(215, 166, 63, 0.6);
 }
 
-.tut-head { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1px solid rgba(215,166,63,.25); background: linear-gradient(180deg,#15130c,#0b0b0d); flex-wrap: wrap; }
+.tut-head { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1px solid rgba(215,166,63,.25); background: linear-gradient(180deg,#15130c,#0b0b0d); flex-wrap: wrap; position: relative; }
 .tut-logo { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; }
-.tut-heading { display: flex; flex-direction: column; line-height: 1.15; margin-right: auto; }
+.tut-heading { display: flex; flex-direction: column; line-height: 1.15; margin-right: auto; padding-right: 70px; }
 .tut-title { font-family: 'Kelt', serif; color: #f4dd94; font-size: 22px; }
 .tut-sub { color: #9a927f; font-size: 12.5px; }
 .tut-progress { display: flex; align-items: center; gap: 10px; }
@@ -656,7 +788,8 @@ onUnmounted(() => {
 .tut-tick.clickable:hover { background: #ffd966; transform: scale(1.25); }
 .tut-step { color: #9a927f; font-size: 12.5px; white-space: nowrap; }
 
-.tut-actions { display: flex; align-items: center; gap: 8px; margin-left: 8px; }
+.tut-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
+.tut-exit-btn { order: 99; margin-left: auto; }
 
 @keyframes tutPulseHint {
   0% { box-shadow: 0 0 0 0 rgba(215, 166, 63, 0.4); }
@@ -884,6 +1017,24 @@ onUnmounted(() => {
 .tut-secondary-link:hover, .tut-secondary-link:focus-visible { background: darkgoldenrod; color: #3a3a3a !important; text-decoration: none !important; }
 .tut-note { color: #8f8a7d; font-size: 12.5px; margin: 4px 0 6px; }
 
+.tut-pager-banner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: rgba(184, 134, 11, 0.25);
+  border-top: 1px solid rgba(215, 166, 63, 0.5);
+  border-bottom: 1px solid rgba(215, 166, 63, 0.3);
+  padding: 8px 16px;
+  cursor: pointer;
+  color: #f4dd94;
+  font-family: 'DejaVu Sans Mono', Menlo, Consolas, monospace;
+  font-size: 13px;
+  user-select: none;
+  animation: tutPulseHint 2s infinite;
+}
+.tut-pager-text { display: flex; align-items: center; gap: 8px; font-weight: bold; }
+.tut-pager-btn { background: gold; color: #111; border: none; border-radius: 12px; padding: 2px 10px; font-weight: bold; font-size: 12px; cursor: pointer; }
+
 .tut-prompt { display: flex; align-items: center; gap: 8px; border-top: 1px solid #23262e; padding: 12px 18px; background: #08080a; }
 .tut-caret { color: #d8b04a; font-family: 'DejaVu Sans Mono', Menlo, Consolas, monospace; }
 .tut-prompt input { flex: 1; background: transparent; border: none; outline: none; color: #eaeaea; font-family: 'DejaVu Sans Mono', Menlo, Consolas, monospace; font-size: 14px; }
@@ -1116,12 +1267,17 @@ onUnmounted(() => {
 
 .tut-step-pills { display: flex; align-items: center; gap: 4px; padding: 0 6px; }
 .tut-step-pill { width: 12px; height: 4px; border-radius: 2px; background: #2a2a2a; transition: background .2s, width .2s; }
+.tut-step-pill-btn { border: none; padding: 0; cursor: pointer; }
+.tut-step-pill-btn:hover { background: #ffd966; }
 .tut-step-pill.done { background: #a9812a; }
 .tut-step-pill.active { background: #f4dd94; width: 20px; box-shadow: 0 0 6px rgba(244,221,148,.5); }
 
 @media (max-width: 720px) {
   .tut { margin: 0.5rem 0 1rem; }
   .tut-head { flex-wrap: wrap; gap: 6px 8px; padding: 8px 10px; }
+  .tut-heading { padding-right: 60px; }
+  .tut-actions { width: 100%; justify-content: flex-start; margin-left: 0; }
+  .tut-exit-btn { position: absolute; top: 8px; right: 10px; margin-left: 0; z-index: 10; }
   .tut-title { font-size: 18px; }
   .tut-sub { font-size: 11px; }
   .tut-progress { width: 100%; justify-content: space-between; margin-top: 2px; flex-wrap: wrap; gap: 4px; }

From a409814139af0f9e4eab9eb97256d91ce967f6d3 Mon Sep 17 00:00:00 2001
From: nschimme <5505185+nschimme@users.noreply.github.com>
Date: Sun, 20 Sep 2026 19:42:04 +0000
Subject: [PATCH 02/13] feat(tutorial): rewind back button log and add
 constrained display pager

- Reconstructed step history when navigating backward in tutorial steps to maintain a coherent log state.
- Added a reactive pager for chunking large MUD outputs into readable pages on constrained displays.
- Implemented keyboard (Space/Enter) and touch tap interactions for pager navigation.
- Fixed input handling to allow space bar typing within commands without inadvertently triggering the pager.
- Repositioned the tutorial Exit button anchored at top-right on header bar.

From 4028a226cd21b895481bfbd9fdba381b9c15625e Mon Sep 17 00:00:00 2001
From: nschimme <5505185+nschimme@users.noreply.github.com>
Date: Sun, 20 Sep 2026 19:51:59 +0000
Subject: [PATCH 03/13] feat(tutorial): implement clean log rewind and reactive
 MUD output pager

- Reconstruct terminal log and replay history on back step navigation
- Split large MUD outputs (>8 lines) into 6-line pages with sticky pager bar
- Add Space/Enter/PageDown keyboard paging and touch-friendly tap-to-advance
- Queue and defer next-step triggers while pager is active to preserve order
- Hide empty quest action cards on story beats without ask commands
- Position Exit Tutorial button at top right of header frame across viewports
---
 .../theme/components/TutorialPlayer.vue       | 79 +++++++++++++------
 1 file changed, 55 insertions(+), 24 deletions(-)

diff --git a/docs/.vitepress/theme/components/TutorialPlayer.vue b/docs/.vitepress/theme/components/TutorialPlayer.vue
index 86507dc..11b82cd 100644
--- a/docs/.vitepress/theme/components/TutorialPlayer.vue
+++ b/docs/.vitepress/theme/components/TutorialPlayer.vue
@@ -102,6 +102,7 @@ const pendingPagerChunks = ref([]) // Remaining unrevealed chunks
 const currentPagerTotal = ref(1)
 const currentPagerIndex = ref(1)
 const isPagerActive = computed(() => pendingPagerChunks.value.length > 0)
+const pendingNextStep = ref(null)
 
 function openModal() {
   isModalOpen.value = true
@@ -149,6 +150,11 @@ function advancePager() {
     currentPagerIndex.value++
     scrollLog()
   }
+  if (pendingPagerChunks.value.length === 0 && pendingNextStep.value) {
+    const fn = pendingNextStep.value
+    pendingNextStep.value = null
+    fn()
+  }
 }
 
 function flushPager() {
@@ -157,6 +163,11 @@ function flushPager() {
     if (chunk) log.value.push(chunk)
   }
   scrollLog()
+  if (pendingNextStep.value) {
+    const fn = pendingNextStep.value
+    pendingNextStep.value = null
+    fn()
+  }
 }
 
 function handleKeydown(e) {
@@ -262,6 +273,7 @@ function scrollLog() {
 
 function goToStep(targetIdx) {
   pendingPagerChunks.value = []
+  pendingNextStep.value = null
   const steps = stepsList.value
   if (!steps || steps.length === 0) {
     subStepIdx.value = 0
@@ -334,9 +346,13 @@ function goToStep(targetIdx) {
       kind: 'story',
       body: activeStep.text || activeStep.response
     })
-    setTimeout(() => {
-      advanceSubStep()
-    }, 250)
+    if (isPagerActive.value) {
+      pendingNextStep.value = () => triggerNextStep()
+    } else {
+      setTimeout(() => {
+        triggerNextStep()
+      }, 250)
+    }
   } else {
     scrollLog()
     focusInput()
@@ -365,6 +381,37 @@ function advanceNext() {
   }
 }
 
+function triggerNextStep() {
+  if (subStepIdx.value < stepsList.value.length - 1) {
+    subStepIdx.value++
+    const nextSub = currentSubStep.value
+    if (nextSub) {
+      if (nextSub.ask) {
+        log.value.push({
+          kind: 'prompt_next',
+          stepIndex: subStepIdx.value,
+          totalSteps: stepsList.value.length,
+          note: nextSub.note || null,
+          ask: nextSub.ask || null
+        })
+      }
+      if (!nextSub.ask && (nextSub.text || nextSub.response)) {
+        pushLogItem({
+          kind: 'story',
+          body: nextSub.text || nextSub.response
+        })
+        if (isPagerActive.value) {
+          pendingNextStep.value = () => triggerNextStep()
+        } else {
+          triggerNextStep()
+        }
+      }
+    }
+  } else {
+    completeChapter()
+  }
+}
+
 function advanceSubStep() {
   if (subStepIdx.value < stepsList.value.length - 1) {
     goToStep(subStepIdx.value + 1)
@@ -437,26 +484,10 @@ function submit() {
     if (body) {
       pushLogItem({ kind: 'example', body })
     }
-    if (subStepIdx.value < stepsList.value.length - 1) {
-      subStepIdx.value++
-      const nextSub = currentSubStep.value
-      if (nextSub) {
-        log.value.push({
-          kind: 'prompt_next',
-          stepIndex: subStepIdx.value,
-          totalSteps: stepsList.value.length,
-          note: nextSub.note || null,
-          ask: nextSub.ask || null
-        })
-        if (!nextSub.ask && (nextSub.text || nextSub.response)) {
-          pushLogItem({
-            kind: 'story',
-            body: nextSub.text || nextSub.response
-          })
-        }
-      }
+    if (isPagerActive.value) {
+      pendingNextStep.value = () => triggerNextStep()
     } else {
-      completeChapter()
+      triggerNextStep()
     }
   } else if (mumeResponses.value[cmd]) {
     pushLogItem({ kind: 'example', body: mumeResponses.value[cmd] })
@@ -576,7 +607,7 @@ onUnmounted(() => {
 
               <template v-else-if="b.kind === 'prompt_next'">
                 <!-- High-contrast Quest Action Card for Next Steps -->
-                <div class="tut-quest-card">
+                <div class="tut-quest-card" v-if="b.ask">
                   <div class="tut-quest-header">
                     <span class="tut-quest-badge"><i class="fa fa-compass" aria-hidden="true"></i> QUEST</span>
                     <span class="tut-quest-sub">ACTION REQUIRED</span>
@@ -1133,7 +1164,7 @@ onUnmounted(() => {
   max-height: calc(100vh - 120px);
 }
 
-.tut-send-btn { background: darkgoldenrod; border: none; color: #fff; font-family: 'Kelt', serif; font-size: 13px; padding: 4px 12px; border-radius: 14px; cursor: pointer; font-weight: bold; }
+.tut-send-btn { background: darkgoldenrod; border: none; color: #fff; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; font-size: 13px; padding: 4px 12px; border-radius: 14px; cursor: pointer; font-weight: bold; }
 
 .tut-sheet-close { display: block; background: none; border: none; color: #9a927f; font-size: 20px; cursor: pointer; padding: 0 4px; }
 .tut-sheet-close:hover { color: #f4dd94; }

From 7cf74a5f68ff588dfe670094f86cb03d4d40528c Mon Sep 17 00:00:00 2001
From: nschimme <5505185+nschimme@users.noreply.github.com>
Date: Sun, 20 Sep 2026 20:03:47 +0000
Subject: [PATCH 04/13] feat(tutorial): implement coherent log rewind and
 reactive MUD terminal pager

- Clear and replay log history up to target index when navigating backwards (`goToStep`).
- Implement reactive terminal pager supporting text chunking, weighted image lines, and live scroll overflow.
- Add keyboard (Space/Enter/PageDown) and touch/mobile (`.tut-pager-banner`) advancement controls.
- Defer queued step advancement until remaining pages/scroll overflow are fully revealed.
- Ensure Exit button position is anchored at top-right across viewports.
---
 .../theme/components/TutorialPlayer.vue       | 122 ++++++++++++++----
 1 file changed, 99 insertions(+), 23 deletions(-)

diff --git a/docs/.vitepress/theme/components/TutorialPlayer.vue b/docs/.vitepress/theme/components/TutorialPlayer.vue
index 11b82cd..489b158 100644
--- a/docs/.vitepress/theme/components/TutorialPlayer.vue
+++ b/docs/.vitepress/theme/components/TutorialPlayer.vue
@@ -101,7 +101,8 @@ const isModalOpen = ref(false)
 const pendingPagerChunks = ref([]) // Remaining unrevealed chunks
 const currentPagerTotal = ref(1)
 const currentPagerIndex = ref(1)
-const isPagerActive = computed(() => pendingPagerChunks.value.length > 0)
+const isScrollOverflowActive = ref(false)
+const isPagerActive = computed(() => pendingPagerChunks.value.length > 0 || isScrollOverflowActive.value)
 const pendingNextStep = ref(null)
 
 function openModal() {
@@ -142,18 +143,56 @@ function handleFullscreenChange() {
   }
 }
 
+function checkScrollOverflow() {
+  if (typeof window === 'undefined' || !logEl.value) return
+  setTimeout(() => {
+    const el = logEl.value
+    if (!el) return
+    const remainingScroll = el.scrollHeight - el.clientHeight - el.scrollTop
+    if (remainingScroll > 30 && pendingPagerChunks.value.length === 0) {
+      isScrollOverflowActive.value = true
+      const pageSize = Math.max(100, el.clientHeight - 40)
+      currentPagerTotal.value = Math.max(2, Math.ceil(el.scrollHeight / pageSize))
+      currentPagerIndex.value = Math.min(currentPagerTotal.value, Math.floor(el.scrollTop / pageSize) + 1)
+    } else if (remainingScroll <= 30) {
+      isScrollOverflowActive.value = false
+    }
+  }, 100)
+}
+
 function advancePager() {
-  if (!isPagerActive.value) return
-  const nextChunk = pendingPagerChunks.value.shift()
-  if (nextChunk) {
-    log.value.push(nextChunk)
-    currentPagerIndex.value++
-    scrollLog()
-  }
-  if (pendingPagerChunks.value.length === 0 && pendingNextStep.value) {
-    const fn = pendingNextStep.value
-    pendingNextStep.value = null
-    fn()
+  if (pendingPagerChunks.value.length > 0) {
+    const nextChunk = pendingPagerChunks.value.shift()
+    if (nextChunk) {
+      log.value.push(nextChunk)
+      currentPagerIndex.value++
+      scrollLog()
+    }
+    if (pendingPagerChunks.value.length === 0) {
+      checkScrollOverflow()
+      if (!isScrollOverflowActive.value && pendingNextStep.value) {
+        const fn = pendingNextStep.value
+        pendingNextStep.value = null
+        fn()
+      }
+    }
+  } else if (isScrollOverflowActive.value && logEl.value) {
+    const el = logEl.value
+    const pagePx = Math.max(100, el.clientHeight - 40)
+    el.scrollBy({ top: pagePx, behavior: 'smooth' })
+    setTimeout(() => {
+      const remainingScroll = el.scrollHeight - el.clientHeight - el.scrollTop
+      if (remainingScroll <= 30) {
+        isScrollOverflowActive.value = false
+        if (pendingNextStep.value) {
+          const fn = pendingNextStep.value
+          pendingNextStep.value = null
+          fn()
+        }
+      } else {
+        currentPagerIndex.value = Math.min(currentPagerTotal.value, currentPagerIndex.value + 1)
+      }
+    }, 300)
   }
 }
 
@@ -162,7 +201,10 @@ function flushPager() {
     const chunk = pendingPagerChunks.value.shift()
     if (chunk) log.value.push(chunk)
   }
-  scrollLog()
+  if (logEl.value) {
+    logEl.value.scrollTo({ top: logEl.value.scrollHeight, behavior: 'smooth' })
+  }
+  isScrollOverflowActive.value = false
   if (pendingNextStep.value) {
     const fn = pendingNextStep.value
     pendingNextStep.value = null
@@ -189,23 +231,56 @@ function handleKeydown(e) {
   }
 }
 
+function getTerminalPageSize() {
+  if (typeof window === 'undefined' || !logEl.value) {
+    return 12
+  }
+  const containerHeight = logEl.value.clientHeight || 400
+  // Usable height accounting for padding & card overhead
+  const usableHeight = Math.max(120, containerHeight - 60)
+  const linePx = 20 // line-height for terminal font (~19-20px)
+  return Math.max(5, Math.floor(usableHeight / linePx))
+}
+
 function pushLogItem(item) {
-  // If item is an example or story with multiline body, check if it needs paging
-  if ((item.kind === 'example' || item.kind === 'story') && item.body) {
+  const pageSize = getTerminalPageSize()
+
+  // Check items with multiline body (example, story, narrative)
+  if ((item.kind === 'example' || item.kind === 'story' || item.kind === 'narrative') && item.body) {
     const lines = item.body.split('\n')
-    // Chunk threshold: if lines > 8
-    if (lines.length > 8) {
+
+    // Calculate line weights, counting image elements (<img) as ~8 lines worth of vertical space
+    let totalWeightedLines = 0
+    for (const l of lines) {
+      if (l.includes('<img')) totalWeightedLines += 8
+      else totalWeightedLines += 1
+    }
+
+    if (totalWeightedLines > pageSize) {
       const chunks = []
-      const chunkSize = 6
-      for (let i = 0; i < lines.length; i += chunkSize) {
-        chunks.push(lines.slice(i, i + chunkSize).join('\n'))
+      let currentChunk = []
+      let currentWeight = 0
+
+      for (const line of lines) {
+        const lineWeight = line.includes('<img') ? 8 : 1
+        if (currentChunk.length > 0 && currentWeight + lineWeight > pageSize) {
+          chunks.push(currentChunk.join('\n'))
+          currentChunk = [line]
+          currentWeight = lineWeight
+        } else {
+          currentChunk.push(line)
+          currentWeight += lineWeight
+        }
+      }
+      if (currentChunk.length > 0) {
+        chunks.push(currentChunk.join('\n'))
       }
 
-      // First chunk is pushed immediately
+      // Push first full page chunk immediately
       item.body = chunks[0]
       log.value.push(item)
 
-      // Remaining chunks placed in queue
+      // Queue remaining page chunks
       const remaining = chunks.slice(1).map(c => ({
         kind: item.kind,
         body: c
@@ -267,6 +342,7 @@ function scrollLog() {
       } else {
         container.scrollTo({ top: container.scrollHeight, behavior: 'smooth' })
       }
+      checkScrollOverflow()
     }, 60)
   }
 }
@@ -578,7 +654,7 @@ onUnmounted(() => {
 
       <div class="tut-body" :class="{ 'has-sheet': isSheetOpen }">
         <div class="tut-term">
-          <div class="tut-log" ref="logEl" aria-live="polite" aria-atomic="false">
+          <div class="tut-log" ref="logEl" @load.capture="scrollLog" aria-live="polite" aria-atomic="false">
             <div v-for="(b, i) in log" :key="i" class="tut-block">
               <template v-if="b.kind === 'lesson'">
                 <!-- Chapter Intro Card -->

From a216ad92407d71c9ce14ea009810cad004a7e568 Mon Sep 17 00:00:00 2001
From: nschimme <5505185+nschimme@users.noreply.github.com>
Date: Sun, 20 Sep 2026 20:51:33 +0000
Subject: [PATCH 05/13] Fix tutorial step rewind and add reactive terminal
 pager

- Clean step log rewind and state replay on step back/pill navigation
- Implement reactive terminal pager measuring DOM scroll overflow
- Support Space, Enter, PageDown key navigation and mobile/touch tap banner
- Position Exit Tutorial button in top-right header corner
---
 .../theme/components/TutorialPlayer.vue       | 257 +++++++-----------
 1 file changed, 105 insertions(+), 152 deletions(-)

diff --git a/docs/.vitepress/theme/components/TutorialPlayer.vue b/docs/.vitepress/theme/components/TutorialPlayer.vue
index 489b158..e127b62 100644
--- a/docs/.vitepress/theme/components/TutorialPlayer.vue
+++ b/docs/.vitepress/theme/components/TutorialPlayer.vue
@@ -5,7 +5,7 @@
   Clear end-of-tutorial handover options to Play Hub, Browser Client, or Newcomers Guide.
   Features visual toggle pill indicator for Commands, unified Narrative vs Quest Action Card UX, and inline markdown formatting for commands in quest descriptions.
 */
-import { ref, computed, watch, onMounted, onUnmounted } from 'vue'
+import { ref, computed, watch, onMounted, onUnmounted, nextTick } from 'vue'
 import { useData, useRoute, useRouter, withBase } from 'vitepress'
 import { data as allChapters } from '../../../play/tutorial/chapters.data.js'
 
@@ -97,14 +97,21 @@ const isSheetOpen = ref(false)
 const isExpanded = ref(false)
 const isModalOpen = ref(false)
 
-// Reactive Pager State
-const pendingPagerChunks = ref([]) // Remaining unrevealed chunks
+// Reactive Pager State & Timer Management
+const autoAdvanceTimer = ref(null)
 const currentPagerTotal = ref(1)
 const currentPagerIndex = ref(1)
 const isScrollOverflowActive = ref(false)
-const isPagerActive = computed(() => pendingPagerChunks.value.length > 0 || isScrollOverflowActive.value)
+const isPagerActive = computed(() => isScrollOverflowActive.value)
 const pendingNextStep = ref(null)
 
+function clearAutoAdvanceTimer() {
+  if (autoAdvanceTimer.value) {
+    clearTimeout(autoAdvanceTimer.value)
+    autoAdvanceTimer.value = null
+  }
+}
+
 function openModal() {
   isModalOpen.value = true
 }
@@ -145,62 +152,36 @@ function handleFullscreenChange() {
 
 function checkScrollOverflow() {
   if (typeof window === 'undefined' || !logEl.value) return
-  setTimeout(() => {
-    const el = logEl.value
-    if (!el) return
-    const remainingScroll = el.scrollHeight - el.clientHeight - el.scrollTop
-    if (remainingScroll > 30 && pendingPagerChunks.value.length === 0) {
-      isScrollOverflowActive.value = true
-      const pageSize = Math.max(100, el.clientHeight - 40)
-      currentPagerTotal.value = Math.max(2, Math.ceil(el.scrollHeight / pageSize))
-      currentPagerIndex.value = Math.min(currentPagerTotal.value, Math.floor(el.scrollTop / pageSize) + 1)
-    } else if (remainingScroll <= 30) {
-      isScrollOverflowActive.value = false
-    }
-  }, 100)
+  const el = logEl.value
+  if (!el) return
+  const remainingScroll = el.scrollHeight - el.clientHeight - el.scrollTop
+  if (remainingScroll > 35) {
+    isScrollOverflowActive.value = true
+    const pageSize = Math.max(100, el.clientHeight - 40)
+    currentPagerTotal.value = Math.max(2, Math.ceil(el.scrollHeight / pageSize))
+    currentPagerIndex.value = Math.min(currentPagerTotal.value, Math.max(1, Math.floor(el.scrollTop / pageSize) + 1))
+  } else if (remainingScroll <= 20) {
+    isScrollOverflowActive.value = false
+  }
 }
 
 function advancePager() {
-  if (pendingPagerChunks.value.length > 0) {
-    const nextChunk = pendingPagerChunks.value.shift()
-    if (nextChunk) {
-      log.value.push(nextChunk)
-      currentPagerIndex.value++
-      scrollLog()
-    }
-    if (pendingPagerChunks.value.length === 0) {
+  if (isScrollOverflowActive.value && logEl.value) {
+    const el = logEl.value
+    const pagePx = Math.max(100, el.clientHeight - 40)
+    el.scrollBy({ top: pagePx, behavior: 'smooth' })
+    setTimeout(() => {
       checkScrollOverflow()
       if (!isScrollOverflowActive.value && pendingNextStep.value) {
         const fn = pendingNextStep.value
         pendingNextStep.value = null
         fn()
       }
-    }
-  } else if (isScrollOverflowActive.value && logEl.value) {
-    const el = logEl.value
-    const pagePx = Math.max(100, el.clientHeight - 40)
-    el.scrollBy({ top: pagePx, behavior: 'smooth' })
-    setTimeout(() => {
-      const remainingScroll = el.scrollHeight - el.clientHeight - el.scrollTop
-      if (remainingScroll <= 30) {
-        isScrollOverflowActive.value = false
-        if (pendingNextStep.value) {
-          const fn = pendingNextStep.value
-          pendingNextStep.value = null
-          fn()
-        }
-      } else {
-        currentPagerIndex.value = Math.min(currentPagerTotal.value, currentPagerIndex.value + 1)
-      }
-    }, 300)
+    }, 350)
   }
 }
 
 function flushPager() {
-  while (pendingPagerChunks.value.length > 0) {
-    const chunk = pendingPagerChunks.value.shift()
-    if (chunk) log.value.push(chunk)
-  }
   if (logEl.value) {
     logEl.value.scrollTo({ top: logEl.value.scrollHeight, behavior: 'smooth' })
   }
@@ -231,68 +212,7 @@ function handleKeydown(e) {
   }
 }
 
-function getTerminalPageSize() {
-  if (typeof window === 'undefined' || !logEl.value) {
-    return 12
-  }
-  const containerHeight = logEl.value.clientHeight || 400
-  // Usable height accounting for padding & card overhead
-  const usableHeight = Math.max(120, containerHeight - 60)
-  const linePx = 20 // line-height for terminal font (~19-20px)
-  return Math.max(5, Math.floor(usableHeight / linePx))
-}
-
 function pushLogItem(item) {
-  const pageSize = getTerminalPageSize()
-
-  // Check items with multiline body (example, story, narrative)
-  if ((item.kind === 'example' || item.kind === 'story' || item.kind === 'narrative') && item.body) {
-    const lines = item.body.split('\n')
-
-    // Calculate line weights, counting image elements (<img) as ~8 lines worth of vertical space
-    let totalWeightedLines = 0
-    for (const l of lines) {
-      if (l.includes('<img')) totalWeightedLines += 8
-      else totalWeightedLines += 1
-    }
-
-    if (totalWeightedLines > pageSize) {
-      const chunks = []
-      let currentChunk = []
-      let currentWeight = 0
-
-      for (const line of lines) {
-        const lineWeight = line.includes('<img') ? 8 : 1
-        if (currentChunk.length > 0 && currentWeight + lineWeight > pageSize) {
-          chunks.push(currentChunk.join('\n'))
-          currentChunk = [line]
-          currentWeight = lineWeight
-        } else {
-          currentChunk.push(line)
-          currentWeight += lineWeight
-        }
-      }
-      if (currentChunk.length > 0) {
-        chunks.push(currentChunk.join('\n'))
-      }
-
-      // Push first full page chunk immediately
-      item.body = chunks[0]
-      log.value.push(item)
-
-      // Queue remaining page chunks
-      const remaining = chunks.slice(1).map(c => ({
-        kind: item.kind,
-        body: c
-      }))
-      pendingPagerChunks.value = remaining
-      currentPagerIndex.value = 1
-      currentPagerTotal.value = chunks.length
-      scrollLog()
-      return
-    }
-  }
-
   log.value.push(item)
   scrollLog()
 }
@@ -324,32 +244,36 @@ function navigateToUrl(url) {
 
 function scrollLog() {
   if (typeof window !== 'undefined') {
-    setTimeout(() => {
-      const container = logEl.value
-      if (!container) return
-      const blocks = container.querySelectorAll('.tut-block')
-      if (blocks.length > 0) {
-        const lastBlock = blocks[blocks.length - 1]
-        const containerRect = container.getBoundingClientRect()
-        const blockRect = lastBlock.getBoundingClientRect()
-
-        // If block is taller than the view, bring the start of the block into view
-        if (blockRect.height > containerRect.height - 40) {
-          lastBlock.scrollIntoView({ behavior: 'smooth', block: 'start' })
+    nextTick(() => {
+      setTimeout(() => {
+        const container = logEl.value
+        if (!container) return
+        const blocks = container.querySelectorAll('.tut-block')
+        if (blocks.length > 0) {
+          const lastBlock = blocks[blocks.length - 1]
+          const containerRect = container.getBoundingClientRect()
+          const blockRect = lastBlock.getBoundingClientRect()
+
+          // Bring the top of new/last block into view if it overflows
+          if (blockRect.height > containerRect.height - 40) {
+            lastBlock.scrollIntoView({ behavior: 'smooth', block: 'start' })
+          } else {
+            container.scrollTo({ top: container.scrollHeight, behavior: 'smooth' })
+          }
         } else {
           container.scrollTo({ top: container.scrollHeight, behavior: 'smooth' })
         }
-      } else {
-        container.scrollTo({ top: container.scrollHeight, behavior: 'smooth' })
-      }
-      checkScrollOverflow()
-    }, 60)
+        checkScrollOverflow()
+      }, 60)
+    })
   }
 }
 
-function goToStep(targetIdx) {
-  pendingPagerChunks.value = []
+function goToStep(targetIdx, isAutoAdvance = false) {
+  clearAutoAdvanceTimer()
   pendingNextStep.value = null
+  isScrollOverflowActive.value = false
+
   const steps = stepsList.value
   if (!steps || steps.length === 0) {
     subStepIdx.value = 0
@@ -387,13 +311,15 @@ function goToStep(targetIdx) {
         ask: st.ask || null
       })
     } else {
-      newLog.push({
-        kind: 'prompt_next',
-        stepIndex: i,
-        totalSteps: steps.length,
-        note: st.note || null,
-        ask: st.ask || null
-      })
+      if (st.ask) {
+        newLog.push({
+          kind: 'prompt_next',
+          stepIndex: i,
+          totalSteps: steps.length,
+          note: st.note || null,
+          ask: st.ask || null
+        })
+      }
     }
 
     if (i < clampedIdx) {
@@ -422,12 +348,17 @@ function goToStep(targetIdx) {
       kind: 'story',
       body: activeStep.text || activeStep.response
     })
-    if (isPagerActive.value) {
-      pendingNextStep.value = () => triggerNextStep()
+    if (isAutoAdvance && typeof window !== 'undefined') {
+      if (isPagerActive.value) {
+        pendingNextStep.value = () => triggerNextStep()
+      } else {
+        autoAdvanceTimer.value = setTimeout(() => {
+          triggerNextStep()
+        }, 250)
+      }
     } else {
-      setTimeout(() => {
-        triggerNextStep()
-      }, 250)
+      scrollLog()
+      focusInput()
     }
   } else {
     scrollLog()
@@ -436,7 +367,7 @@ function goToStep(targetIdx) {
 }
 
 function renderStepLog() {
-  goToStep(0)
+  goToStep(0, false)
 }
 
 function completeChapter() {
@@ -476,10 +407,14 @@ function triggerNextStep() {
           kind: 'story',
           body: nextSub.text || nextSub.response
         })
-        if (isPagerActive.value) {
-          pendingNextStep.value = () => triggerNextStep()
-        } else {
-          triggerNextStep()
+        if (typeof window !== 'undefined') {
+          if (isPagerActive.value) {
+            pendingNextStep.value = () => triggerNextStep()
+          } else {
+            autoAdvanceTimer.value = setTimeout(() => {
+              triggerNextStep()
+            }, 250)
+          }
         }
       }
     }
@@ -490,7 +425,9 @@ function triggerNextStep() {
 
 function advanceSubStep() {
   if (subStepIdx.value < stepsList.value.length - 1) {
-    goToStep(subStepIdx.value + 1)
+    goToStep(subStepIdx.value + 1, true)
+  } else if (nextChapterUrl.value) {
+    navigateToUrl(nextChapterUrl.value)
   } else {
     completeChapter()
   }
@@ -498,7 +435,9 @@ function advanceSubStep() {
 
 function prevSubStep() {
   if (subStepIdx.value > 0) {
-    goToStep(subStepIdx.value - 1)
+    goToStep(subStepIdx.value - 1, false)
+  } else if (prevChapterUrl.value) {
+    navigateToUrl(prevChapterUrl.value)
   }
 }
 
@@ -578,6 +517,8 @@ watch(() => route.path, () => {
   renderStepLog()
 }, { immediate: true })
 
+let resizeObserver = null
+
 onMounted(() => {
   renderStepLog()
   if (typeof window !== 'undefined') {
@@ -588,13 +529,25 @@ onMounted(() => {
     focusInput()
     window.addEventListener('keydown', handleKeydown)
     document.addEventListener('fullscreenchange', handleFullscreenChange)
+
+    if (typeof ResizeObserver !== 'undefined' && logEl.value) {
+      resizeObserver = new ResizeObserver(() => {
+        checkScrollOverflow()
+      })
+      resizeObserver.observe(logEl.value)
+    }
   }
 })
 
 onUnmounted(() => {
+  clearAutoAdvanceTimer()
   if (typeof window !== 'undefined') {
     window.removeEventListener('keydown', handleKeydown)
     document.removeEventListener('fullscreenchange', handleFullscreenChange)
+    if (resizeObserver) {
+      resizeObserver.disconnect()
+      resizeObserver = null
+    }
     if (isExpanded.value && typeof document !== 'undefined') {
       document.body.style.overflow = ''
     }
@@ -654,7 +607,7 @@ onUnmounted(() => {
 
       <div class="tut-body" :class="{ 'has-sheet': isSheetOpen }">
         <div class="tut-term">
-          <div class="tut-log" ref="logEl" @load.capture="scrollLog" aria-live="polite" aria-atomic="false">
+          <div class="tut-log" ref="logEl" @load.capture="checkScrollOverflow" @scroll="checkScrollOverflow" aria-live="polite" aria-atomic="false">
             <div v-for="(b, i) in log" :key="i" class="tut-block">
               <template v-if="b.kind === 'lesson'">
                 <!-- Chapter Intro Card -->
@@ -756,10 +709,10 @@ onUnmounted(() => {
             <span class="tut-caret">&gt;</span>
             <input ref="inputEl" v-model="entry" @keydown.enter.prevent="submit"
                    autocomplete="off" spellcheck="false"
-                   :placeholder="isPagerActive ? 'Press Space, Enter, or Tap More...' : (finished ? (nextChapterUrl ? 'Press Enter to continue to next chapter...' : 'Tutorial complete — press Enter for options') : 'type here, then press Enter')"
+                   :placeholder="isPagerActive ? 'Press Space, Enter, or Tap More...' : (finished ? (nextChapterUrl ? 'Press Enter to continue to next chapter...' : 'Tutorial complete — press Enter for options') : (currentSubStep && !currentSubStep.ask ? 'Press Enter to continue...' : 'type here, then press Enter'))"
                    aria-label="Type a command" />
             <button type="button" class="tut-send-btn" @click="submit" aria-label="Send Command">
-              {{ isPagerActive ? 'More' : (finished ? (nextChapterUrl ? 'Next' : 'Options') : 'Send') }}
+              {{ isPagerActive ? 'More' : (finished ? (nextChapterUrl ? 'Next' : 'Options') : (currentSubStep && !currentSubStep.ask ? 'Next' : 'Send')) }}
             </button>
           </div>
         </div>
@@ -827,7 +780,7 @@ onUnmounted(() => {
           </button>
 
           <!-- Prev Step < -->
-          <button type="button" class="tut-nav-btn" :disabled="subStepIdx === 0 || stepsList.length <= 1" @click="prevSubStep" title="Previous Step (<)">
+          <button type="button" class="tut-nav-btn" :disabled="subStepIdx === 0 && !prevChapterUrl" @click="prevSubStep" title="Previous Step (<)">
             &lsaquo;
           </button>
 
@@ -838,12 +791,12 @@ onUnmounted(() => {
                     class="tut-step-pill tut-step-pill-btn"
                     :class="{ active: sIdx === subStepIdx, done: sIdx < subStepIdx }"
                     :title="'Jump to Step ' + (sIdx + 1) + ' of ' + stepsList.length"
-                    @click="goToStep(sIdx)"></button>
+                    @click="goToStep(sIdx, false)"></button>
           </div>
           <span v-else class="tut-ch-badge">Ch {{ chapterNum }}</span>
 
           <!-- Next Step > -->
-          <button type="button" class="tut-nav-btn" :disabled="subStepIdx >= stepsList.length - 1 || stepsList.length <= 1" @click="advanceSubStep" title="Next Step (>)">
+          <button type="button" class="tut-nav-btn" :disabled="subStepIdx >= stepsList.length - 1 && !nextChapterUrl" @click="advanceSubStep" title="Next Step (>)">
             &rsaquo;
           </button>
 

From b40a0545424d320caad7eba73dc6712dbc2a4c77 Mon Sep 17 00:00:00 2001
From: nschimme <5505185+nschimme@users.noreply.github.com>
Date: Sun, 20 Sep 2026 21:03:46 +0000
Subject: [PATCH 06/13] Fix tutorial step rewind log clearing and implement
 reactive terminal pager

- Clear terminal log and reconstruct step history when navigating backward in tutorial player
- Add reactive terminal output pager for overflow content handling desktop keyboard and mobile tap controls
- Debounce scroll detection to hide pager banner while actively scrolling
---
 .../theme/components/TutorialPlayer.vue       | 32 ++++++++++++-------
 1 file changed, 21 insertions(+), 11 deletions(-)

diff --git a/docs/.vitepress/theme/components/TutorialPlayer.vue b/docs/.vitepress/theme/components/TutorialPlayer.vue
index e127b62..acc000a 100644
--- a/docs/.vitepress/theme/components/TutorialPlayer.vue
+++ b/docs/.vitepress/theme/components/TutorialPlayer.vue
@@ -102,7 +102,9 @@ const autoAdvanceTimer = ref(null)
 const currentPagerTotal = ref(1)
 const currentPagerIndex = ref(1)
 const isScrollOverflowActive = ref(false)
-const isPagerActive = computed(() => isScrollOverflowActive.value)
+const isScrolling = ref(false)
+let scrollEndTimer = null
+const isPagerActive = computed(() => isScrollOverflowActive.value && !isScrolling.value)
 const pendingNextStep = ref(null)
 
 function clearAutoAdvanceTimer() {
@@ -112,6 +114,15 @@ function clearAutoAdvanceTimer() {
   }
 }
 
+function handleScroll() {
+  isScrolling.value = true
+  if (scrollEndTimer) clearTimeout(scrollEndTimer)
+  scrollEndTimer = setTimeout(() => {
+    isScrolling.value = false
+    checkScrollOverflow()
+  }, 150)
+}
+
 function openModal() {
   isModalOpen.value = true
 }
@@ -154,6 +165,8 @@ function checkScrollOverflow() {
   if (typeof window === 'undefined' || !logEl.value) return
   const el = logEl.value
   if (!el) return
+  if (isScrolling.value) return
+
   const remainingScroll = el.scrollHeight - el.clientHeight - el.scrollTop
   if (remainingScroll > 35) {
     isScrollOverflowActive.value = true
@@ -169,21 +182,17 @@ function advancePager() {
   if (isScrollOverflowActive.value && logEl.value) {
     const el = logEl.value
     const pagePx = Math.max(100, el.clientHeight - 40)
+    isScrolling.value = true
     el.scrollBy({ top: pagePx, behavior: 'smooth' })
-    setTimeout(() => {
-      checkScrollOverflow()
-      if (!isScrollOverflowActive.value && pendingNextStep.value) {
-        const fn = pendingNextStep.value
-        pendingNextStep.value = null
-        fn()
-      }
-    }, 350)
+    handleScroll()
   }
 }
 
 function flushPager() {
   if (logEl.value) {
+    isScrolling.value = true
     logEl.value.scrollTo({ top: logEl.value.scrollHeight, behavior: 'smooth' })
+    handleScroll()
   }
   isScrollOverflowActive.value = false
   if (pendingNextStep.value) {
@@ -249,6 +258,7 @@ function scrollLog() {
         const container = logEl.value
         if (!container) return
         const blocks = container.querySelectorAll('.tut-block')
+        isScrolling.value = true
         if (blocks.length > 0) {
           const lastBlock = blocks[blocks.length - 1]
           const containerRect = container.getBoundingClientRect()
@@ -263,7 +273,7 @@ function scrollLog() {
         } else {
           container.scrollTo({ top: container.scrollHeight, behavior: 'smooth' })
         }
-        checkScrollOverflow()
+        handleScroll()
       }, 60)
     })
   }
@@ -607,7 +617,7 @@ onUnmounted(() => {
 
       <div class="tut-body" :class="{ 'has-sheet': isSheetOpen }">
         <div class="tut-term">
-          <div class="tut-log" ref="logEl" @load.capture="checkScrollOverflow" @scroll="checkScrollOverflow" aria-live="polite" aria-atomic="false">
+          <div class="tut-log" ref="logEl" @load.capture="checkScrollOverflow" @scroll="handleScroll" aria-live="polite" aria-atomic="false">
             <div v-for="(b, i) in log" :key="i" class="tut-block">
               <template v-if="b.kind === 'lesson'">
                 <!-- Chapter Intro Card -->

From f1f509bc0de0d167c6102b3c939a628302eea6ac Mon Sep 17 00:00:00 2001
From: nschimme <5505185+nschimme@users.noreply.github.com>
Date: Sun, 20 Sep 2026 21:34:32 +0000
Subject: [PATCH 07/13] fix(tutorial): clear inputs on rewind & add reactive
 prompt pager

- Rewind step navigation (`goToStep`) now cancels auto-advance timers, resets `log.value`, and cleanly replays step elements up to target step without orphan prompts.
- Integrate reactive terminal pager directly into the input bar when log overflows, handling keyboard (Space/PageDown/Enter) and touch/mouse interactions without virtual keyboard pops on mobile.
- Add dynamic DOM scroll monitoring via `ResizeObserver` and scroll events.
---
 .../theme/components/TutorialPlayer.vue       | 526 ++++++++----------
 1 file changed, 229 insertions(+), 297 deletions(-)

diff --git a/docs/.vitepress/theme/components/TutorialPlayer.vue b/docs/.vitepress/theme/components/TutorialPlayer.vue
index acc000a..11b4d37 100644
--- a/docs/.vitepress/theme/components/TutorialPlayer.vue
+++ b/docs/.vitepress/theme/components/TutorialPlayer.vue
@@ -5,7 +5,7 @@
   Clear end-of-tutorial handover options to Play Hub, Browser Client, or Newcomers Guide.
   Features visual toggle pill indicator for Commands, unified Narrative vs Quest Action Card UX, and inline markdown formatting for commands in quest descriptions.
 */
-import { ref, computed, watch, onMounted, onUnmounted, nextTick } from 'vue'
+import { ref, computed, watch, onMounted, onUnmounted } from 'vue'
 import { useData, useRoute, useRouter, withBase } from 'vitepress'
 import { data as allChapters } from '../../../play/tutorial/chapters.data.js'
 
@@ -97,32 +97,6 @@ const isSheetOpen = ref(false)
 const isExpanded = ref(false)
 const isModalOpen = ref(false)
 
-// Reactive Pager State & Timer Management
-const autoAdvanceTimer = ref(null)
-const currentPagerTotal = ref(1)
-const currentPagerIndex = ref(1)
-const isScrollOverflowActive = ref(false)
-const isScrolling = ref(false)
-let scrollEndTimer = null
-const isPagerActive = computed(() => isScrollOverflowActive.value && !isScrolling.value)
-const pendingNextStep = ref(null)
-
-function clearAutoAdvanceTimer() {
-  if (autoAdvanceTimer.value) {
-    clearTimeout(autoAdvanceTimer.value)
-    autoAdvanceTimer.value = null
-  }
-}
-
-function handleScroll() {
-  isScrolling.value = true
-  if (scrollEndTimer) clearTimeout(scrollEndTimer)
-  scrollEndTimer = setTimeout(() => {
-    isScrolling.value = false
-    checkScrollOverflow()
-  }, 150)
-}
-
 function openModal() {
   isModalOpen.value = true
 }
@@ -161,76 +135,97 @@ function handleFullscreenChange() {
   }
 }
 
-function checkScrollOverflow() {
-  if (typeof window === 'undefined' || !logEl.value) return
-  const el = logEl.value
-  if (!el) return
-  if (isScrolling.value) return
-
-  const remainingScroll = el.scrollHeight - el.clientHeight - el.scrollTop
-  if (remainingScroll > 35) {
-    isScrollOverflowActive.value = true
-    const pageSize = Math.max(100, el.clientHeight - 40)
-    currentPagerTotal.value = Math.max(2, Math.ceil(el.scrollHeight / pageSize))
-    currentPagerIndex.value = Math.min(currentPagerTotal.value, Math.max(1, Math.floor(el.scrollTop / pageSize) + 1))
-  } else if (remainingScroll <= 20) {
-    isScrollOverflowActive.value = false
+function handleKeydown(e) {
+  if (e.key === 'Escape' && isExpanded.value) {
+    if (!document.fullscreenElement) {
+      toggleExpand()
+    }
+    return
   }
-}
 
-function advancePager() {
-  if (isScrollOverflowActive.value && logEl.value) {
-    const el = logEl.value
-    const pagePx = Math.max(100, el.clientHeight - 40)
-    isScrolling.value = true
-    el.scrollBy({ top: pagePx, behavior: 'smooth' })
-    handleScroll()
+  // Intercept Space or PageDown for paging if output overflow is active and input is empty or unfocused
+  if (isScrollOverflowActive.value && !isScrolling.value) {
+    const isInputFocused = document.activeElement === inputEl.value
+    if (e.key === 'PageDown' || (e.key === ' ' && (!isInputFocused || !entry.value.trim()))) {
+      e.preventDefault()
+      pageForward()
+    }
   }
 }
 
-function flushPager() {
-  if (logEl.value) {
-    isScrolling.value = true
-    logEl.value.scrollTo({ top: logEl.value.scrollHeight, behavior: 'smooth' })
-    handleScroll()
+const logEl = ref(null)
+const inputEl = ref(null)
+
+// Pager state management
+const isScrollOverflowActive = ref(false)
+const currentPageNum = ref(1)
+const totalPagesNum = ref(1)
+const isScrolling = ref(false)
+let scrollEndTimer = null
+
+function updatePagerState() {
+  const container = logEl.value
+  if (!container) {
+    isScrollOverflowActive.value = false
+    currentPageNum.value = 1
+    totalPagesNum.value = 1
+    return
   }
-  isScrollOverflowActive.value = false
-  if (pendingNextStep.value) {
-    const fn = pendingNextStep.value
-    pendingNextStep.value = null
-    fn()
+
+  const scrollHeight = container.scrollHeight
+  const clientHeight = container.clientHeight
+  const scrollTop = container.scrollTop
+
+  // Determine if there is significant scrollable content below viewport
+  const scrollableDistance = scrollHeight - clientHeight
+  const remainingScroll = scrollableDistance - scrollTop
+
+  if (scrollableDistance > 40 && remainingScroll > 35) {
+    isScrollOverflowActive.value = true
+    const pageSize = Math.max(1, clientHeight - 30)
+    totalPagesNum.value = Math.max(1, Math.ceil(scrollHeight / pageSize))
+    currentPageNum.value = Math.min(totalPagesNum.value, Math.max(1, Math.floor(scrollTop / pageSize) + 1))
+  } else {
+    isScrollOverflowActive.value = false
+    currentPageNum.value = 1
+    totalPagesNum.value = 1
   }
 }
 
-function handleKeydown(e) {
-  if (e.key === 'Escape' && isExpanded.value) {
-    if (!document.fullscreenElement) {
-      toggleExpand()
-    }
-  } else if (isPagerActive.value) {
-    // Only intercept Space key for pager if target is body or input field is empty
-    if (e.key === ' ' || e.key === 'Spacebar' || e.key === 'PageDown') {
-      if (e.target === document.body || (e.target === inputEl.value && !entry.value)) {
-        e.preventDefault()
-        advancePager()
-      }
-    } else if (e.key === 'Enter' && e.target !== inputEl.value) {
-      e.preventDefault()
-      advancePager()
-    }
-  }
+function handleScroll() {
+  isScrolling.value = true
+  if (scrollEndTimer) clearTimeout(scrollEndTimer)
+  scrollEndTimer = setTimeout(() => {
+    isScrolling.value = false
+    updatePagerState()
+  }, 150)
 }
 
-function pushLogItem(item) {
-  log.value.push(item)
-  scrollLog()
+function pageForward() {
+  const container = logEl.value
+  if (!container) return
+  const pageStep = container.clientHeight - 40
+  container.scrollBy({ top: pageStep, behavior: 'smooth' })
+  setTimeout(updatePagerState, 300)
 }
 
-const logEl = ref(null)
-const inputEl = ref(null)
+function flushPager() {
+  const container = logEl.value
+  if (!container) return
+  container.scrollTo({ top: container.scrollHeight, behavior: 'smooth' })
+  setTimeout(updatePagerState, 300)
+}
 
 const stepLabel = computed(() => `Chapter ${chapterNum.value} of ${totalChapters.value}`)
 
+let autoAdvanceTimer = null
+function clearAutoAdvanceTimer() {
+  if (autoAdvanceTimer) {
+    clearTimeout(autoAdvanceTimer)
+    autoAdvanceTimer = null
+  }
+}
+
 function focusInput() {
   if (typeof window !== 'undefined') {
     setTimeout(() => {
@@ -241,6 +236,7 @@ function focusInput() {
 
 function navigateToUrl(url) {
   if (!url) return
+  clearAutoAdvanceTimer()
   const targetUrl = withBase(url)
   if (router && router.go) {
     router.go(targetUrl).catch(() => {
@@ -253,141 +249,109 @@ function navigateToUrl(url) {
 
 function scrollLog() {
   if (typeof window !== 'undefined') {
-    nextTick(() => {
-      setTimeout(() => {
-        const container = logEl.value
-        if (!container) return
-        const blocks = container.querySelectorAll('.tut-block')
-        isScrolling.value = true
-        if (blocks.length > 0) {
-          const lastBlock = blocks[blocks.length - 1]
-          const containerRect = container.getBoundingClientRect()
-          const blockRect = lastBlock.getBoundingClientRect()
-
-          // Bring the top of new/last block into view if it overflows
-          if (blockRect.height > containerRect.height - 40) {
-            lastBlock.scrollIntoView({ behavior: 'smooth', block: 'start' })
-          } else {
-            container.scrollTo({ top: container.scrollHeight, behavior: 'smooth' })
-          }
+    setTimeout(() => {
+      const container = logEl.value
+      if (!container) return
+      const blocks = container.querySelectorAll('.tut-block')
+      if (blocks.length > 0) {
+        const lastBlock = blocks[blocks.length - 1]
+        const containerRect = container.getBoundingClientRect()
+        const blockRect = lastBlock.getBoundingClientRect()
+
+        // If block is taller than the view, bring the start of the block into view
+        if (blockRect.height > containerRect.height - 40) {
+          lastBlock.scrollIntoView({ behavior: 'smooth', block: 'start' })
         } else {
           container.scrollTo({ top: container.scrollHeight, behavior: 'smooth' })
         }
-        handleScroll()
-      }, 60)
-    })
+      } else {
+        container.scrollTo({ top: container.scrollHeight, behavior: 'smooth' })
+      }
+    }, 60)
   }
 }
 
-function goToStep(targetIdx, isAutoAdvance = false) {
+function goToStep(targetIdx) {
   clearAutoAdvanceTimer()
-  pendingNextStep.value = null
-  isScrollOverflowActive.value = false
-
-  const steps = stepsList.value
-  if (!steps || steps.length === 0) {
-    subStepIdx.value = 0
-    finished.value = false
-    log.value = [{
-      kind: 'lesson',
-      chapterNum: chapterNum.value,
-      title: chapterTitle.value,
-      teach: teachList.value,
-      note: null,
-      ask: null
-    }]
-    scrollLog()
-    focusInput()
-    return
-  }
+  if (targetIdx < 0) targetIdx = 0
+  if (targetIdx >= stepsList.value.length) targetIdx = Math.max(0, stepsList.value.length - 1)
 
-  const clampedIdx = Math.max(0, Math.min(targetIdx, steps.length - 1))
-  subStepIdx.value = clampedIdx
+  subStepIdx.value = targetIdx
   finished.value = false
 
   const newLog = []
+  const firstSub = stepsList.value[0] || null
 
-  for (let i = 0; i <= clampedIdx; i++) {
-    const st = steps[i]
-    if (!st) continue
-
-    if (i === 0) {
-      newLog.push({
-        kind: 'lesson',
-        chapterNum: chapterNum.value,
-        title: chapterTitle.value,
-        teach: teachList.value,
-        note: st.note || null,
-        ask: st.ask || null
-      })
-    } else {
-      if (st.ask) {
-        newLog.push({
-          kind: 'prompt_next',
-          stepIndex: i,
-          totalSteps: steps.length,
-          note: st.note || null,
-          ask: st.ask || null
-        })
-      }
-    }
+  newLog.push({
+    kind: 'lesson',
+    chapterNum: chapterNum.value,
+    title: chapterTitle.value,
+    teach: teachList.value,
+    note: firstSub ? firstSub.note : null,
+    ask: firstSub ? firstSub.ask : null
+  })
 
-    if (i < clampedIdx) {
-      // Replay completed step response
-      if (st.ask) {
-        newLog.push({ kind: 'echo', text: st.ask })
-        const rawRes = st.response || mumeResponses.value[st.ask.toLowerCase()] || ''
+  for (let i = 0; i < targetIdx; i++) {
+    const step = stepsList.value[i]
+    if (step) {
+      if (step.ask) {
+        newLog.push({ kind: 'echo', text: step.ask })
+        const rawRes = step.response || step.example || mumeResponses.value[step.ask.toLowerCase()] || ''
         const body = rawRes ? rawRes.replace(/^>[^\n]*\n?/, '') : ''
         if (body) {
           newLog.push({ kind: 'example', body })
         }
-      } else if (st.text || st.response) {
+      } else if (step.text || step.response) {
         newLog.push({
           kind: 'story',
-          body: st.text || st.response
+          body: step.text || step.response
+        })
+      }
+
+      const nextSub = stepsList.value[i + 1]
+      if (nextSub && nextSub.ask) {
+        newLog.push({
+          kind: 'prompt_next',
+          stepIndex: i + 1,
+          totalSteps: stepsList.value.length,
+          note: nextSub.note || null,
+          ask: nextSub.ask
         })
       }
     }
   }
 
   log.value = newLog
+  scrollLog()
 
-  const activeStep = steps[clampedIdx]
-  if (activeStep && !activeStep.ask && (activeStep.text || activeStep.response)) {
-    pushLogItem({
+  const curSub = currentSubStep.value
+  if (curSub && !curSub.ask && (curSub.text || curSub.response)) {
+    log.value.push({
       kind: 'story',
-      body: activeStep.text || activeStep.response
+      body: curSub.text || curSub.response
     })
-    if (isAutoAdvance && typeof window !== 'undefined') {
-      if (isPagerActive.value) {
-        pendingNextStep.value = () => triggerNextStep()
-      } else {
-        autoAdvanceTimer.value = setTimeout(() => {
-          triggerNextStep()
-        }, 250)
-      }
-    } else {
-      scrollLog()
-      focusInput()
-    }
-  } else {
     scrollLog()
+    autoAdvanceTimer = setTimeout(() => {
+      advanceSubStep()
+    }, 250)
+  } else {
     focusInput()
   }
 }
 
 function renderStepLog() {
-  goToStep(0, false)
+  goToStep(0)
 }
 
 function completeChapter() {
   finished.value = true
-  pushLogItem({
+  log.value.push({
     kind: 'chapter_complete',
     chapterNum: chapterNum.value,
     title: chapterTitle.value,
     nextUrl: nextChapterUrl.value
   })
+  scrollLog()
 }
 
 function advanceNext() {
@@ -398,46 +362,32 @@ function advanceNext() {
   }
 }
 
-function triggerNextStep() {
+function advanceSubStep() {
+  clearAutoAdvanceTimer()
   if (subStepIdx.value < stepsList.value.length - 1) {
     subStepIdx.value++
     const nextSub = currentSubStep.value
-    if (nextSub) {
-      if (nextSub.ask) {
-        log.value.push({
-          kind: 'prompt_next',
-          stepIndex: subStepIdx.value,
-          totalSteps: stepsList.value.length,
-          note: nextSub.note || null,
-          ask: nextSub.ask || null
-        })
-      }
-      if (!nextSub.ask && (nextSub.text || nextSub.response)) {
-        pushLogItem({
-          kind: 'story',
-          body: nextSub.text || nextSub.response
-        })
-        if (typeof window !== 'undefined') {
-          if (isPagerActive.value) {
-            pendingNextStep.value = () => triggerNextStep()
-          } else {
-            autoAdvanceTimer.value = setTimeout(() => {
-              triggerNextStep()
-            }, 250)
-          }
-        }
-      }
-    }
-  } else {
-    completeChapter()
-  }
-}
 
-function advanceSubStep() {
-  if (subStepIdx.value < stepsList.value.length - 1) {
-    goToStep(subStepIdx.value + 1, true)
-  } else if (nextChapterUrl.value) {
-    navigateToUrl(nextChapterUrl.value)
+    if (nextSub.ask) {
+      log.value.push({
+        kind: 'prompt_next',
+        stepIndex: subStepIdx.value,
+        totalSteps: stepsList.value.length,
+        note: nextSub.note || null,
+        ask: nextSub.ask
+      })
+      scrollLog()
+      focusInput()
+    } else if (nextSub.text || nextSub.response) {
+      log.value.push({
+        kind: 'story',
+        body: nextSub.text || nextSub.response
+      })
+      scrollLog()
+      autoAdvanceTimer = setTimeout(() => {
+        advanceSubStep()
+      }, 250)
+    }
   } else {
     completeChapter()
   }
@@ -445,26 +395,21 @@ function advanceSubStep() {
 
 function prevSubStep() {
   if (subStepIdx.value > 0) {
-    goToStep(subStepIdx.value - 1, false)
-  } else if (prevChapterUrl.value) {
-    navigateToUrl(prevChapterUrl.value)
+    goToStep(subStepIdx.value - 1)
   }
 }
 
 function submit() {
-  // If pager is active when submitting, advance or flush pager first if input is empty
-  if (isPagerActive.value) {
-    if (!entry.value.trim()) {
-      advancePager()
-      focusInput()
-      return
-    } else {
-      flushPager()
-    }
-  }
-
   const raw = entry.value.trim()
   const cmd = raw.toLowerCase()
+
+  // Handle Pager Mode when input is empty and overflow is active
+  if (isScrollOverflowActive.value && !raw && !finished.value) {
+    pageForward()
+    focusInput()
+    return
+  }
+
   entry.value = ''
 
   if (finished.value) {
@@ -477,7 +422,11 @@ function submit() {
     return
   }
 
-  if (raw) { pushLogItem({ kind: 'echo', text: raw }) }
+  if (isScrollOverflowActive.value) {
+    flushPager()
+  }
+
+  if (raw) { log.value.push({ kind: 'echo', text: raw }) }
 
   if (cmd === 'skip') { advanceNext(); focusInput(); return }
   if (cmd === 'tutorial') { navigateToUrl(allChapters[0]?.url || '/play/tutorial/1-orientation'); focusInput(); return }
@@ -486,7 +435,8 @@ function submit() {
 
   if (!curStep) {
     if (cmd && mumeResponses.value[cmd]) {
-      pushLogItem({ kind: 'example', body: mumeResponses.value[cmd] })
+      log.value.push({ kind: 'example', body: mumeResponses.value[cmd] })
+      scrollLog()
     } else {
       advanceNext()
     }
@@ -495,7 +445,8 @@ function submit() {
   }
 
   if (!cmd) {
-    pushLogItem({ kind: 'error', text: curStep.hint || (`Type: ${curStep.ask}`) })
+    log.value.push({ kind: 'error', text: curStep.hint || (`Type: ${curStep.ask}`) })
+    scrollLog()
     focusInput()
     return
   }
@@ -507,18 +458,16 @@ function submit() {
     const rawRes = curStep.response || curStep.example || mumeResponses.value[cmd] || ''
     const body = rawRes ? rawRes.replace(/^>[^\n]*\n?/, '') : ''
     if (body) {
-      pushLogItem({ kind: 'example', body })
-    }
-    if (isPagerActive.value) {
-      pendingNextStep.value = () => triggerNextStep()
-    } else {
-      triggerNextStep()
+      log.value.push({ kind: 'example', body })
     }
+    advanceSubStep()
   } else if (mumeResponses.value[cmd]) {
-    pushLogItem({ kind: 'example', body: mumeResponses.value[cmd] })
-    pushLogItem({ kind: 'error', text: 'Good try! To proceed in this step, ' + (curStep.hint || (`try: ${curStep.ask}`)) })
+    log.value.push({ kind: 'example', body: mumeResponses.value[cmd] })
+    log.value.push({ kind: 'error', text: 'Good try! To proceed in this step, ' + (curStep.hint || (`try: ${curStep.ask}`)) })
+    scrollLog()
   } else {
-    pushLogItem({ kind: 'error', text: 'MUME does not know that one here. ' + (curStep.hint || (`Try: ${curStep.ask}`)) })
+    log.value.push({ kind: 'error', text: 'MUME does not know that one here. ' + (curStep.hint || (`Try: ${curStep.ask}`)) })
+    scrollLog()
   }
   focusInput()
 }
@@ -527,7 +476,7 @@ watch(() => route.path, () => {
   renderStepLog()
 }, { immediate: true })
 
-let resizeObserver = null
+let logResizeObserver = null
 
 onMounted(() => {
   renderStepLog()
@@ -540,23 +489,22 @@ onMounted(() => {
     window.addEventListener('keydown', handleKeydown)
     document.addEventListener('fullscreenchange', handleFullscreenChange)
 
-    if (typeof ResizeObserver !== 'undefined' && logEl.value) {
-      resizeObserver = new ResizeObserver(() => {
-        checkScrollOverflow()
+    if (logEl.value && typeof ResizeObserver !== 'undefined') {
+      logResizeObserver = new ResizeObserver(() => {
+        updatePagerState()
       })
-      resizeObserver.observe(logEl.value)
+      logResizeObserver.observe(logEl.value)
     }
   }
 })
 
 onUnmounted(() => {
-  clearAutoAdvanceTimer()
   if (typeof window !== 'undefined') {
     window.removeEventListener('keydown', handleKeydown)
     document.removeEventListener('fullscreenchange', handleFullscreenChange)
-    if (resizeObserver) {
-      resizeObserver.disconnect()
-      resizeObserver = null
+    if (logResizeObserver) {
+      logResizeObserver.disconnect()
+      logResizeObserver = null
     }
     if (isExpanded.value && typeof document !== 'undefined') {
       document.body.style.overflow = ''
@@ -617,7 +565,7 @@ onUnmounted(() => {
 
       <div class="tut-body" :class="{ 'has-sheet': isSheetOpen }">
         <div class="tut-term">
-          <div class="tut-log" ref="logEl" @load.capture="checkScrollOverflow" @scroll="handleScroll" aria-live="polite" aria-atomic="false">
+          <div class="tut-log" ref="logEl" aria-live="polite" aria-atomic="false" @scroll="handleScroll" @load.capture="updatePagerState">
             <div v-for="(b, i) in log" :key="i" class="tut-block">
               <template v-if="b.kind === 'lesson'">
                 <!-- Chapter Intro Card -->
@@ -646,7 +594,7 @@ onUnmounted(() => {
 
               <template v-else-if="b.kind === 'prompt_next'">
                 <!-- High-contrast Quest Action Card for Next Steps -->
-                <div class="tut-quest-card" v-if="b.ask">
+                <div class="tut-quest-card">
                   <div class="tut-quest-header">
                     <span class="tut-quest-badge"><i class="fa fa-compass" aria-hidden="true"></i> QUEST</span>
                     <span class="tut-quest-sub">ACTION REQUIRED</span>
@@ -704,25 +652,18 @@ onUnmounted(() => {
             </div>
           </div>
 
-          <!-- Sticky Pager Banner for Desktop & Touch Devices -->
-          <div v-if="isPagerActive" class="tut-pager-banner" @click="advancePager">
-            <span class="tut-pager-text">
-              <i class="fa fa-chevron-down" aria-hidden="true"></i>
-              <span>[ MORE &mdash; Page {{ currentPagerIndex }} of {{ currentPagerTotal }} &mdash; Press Space/Enter or Tap ]</span>
-            </span>
-            <button type="button" class="tut-pager-btn" @click.stop="advancePager" aria-label="Next Page">
-              More &darr;
-            </button>
-          </div>
-
-          <div class="tut-prompt">
+          <div class="tut-prompt" :class="{ 'is-pager': isScrollOverflowActive && !isScrolling }" @click="isScrollOverflowActive && !entry ? pageForward() : focusInput()">
             <span class="tut-caret">&gt;</span>
             <input ref="inputEl" v-model="entry" @keydown.enter.prevent="submit"
                    autocomplete="off" spellcheck="false"
-                   :placeholder="isPagerActive ? 'Press Space, Enter, or Tap More...' : (finished ? (nextChapterUrl ? 'Press Enter to continue to next chapter...' : 'Tutorial complete — press Enter for options') : (currentSubStep && !currentSubStep.ask ? 'Press Enter to continue...' : 'type here, then press Enter'))"
+                   :placeholder="isScrollOverflowActive && !isScrolling && !entry ? `[ MORE — Page ${currentPageNum} of ${totalPagesNum} — Press Space/Enter or Tap ]` : (finished ? (nextChapterUrl ? 'Press Enter to continue to next chapter...' : 'Tutorial complete — press Enter for options') : 'type here, then press Enter')"
                    aria-label="Type a command" />
-            <button type="button" class="tut-send-btn" @click="submit" aria-label="Send Command">
-              {{ isPagerActive ? 'More' : (finished ? (nextChapterUrl ? 'Next' : 'Options') : (currentSubStep && !currentSubStep.ask ? 'Next' : 'Send')) }}
+            <button type="button"
+                    class="tut-send-btn"
+                    :class="{ 'tut-pager-btn': isScrollOverflowActive && !isScrolling && !entry }"
+                    @click.stop="submit"
+                    aria-label="Send Command">
+              {{ (isScrollOverflowActive && !isScrolling && !entry) ? 'More ↓' : (finished ? (nextChapterUrl ? 'Next' : 'Options') : 'Send') }}
             </button>
           </div>
         </div>
@@ -790,23 +731,23 @@ onUnmounted(() => {
           </button>
 
           <!-- Prev Step < -->
-          <button type="button" class="tut-nav-btn" :disabled="subStepIdx === 0 && !prevChapterUrl" @click="prevSubStep" title="Previous Step (<)">
+          <button type="button" class="tut-nav-btn" :disabled="subStepIdx === 0 || stepsList.length <= 1" @click="prevSubStep" title="Previous Step (<)">
             &lsaquo;
           </button>
 
           <!-- Integrated Step Indicator Pills -->
           <div class="tut-step-pills" v-if="stepsList.length > 1">
             <button v-for="(st, sIdx) in stepsList" :key="sIdx"
-                    type="button"
-                    class="tut-step-pill tut-step-pill-btn"
-                    :class="{ active: sIdx === subStepIdx, done: sIdx < subStepIdx }"
-                    :title="'Jump to Step ' + (sIdx + 1) + ' of ' + stepsList.length"
-                    @click="goToStep(sIdx, false)"></button>
+                  type="button"
+                  class="tut-step-pill tut-step-pill-btn"
+                  :class="{ active: sIdx === subStepIdx, done: sIdx < subStepIdx }"
+                  :title="'Jump to Step ' + (sIdx + 1) + ' of ' + stepsList.length"
+                  @click="goToStep(sIdx)"></button>
           </div>
           <span v-else class="tut-ch-badge">Ch {{ chapterNum }}</span>
 
           <!-- Next Step > -->
-          <button type="button" class="tut-nav-btn" :disabled="subStepIdx >= stepsList.length - 1 && !nextChapterUrl" @click="advanceSubStep" title="Next Step (>)">
+          <button type="button" class="tut-nav-btn" :disabled="subStepIdx >= stepsList.length - 1 || stepsList.length <= 1" @click="advanceSubStep" title="Next Step (>)">
             &rsaquo;
           </button>
 
@@ -844,9 +785,9 @@ onUnmounted(() => {
   background: rgba(215, 166, 63, 0.6);
 }
 
-.tut-head { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1px solid rgba(215,166,63,.25); background: linear-gradient(180deg,#15130c,#0b0b0d); flex-wrap: wrap; position: relative; }
+.tut-head { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1px solid rgba(215,166,63,.25); background: linear-gradient(180deg,#15130c,#0b0b0d); flex-wrap: wrap; }
 .tut-logo { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; }
-.tut-heading { display: flex; flex-direction: column; line-height: 1.15; margin-right: auto; padding-right: 70px; }
+.tut-heading { display: flex; flex-direction: column; line-height: 1.15; margin-right: auto; }
 .tut-title { font-family: 'Kelt', serif; color: #f4dd94; font-size: 22px; }
 .tut-sub { color: #9a927f; font-size: 12.5px; }
 .tut-progress { display: flex; align-items: center; gap: 10px; }
@@ -858,8 +799,7 @@ onUnmounted(() => {
 .tut-tick.clickable:hover { background: #ffd966; transform: scale(1.25); }
 .tut-step { color: #9a927f; font-size: 12.5px; white-space: nowrap; }
 
-.tut-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
-.tut-exit-btn { order: 99; margin-left: auto; }
+.tut-actions { display: flex; align-items: center; gap: 8px; margin-left: 8px; }
 
 @keyframes tutPulseHint {
   0% { box-shadow: 0 0 0 0 rgba(215, 166, 63, 0.4); }
@@ -1087,29 +1027,24 @@ onUnmounted(() => {
 .tut-secondary-link:hover, .tut-secondary-link:focus-visible { background: darkgoldenrod; color: #3a3a3a !important; text-decoration: none !important; }
 .tut-note { color: #8f8a7d; font-size: 12.5px; margin: 4px 0 6px; }
 
-.tut-pager-banner {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  background: rgba(184, 134, 11, 0.25);
-  border-top: 1px solid rgba(215, 166, 63, 0.5);
-  border-bottom: 1px solid rgba(215, 166, 63, 0.3);
-  padding: 8px 16px;
-  cursor: pointer;
-  color: #f4dd94;
-  font-family: 'DejaVu Sans Mono', Menlo, Consolas, monospace;
-  font-size: 13px;
-  user-select: none;
-  animation: tutPulseHint 2s infinite;
-}
-.tut-pager-text { display: flex; align-items: center; gap: 8px; font-weight: bold; }
-.tut-pager-btn { background: gold; color: #111; border: none; border-radius: 12px; padding: 2px 10px; font-weight: bold; font-size: 12px; cursor: pointer; }
-
-.tut-prompt { display: flex; align-items: center; gap: 8px; border-top: 1px solid #23262e; padding: 12px 18px; background: #08080a; }
+.tut-prompt { display: flex; align-items: center; gap: 8px; border-top: 1px solid #23262e; padding: 12px 18px; background: #08080a; transition: background 0.25s, border-color 0.25s; }
+.tut-prompt.is-pager { background: linear-gradient(180deg, #18150c, #0a0b0e); border-top-color: rgba(215, 166, 63, 0.5); cursor: pointer; }
+.tut-prompt.is-pager input::placeholder { color: #f4dd94; font-weight: bold; }
 .tut-caret { color: #d8b04a; font-family: 'DejaVu Sans Mono', Menlo, Consolas, monospace; }
 .tut-prompt input { flex: 1; background: transparent; border: none; outline: none; color: #eaeaea; font-family: 'DejaVu Sans Mono', Menlo, Consolas, monospace; font-size: 14px; }
 .tut-prompt input::placeholder { color: #5f5f5f; }
 
+.tut-send-btn.tut-pager-btn {
+  background: #f4dd94;
+  color: #111;
+  box-shadow: 0 0 10px rgba(244, 221, 148, 0.4);
+  animation: tutPulseHint 2s infinite;
+}
+.tut-send-btn.tut-pager-btn:hover {
+  background: #ffffff;
+  color: #000;
+}
+
 .tut-sheet { border-left: 1px solid #23262e; background: #08090c; display: none; flex-direction: column; }
 .tut-body.has-sheet .tut-sheet { display: flex; }
 @media (max-width: 720px) { .tut-sheet { border-left: 0; border-top: 1px solid #23262e; } }
@@ -1203,7 +1138,7 @@ onUnmounted(() => {
   max-height: calc(100vh - 120px);
 }
 
-.tut-send-btn { background: darkgoldenrod; border: none; color: #fff; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; font-size: 13px; padding: 4px 12px; border-radius: 14px; cursor: pointer; font-weight: bold; }
+.tut-send-btn { background: darkgoldenrod; border: none; color: #fff; font-family: 'Kelt', serif; font-size: 13px; padding: 4px 12px; border-radius: 14px; cursor: pointer; font-weight: bold; }
 
 .tut-sheet-close { display: block; background: none; border: none; color: #9a927f; font-size: 20px; cursor: pointer; padding: 0 4px; }
 .tut-sheet-close:hover { color: #f4dd94; }
@@ -1336,8 +1271,8 @@ onUnmounted(() => {
 .tut-ch-badge { color: #9a927f; font-size: 12px; padding: 0 6px; }
 
 .tut-step-pills { display: flex; align-items: center; gap: 4px; padding: 0 6px; }
-.tut-step-pill { width: 12px; height: 4px; border-radius: 2px; background: #2a2a2a; transition: background .2s, width .2s; }
-.tut-step-pill-btn { border: none; padding: 0; cursor: pointer; }
+.tut-step-pill { width: 12px; height: 4px; border-radius: 2px; background: #2a2a2a; transition: background .2s, width .2s; border: none; padding: 0; }
+.tut-step-pill-btn { cursor: pointer; }
 .tut-step-pill-btn:hover { background: #ffd966; }
 .tut-step-pill.done { background: #a9812a; }
 .tut-step-pill.active { background: #f4dd94; width: 20px; box-shadow: 0 0 6px rgba(244,221,148,.5); }
@@ -1345,9 +1280,6 @@ onUnmounted(() => {
 @media (max-width: 720px) {
   .tut { margin: 0.5rem 0 1rem; }
   .tut-head { flex-wrap: wrap; gap: 6px 8px; padding: 8px 10px; }
-  .tut-heading { padding-right: 60px; }
-  .tut-actions { width: 100%; justify-content: flex-start; margin-left: 0; }
-  .tut-exit-btn { position: absolute; top: 8px; right: 10px; margin-left: 0; z-index: 10; }
   .tut-title { font-size: 18px; }
   .tut-sub { font-size: 11px; }
   .tut-progress { width: 100%; justify-content: space-between; margin-top: 2px; flex-wrap: wrap; gap: 4px; }

From 9766a64d2016199241a671555466c675a5cc6a6a Mon Sep 17 00:00:00 2001
From: nschimme <5505185+nschimme@users.noreply.github.com>
Date: Sun, 20 Sep 2026 21:54:50 +0000
Subject: [PATCH 08/13] fix(tutorial): clear inputs on rewind & add reactive
 prompt pager

- Rewind step navigation (`goToStep`) now cancels auto-advance timers, resets `log.value`, and cleanly replays step elements up to target step without orphan prompts.
- Integrate reactive terminal pager directly into the input bar when log overflows, handling keyboard (Space/PageDown/Enter) and touch/mouse interactions without virtual keyboard pops on mobile.
- Support inline markdown images (`![alt](url)`) in frontmatter story beats and step responses with dynamic pager state recalculations on image load.
- Stream Chapter 15 screenshots via step story beats to keep initial load compact and enable step-by-step keyboard pagination.
- Update `TUTORIAL.md` contributor documentation.
---
 .../theme/components/TutorialPlayer.vue       | 21 +++++++++++++++++--
 docs/play/TUTORIAL.md                         | 11 +++++++++-
 docs/play/tutorial/15-journey.md              | 15 +++----------
 3 files changed, 32 insertions(+), 15 deletions(-)

diff --git a/docs/.vitepress/theme/components/TutorialPlayer.vue b/docs/.vitepress/theme/components/TutorialPlayer.vue
index 11b4d37..667decc 100644
--- a/docs/.vitepress/theme/components/TutorialPlayer.vue
+++ b/docs/.vitepress/theme/components/TutorialPlayer.vue
@@ -19,11 +19,17 @@ const { site, frontmatter } = useData()
 
 function formatInlineMarkdown(text) {
   if (!text) return ''
-  const safe = text
+  let safe = text
     .replace(/&/g, '&amp;')
     .replace(/</g, '&lt;')
     .replace(/>/g, '&gt;')
-  return safe.replace(/`([^`]+)`/g, '<code class="tut-cmd-inline">$1</code>')
+
+  safe = safe.replace(/!\[([^\]]*)\]\(([^)]+)\)/g, (match, alt, src) => {
+    return `<img src="${src}" alt="${alt}" class="tut-img-embed" onload="this.dispatchEvent(new Event('load', { bubbles: true }))" />`
+  })
+
+  safe = safe.replace(/`([^`]+)`/g, '<code class="tut-cmd-inline">$1</code>')
+  return safe.replace(/\n/g, '<br>')
 }
 
 const currentChapterObj = computed(() => {
@@ -1000,6 +1006,17 @@ onUnmounted(() => {
   font-style: italic;
   font-size: 13.5px;
   line-height: 1.5;
+  flex: 1;
+}
+
+.tut-img-embed {
+  max-width: 100%;
+  max-height: 220px;
+  border-radius: 6px;
+  border: 1px solid rgba(215, 166, 63, 0.35);
+  margin: 8px 0;
+  display: block;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
 }
 
 .tut-complete-box {
diff --git a/docs/play/TUTORIAL.md b/docs/play/TUTORIAL.md
index a736504..4af7f6c 100644
--- a/docs/play/TUTORIAL.md
+++ b/docs/play/TUTORIAL.md
@@ -73,7 +73,7 @@ responses:
 | `teach` | List | Commands introduced in this chapter. Appears in the "Command Sheet" sidebar/drawer. Each item has `command` and `desc`. |
 | `steps` | List | Interactive practice steps executed sequentially in the terminal emulator. |
 | `steps[].ask` | String | (Optional) The target command prompt (e.g., `look`). If omitted, step is an automatic story beat. |
-| `steps[].story` | String | (Optional) Story beat that streams automatically into the terminal without requiring typing (can also use `beat:` or `text:`). |
+| `steps[].story` | String | (Optional) Story beat that streams automatically into the terminal without requiring typing (can also use `beat:` or `text:`). Supports inline images `![alt](url)`. |
 | `steps[].note` | String | Highlighting note giving context and guidance for the task. |
 | `steps[].accept` | List | Accepted command variations (e.g., `["look", "l"]`). Case-insensitive. |
 | `steps[].hint` | String | (Optional) Hint displayed if the user types an unaccepted command. Defaults to `Type: <ask>`. |
@@ -107,6 +107,15 @@ steps:
 
 ---
 
+## Embedded Images & Step-by-Step Paging
+
+For chapters introducing visual concepts or UI previews (such as client interface screenshots):
+1. **Stream Images via Story Beats or Responses:** Instead of dumping large images into the Markdown body at the bottom of the file, attach images to specific `story` beats using Markdown image syntax: `![alt text](/assets/images/filename.png)`.
+2. **Automated Terminal Pager:** When images or large text outputs stream into the log, the terminal's built-in MUD pager activates automatically if content overflows the viewport. Users can press `Space` or `Enter` (or tap the prompt on touch devices) to page through content line-by-line without needing to scroll manually with a mouse.
+3. **Compact Initial Card:** Keep the Markdown lesson text below frontmatter concise so that when a chapter opens, the initial intro card and first quest prompt fit within the terminal log without initial overflow.
+
+---
+
 ## Summary Checklist for Authors
 
 - [ ] File name starts with `[number]-` (e.g. `16-`).
diff --git a/docs/play/tutorial/15-journey.md b/docs/play/tutorial/15-journey.md
index 9895a0d..1575a77 100644
--- a/docs/play/tutorial/15-journey.md
+++ b/docs/play/tutorial/15-journey.md
@@ -16,12 +16,14 @@ steps:
       - "look"
       - "l"
     hint: "Type: look"
+  - story: "![Web Client Interface](/assets/images/tutorial-desc.png)\nWhen connected via the MUME Web Client, you'll enjoy integrated live mapping and stats tracking."
   - ask: "map"
     note: "Type `map` to examine the live MMapper radar view."
     accept:
       - "map"
       - "m"
     hint: "Type: map"
+  - story: "![MMapper Live Radar](/assets/images/tutorial-map.png)\nMMapper tracks your position in real-time as you journey through Middle-earth."
   - ask: "who ranger"
     note: "MUME Rangers exist specifically to assist new players! Check active Rangers with `who ranger`."
     accept:
@@ -39,15 +41,4 @@ responses:
 
 # Chapter 15: Hero's Graduation
 
-Congratulations on guiding Fuor through the Black Hills walkthrough! You have mastered navigation, combat reflexes, equipment, trading, and resting.
-
-### Web Client & MMapper Preview
-
-When you launch into MUME using the Web Client, you'll see an integrated live mapper (**MMapper**) and character stats panel:
-
-<div style="display: flex; gap: 12px; margin: 12px 0; flex-wrap: wrap;">
-  <img src="/assets/images/tutorial-desc.png" alt="Web Client Interface" style="max-width: 48%; border-radius: 6px; border: 1px solid rgba(215,166,63,0.3);" />
-  <img src="/assets/images/tutorial-map.png" alt="MMapper Live Map" style="max-width: 48%; border-radius: 6px; border: 1px solid rgba(215,166,63,0.3);" />
-</div>
-
-Follow the interactive quest prompts below to complete your graduation!
+Congratulations on guiding Fuor through the Black Hills walkthrough! Follow the interactive quest prompts below to complete your graduation.

From e5efca6848263e55d91408c696478dcb30fe9051 Mon Sep 17 00:00:00 2001
From: nschimme <5505185+nschimme@users.noreply.github.com>
Date: Sun, 20 Sep 2026 22:00:11 +0000
Subject: [PATCH 09/13] fix(tutorial): clear inputs on rewind, add reactive
 output pager & remove escaped newlines

- Rewind step navigation (`goToStep`) now cancels auto-advance timers, resets `log.value`, and cleanly replays step elements up to target step without orphan prompts.
- Integrate reactive terminal pager directly into the input bar when log overflows, handling keyboard (Space/PageDown/Enter) and touch/mouse interactions without virtual keyboard pops on mobile.
- Support inline markdown images (`![alt](url)`) in frontmatter story beats and step responses with dynamic pager state recalculations on image load.
- Stream Chapter 15 screenshots via step story beats to keep initial load compact and enable step-by-step keyboard pagination.
- Convert all literal `\n` newlines in tutorial chapter files to natural YAML multiline scalars (`|`).
- Update `TUTORIAL.md` authoring guide to advise contributors on using YAML block scalars instead of `\n`.
---
 docs/play/TUTORIAL.md            | 10 +++++--
 docs/play/tutorial/15-journey.md | 46 +++++++++++++++++++++++++++-----
 2 files changed, 47 insertions(+), 9 deletions(-)

diff --git a/docs/play/TUTORIAL.md b/docs/play/TUTORIAL.md
index 4af7f6c..ed70274 100644
--- a/docs/play/TUTORIAL.md
+++ b/docs/play/TUTORIAL.md
@@ -50,11 +50,17 @@ Write your lesson introduction here using standard Markdown. Explain the concept
 
 ---
 
-## Easy Multiline Text Formatting
+## Easy Multiline Text Formatting (No `\n` Required!)
 
-Instead of typing `\n` for line breaks, use the YAML multiline literal pipe character `|` so you can write natural, formatted MUD terminal responses across multiple lines:
+**Do NOT use `\n` for line breaks in tutorial files.** Non-technical contributors should write natural multiline text.
+
+Always use the YAML multiline literal pipe character `|` for multi-line story beats, step notes, or simulated MUD outputs:
 
 ```yaml
+steps:
+  - story: |
+      ![Web Client Interface](/assets/images/tutorial-desc.png)
+      When connected via the MUME Web Client, you'll enjoy integrated live mapping and stats tracking.
 responses:
   score: |
     36/36 hits, 76/76 mana, and 126/126 moves.
diff --git a/docs/play/tutorial/15-journey.md b/docs/play/tutorial/15-journey.md
index 1575a77..9961554 100644
--- a/docs/play/tutorial/15-journey.md
+++ b/docs/play/tutorial/15-journey.md
@@ -16,14 +16,18 @@ steps:
       - "look"
       - "l"
     hint: "Type: look"
-  - story: "![Web Client Interface](/assets/images/tutorial-desc.png)\nWhen connected via the MUME Web Client, you'll enjoy integrated live mapping and stats tracking."
+  - story: |
+      ![Web Client Interface](/assets/images/tutorial-desc.png)
+      When connected via the MUME Web Client, you'll enjoy integrated live mapping and stats tracking.
   - ask: "map"
     note: "Type `map` to examine the live MMapper radar view."
     accept:
       - "map"
       - "m"
     hint: "Type: map"
-  - story: "![MMapper Live Radar](/assets/images/tutorial-map.png)\nMMapper tracks your position in real-time as you journey through Middle-earth."
+  - story: |
+      ![MMapper Live Radar](/assets/images/tutorial-map.png)
+      MMapper tracks your position in real-time as you journey through Middle-earth.
   - ask: "who ranger"
     note: "MUME Rangers exist specifically to assist new players! Check active Rangers with `who ranger`."
     accept:
@@ -32,11 +36,39 @@ steps:
       - "who"
     hint: "Type: who ranger"
 responses:
-  look: "The Foaming Mug's Beer Garden\nA quiet courtyard paved with cobblestones lies behind the tavern.\nExits: north, east.\nRanger Ermin smiles warmly at you.\n\n*+->"
-  map: "    #   .   .\n    |   |   |\n  .-*---*---*-.\n    |   |   |\n    #   .   .\n\n*+->"
-  who ranger: "Rangers\n-------\n\n0 such allies or visible Ainur on.\n\n*+->"
-  who rangers: "Rangers\n-------\n\n0 such allies or visible Ainur on.\n\n*+->"
-  who: "Players Online: Fuor, Martyrson, Elrond, Glorfindel.\n\n*+->"
+  look: |
+    The Foaming Mug's Beer Garden
+    A quiet courtyard paved with cobblestones lies behind the tavern.
+    Exits: north, east.
+    Ranger Ermin smiles warmly at you.
+
+    *+->
+  map: |
+    #   .   .
+    |   |   |
+    .-*---*---*-.
+    |   |   |
+    #   .   .
+
+    *+->
+  who ranger: |
+    Rangers
+    -------
+
+    0 such allies or visible Ainur on.
+
+    *+->
+  who rangers: |
+    Rangers
+    -------
+
+    0 such allies or visible Ainur on.
+
+    *+->
+  who: |
+    Players Online: Fuor, Martyrson, Elrond, Glorfindel.
+
+    *+->
 ---
 
 # Chapter 15: Hero's Graduation

From 55f483b3789f089452aff1365786f320b0066552 Mon Sep 17 00:00:00 2001
From: nschimme <5505185+nschimme@users.noreply.github.com>
Date: Sun, 20 Sep 2026 22:35:36 +0000
Subject: [PATCH 10/13] fix(tutorial): clear inputs on step rewind, add
 terminal pager, and relative image paths

---
 .../theme/components/TutorialPlayer.vue       |  6 ++-
 docs/play/TUTORIAL.md                         |  4 +-
 docs/play/tutorial/15-journey.md              |  4 +-
 scripts/test-link-and-asset-paths.js          | 54 ++++++++++++++++++-
 4 files changed, 62 insertions(+), 6 deletions(-)

diff --git a/docs/.vitepress/theme/components/TutorialPlayer.vue b/docs/.vitepress/theme/components/TutorialPlayer.vue
index 667decc..5c89b55 100644
--- a/docs/.vitepress/theme/components/TutorialPlayer.vue
+++ b/docs/.vitepress/theme/components/TutorialPlayer.vue
@@ -25,7 +25,9 @@ function formatInlineMarkdown(text) {
     .replace(/>/g, '&gt;')
 
   safe = safe.replace(/!\[([^\]]*)\]\(([^)]+)\)/g, (match, alt, src) => {
-    return `<img src="${src}" alt="${alt}" class="tut-img-embed" onload="this.dispatchEvent(new Event('load', { bubbles: true }))" />`
+    const cleanAlt = alt.replace(/"/g, '&quot;')
+    const cleanSrc = src.replace(/"/g, '&quot;')
+    return `<img src="${cleanSrc}" alt="${cleanAlt}" class="tut-img-embed" onload="this.dispatchEvent(new Event('load', { bubbles: true }))" />`
   })
 
   safe = safe.replace(/`([^`]+)`/g, '<code class="tut-cmd-inline">$1</code>')
@@ -402,6 +404,8 @@ function advanceSubStep() {
 function prevSubStep() {
   if (subStepIdx.value > 0) {
     goToStep(subStepIdx.value - 1)
+  } else if (prevChapterUrl.value) {
+    navigateToUrl(prevChapterUrl.value)
   }
 }
 
diff --git a/docs/play/TUTORIAL.md b/docs/play/TUTORIAL.md
index ed70274..3c784ad 100644
--- a/docs/play/TUTORIAL.md
+++ b/docs/play/TUTORIAL.md
@@ -59,7 +59,7 @@ Always use the YAML multiline literal pipe character `|` for multi-line story be
 ```yaml
 steps:
   - story: |
-      ![Web Client Interface](/assets/images/tutorial-desc.png)
+      ![Web Client Interface](../public/assets/images/tutorial-desc.png)
       When connected via the MUME Web Client, you'll enjoy integrated live mapping and stats tracking.
 responses:
   score: |
@@ -116,7 +116,7 @@ steps:
 ## Embedded Images & Step-by-Step Paging
 
 For chapters introducing visual concepts or UI previews (such as client interface screenshots):
-1. **Stream Images via Story Beats or Responses:** Instead of dumping large images into the Markdown body at the bottom of the file, attach images to specific `story` beats using Markdown image syntax: `![alt text](/assets/images/filename.png)`.
+1. **Stream Images via Story Beats or Responses:** Instead of dumping large images into the Markdown body at the bottom of the file, attach images to specific `story` beats using Markdown image syntax: `![alt text](../../public/assets/images/filename.png)`.
 2. **Automated Terminal Pager:** When images or large text outputs stream into the log, the terminal's built-in MUD pager activates automatically if content overflows the viewport. Users can press `Space` or `Enter` (or tap the prompt on touch devices) to page through content line-by-line without needing to scroll manually with a mouse.
 3. **Compact Initial Card:** Keep the Markdown lesson text below frontmatter concise so that when a chapter opens, the initial intro card and first quest prompt fit within the terminal log without initial overflow.
 
diff --git a/docs/play/tutorial/15-journey.md b/docs/play/tutorial/15-journey.md
index 9961554..bd49d42 100644
--- a/docs/play/tutorial/15-journey.md
+++ b/docs/play/tutorial/15-journey.md
@@ -17,7 +17,7 @@ steps:
       - "l"
     hint: "Type: look"
   - story: |
-      ![Web Client Interface](/assets/images/tutorial-desc.png)
+      ![Web Client Interface](../../public/assets/images/tutorial-desc.png)
       When connected via the MUME Web Client, you'll enjoy integrated live mapping and stats tracking.
   - ask: "map"
     note: "Type `map` to examine the live MMapper radar view."
@@ -26,7 +26,7 @@ steps:
       - "m"
     hint: "Type: map"
   - story: |
-      ![MMapper Live Radar](/assets/images/tutorial-map.png)
+      ![MMapper Live Radar](../../public/assets/images/tutorial-map.png)
       MMapper tracks your position in real-time as you journey through Middle-earth.
   - ask: "who ranger"
     note: "MUME Rangers exist specifically to assist new players! Check active Rangers with `who ranger`."
diff --git a/scripts/test-link-and-asset-paths.js b/scripts/test-link-and-asset-paths.js
index 401251b..c07d76d 100644
--- a/scripts/test-link-and-asset-paths.js
+++ b/scripts/test-link-and-asset-paths.js
@@ -149,7 +149,59 @@ for (const htmlFile of htmlFiles) {
   }
 }
 
-console.log(`[TEST SUMMARY] Checked ${htmlFiles.length} HTML files, ${totalLinksChecked} internal links, and ${totalAssetsChecked} asset references.`)
+// 4. Verify Markdown image asset links in docs/*.md
+const docsDir = path.resolve(__dirname, '../docs')
+function getAllMdFiles(dir, fileList = []) {
+  if (!fs.existsSync(dir)) return fileList
+  const files = fs.readdirSync(dir)
+  for (const file of files) {
+    const filePath = path.join(dir, file)
+    if (fs.statSync(filePath).isDirectory()) {
+      getAllMdFiles(filePath, fileList)
+    } else if (file.endsWith('.md')) {
+      fileList.push(filePath)
+    }
+  }
+  return fileList
+}
+
+const mdFiles = getAllMdFiles(docsDir)
+let totalMdImagesChecked = 0
+
+for (const mdFile of mdFiles) {
+  const content = fs.readFileSync(mdFile, 'utf8')
+  const relMdPath = path.relative(docsDir, mdFile)
+  const matches = [...content.matchAll(/!\[[^\]]*\]\(([^)]+)\)/g)]
+
+  for (const match of matches) {
+    const imgUrl = match[1].trim().split(/\s+/)[0]
+    if (
+      imgUrl.startsWith('http://') ||
+      imgUrl.startsWith('https://') ||
+      imgUrl.startsWith('data:') ||
+      imgUrl === 'url' ||
+      imgUrl.includes('filename.png')
+    ) {
+      continue
+    }
+
+    totalMdImagesChecked++
+    let resolvedImgPath = ''
+    if (imgUrl.startsWith('/assets/')) {
+      resolvedImgPath = path.join(docsDir, 'public', imgUrl)
+    } else if (imgUrl.startsWith('/')) {
+      resolvedImgPath = path.join(docsDir, 'public', imgUrl)
+    } else {
+      resolvedImgPath = path.resolve(path.dirname(mdFile), imgUrl)
+    }
+
+    if (!fs.existsSync(resolvedImgPath)) {
+      errors.push(`docs/${relMdPath}: Markdown image "${imgUrl}" not found at "${resolvedImgPath}"`)
+    }
+  }
+}
+
+console.log(`[TEST SUMMARY] Checked ${htmlFiles.length} HTML files, ${totalLinksChecked} internal links, ${totalAssetsChecked} dist asset references, and ${totalMdImagesChecked} Markdown image links.`)
 
 if (errors.length > 0) {
   console.error(`\n[TEST FAILURES] Found ${errors.length} link/asset path issues:\n`)

From aa6ad00d8bda3ec2d65e256b6b9735199b8be7bc Mon Sep 17 00:00:00 2001
From: nschimme <5505185+nschimme@users.noreply.github.com>
Date: Sun, 20 Sep 2026 22:54:09 +0000
Subject: [PATCH 11/13] fix(tutorial): clear inputs on step rewind, add
 terminal pager, and relative image paths

---
 .../theme/components/TutorialPlayer.vue       | 21 +++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

diff --git a/docs/.vitepress/theme/components/TutorialPlayer.vue b/docs/.vitepress/theme/components/TutorialPlayer.vue
index 5c89b55..5a42712 100644
--- a/docs/.vitepress/theme/components/TutorialPlayer.vue
+++ b/docs/.vitepress/theme/components/TutorialPlayer.vue
@@ -26,7 +26,16 @@ function formatInlineMarkdown(text) {
 
   safe = safe.replace(/!\[([^\]]*)\]\(([^)]+)\)/g, (match, alt, src) => {
     const cleanAlt = alt.replace(/"/g, '&quot;')
-    const cleanSrc = src.replace(/"/g, '&quot;')
+    let cleanSrc = src.trim().replace(/"/g, '&quot;')
+
+    if (cleanSrc.includes('assets/')) {
+      cleanSrc = '/assets/' + cleanSrc.split('assets/')[1]
+    }
+
+    if (cleanSrc.startsWith('/')) {
+      cleanSrc = withBase(cleanSrc)
+    }
+
     return `<img src="${cleanSrc}" alt="${cleanAlt}" class="tut-img-embed" onload="this.dispatchEvent(new Event('load', { bubbles: true }))" />`
   })
 
@@ -332,7 +341,7 @@ function goToStep(targetIdx) {
   log.value = newLog
   scrollLog()
 
-  const curSub = currentSubStep.value
+  const curSub = stepsList.value[targetIdx] || null
   if (curSub && !curSub.ask && (curSub.text || curSub.response)) {
     log.value.push({
       kind: 'story',
@@ -374,9 +383,9 @@ function advanceSubStep() {
   clearAutoAdvanceTimer()
   if (subStepIdx.value < stepsList.value.length - 1) {
     subStepIdx.value++
-    const nextSub = currentSubStep.value
+    const nextSub = stepsList.value[subStepIdx.value] || null
 
-    if (nextSub.ask) {
+    if (nextSub && nextSub.ask) {
       log.value.push({
         kind: 'prompt_next',
         stepIndex: subStepIdx.value,
@@ -386,7 +395,7 @@ function advanceSubStep() {
       })
       scrollLog()
       focusInput()
-    } else if (nextSub.text || nextSub.response) {
+    } else if (nextSub && (nextSub.text || nextSub.response)) {
       log.value.push({
         kind: 'story',
         body: nextSub.text || nextSub.response
@@ -489,8 +498,8 @@ watch(() => route.path, () => {
 let logResizeObserver = null
 
 onMounted(() => {
-  renderStepLog()
   if (typeof window !== 'undefined') {
+    renderStepLog()
     // Auto-open Command Sheet on desktop viewports by default
     if (window.innerWidth >= 1024) {
       isSheetOpen.value = true

From 76e1e200cf85a717c96f467ce637753d07bdafc5 Mon Sep 17 00:00:00 2001
From: nschimme <5505185+nschimme@users.noreply.github.com>
Date: Sun, 20 Sep 2026 23:10:04 +0000
Subject: [PATCH 12/13] fix(tutorial): clear inputs on step rewind, add
 terminal pager, and relative image modal preview

---
 .../theme/components/TutorialPlayer.vue       | 119 +++++++++++++++++-
 1 file changed, 114 insertions(+), 5 deletions(-)

diff --git a/docs/.vitepress/theme/components/TutorialPlayer.vue b/docs/.vitepress/theme/components/TutorialPlayer.vue
index 5a42712..06a0602 100644
--- a/docs/.vitepress/theme/components/TutorialPlayer.vue
+++ b/docs/.vitepress/theme/components/TutorialPlayer.vue
@@ -113,6 +113,7 @@ const entry = ref('')
 const isSheetOpen = ref(false)
 const isExpanded = ref(false)
 const isModalOpen = ref(false)
+const activeModalImage = ref(null)
 
 function openModal() {
   isModalOpen.value = true
@@ -122,6 +123,21 @@ function closeModal() {
   isModalOpen.value = false
 }
 
+function openImageModal(src, alt = '') {
+  activeModalImage.value = { src, alt }
+}
+
+function closeImageModal() {
+  activeModalImage.value = null
+}
+
+function handleLogClick(e) {
+  const target = e.target
+  if (target && target.tagName === 'IMG' && target.classList.contains('tut-img-embed')) {
+    openImageModal(target.src, target.alt)
+  }
+}
+
 function toggleExpand() {
   if (typeof document === 'undefined') return
 
@@ -153,11 +169,17 @@ function handleFullscreenChange() {
 }
 
 function handleKeydown(e) {
-  if (e.key === 'Escape' && isExpanded.value) {
-    if (!document.fullscreenElement) {
-      toggleExpand()
+  if (e.key === 'Escape') {
+    if (activeModalImage.value) {
+      closeImageModal()
+      return
+    }
+    if (isExpanded.value) {
+      if (!document.fullscreenElement) {
+        toggleExpand()
+      }
+      return
     }
-    return
   }
 
   // Intercept Space or PageDown for paging if output overflow is active and input is empty or unfocused
@@ -584,7 +606,7 @@ onUnmounted(() => {
 
       <div class="tut-body" :class="{ 'has-sheet': isSheetOpen }">
         <div class="tut-term">
-          <div class="tut-log" ref="logEl" aria-live="polite" aria-atomic="false" @scroll="handleScroll" @load.capture="updatePagerState">
+          <div class="tut-log" ref="logEl" aria-live="polite" aria-atomic="false" @scroll="handleScroll" @load.capture="updatePagerState" @click="handleLogClick">
             <div v-for="(b, i) in log" :key="i" class="tut-block">
               <template v-if="b.kind === 'lesson'">
                 <!-- Chapter Intro Card -->
@@ -716,6 +738,15 @@ onUnmounted(() => {
 
       <div class="tut-sheet-backdrop" v-if="isSheetOpen" @click="isSheetOpen = false"></div>
 
+      <!-- Image Lightbox Modal Overlay -->
+      <div v-if="activeModalImage" class="tut-img-modal-overlay" role="dialog" aria-modal="true" aria-label="Image Preview" @click.self="closeImageModal">
+        <div class="tut-img-modal-card">
+          <button type="button" class="tut-img-modal-close" @click="closeImageModal" aria-label="Close image preview">&times;</button>
+          <img :src="activeModalImage.src" :alt="activeModalImage.alt" class="tut-img-modal-preview" />
+          <div v-if="activeModalImage.alt" class="tut-img-modal-caption">{{ activeModalImage.alt }}</div>
+        </div>
+      </div>
+
       <!-- Modal Overlay for End of Tutorial Options -->
       <div v-if="isModalOpen" class="tut-modal-overlay" role="dialog" aria-modal="true" aria-labelledby="tut-modal-title-id" @click.self="closeModal">
         <div class="tut-modal-card">
@@ -1030,6 +1061,84 @@ onUnmounted(() => {
   margin: 8px 0;
   display: block;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+  cursor: zoom-in;
+  transition: transform 0.2s, border-color 0.2s;
+}
+.tut-img-embed:hover {
+  transform: scale(1.02);
+  border-color: gold;
+}
+
+/* Image Lightbox Modal */
+.tut-img-modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.88);
+  backdrop-filter: blur(6px);
+  z-index: 100001;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+  animation: tutStreamIn 0.2s ease-out forwards;
+}
+
+.tut-img-modal-card {
+  position: relative;
+  max-width: 90vw;
+  max-height: 90vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background: #0b0c0f;
+  border: 1px solid rgba(215, 166, 63, 0.5);
+  border-radius: 12px;
+  padding: 16px;
+  box-shadow: 0 25px 70px rgba(0,0,0,0.9), 0 0 30px rgba(215, 166, 63, 0.2);
+}
+
+.tut-img-modal-close {
+  position: absolute;
+  top: -14px;
+  right: -14px;
+  width: 36px;
+  height: 36px;
+  background: #18191f;
+  border: 1px solid rgba(215, 166, 63, 0.6);
+  color: #f4dd94;
+  font-size: 24px;
+  border-radius: 50%;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
+  transition: background 0.2s, color 0.2s, transform 0.15s;
+}
+.tut-img-modal-close:hover {
+  background: darkgoldenrod;
+  color: #ffffff;
+  transform: scale(1.1);
+}
+
+.tut-img-modal-preview {
+  max-width: 85vw;
+  max-height: 80vh;
+  object-fit: contain;
+  border-radius: 6px;
+  border: 1px solid rgba(215, 166, 63, 0.3);
+}
+
+.tut-img-modal-caption {
+  margin-top: 10px;
+  color: #d8b04a;
+  font-size: 13.5px;
+  font-family: 'Kelt', serif;
+  text-align: center;
 }
 
 .tut-complete-box {

From 1d9ec5ca953bbd803c9b3786368fe22521280c98 Mon Sep 17 00:00:00 2001
From: nschimme <5505185+nschimme@users.noreply.github.com>
Date: Sun, 20 Sep 2026 23:21:27 +0000
Subject: [PATCH 13/13] fix(tutorial): clear inputs on step rewind, add
 terminal pager, and relative image modal preview

---
 .../theme/components/TutorialPlayer.vue       | 26 ++++++++++++++-----
 1 file changed, 19 insertions(+), 7 deletions(-)

diff --git a/docs/.vitepress/theme/components/TutorialPlayer.vue b/docs/.vitepress/theme/components/TutorialPlayer.vue
index 06a0602..ad61078 100644
--- a/docs/.vitepress/theme/components/TutorialPlayer.vue
+++ b/docs/.vitepress/theme/components/TutorialPlayer.vue
@@ -28,12 +28,15 @@ function formatInlineMarkdown(text) {
     const cleanAlt = alt.replace(/"/g, '&quot;')
     let cleanSrc = src.trim().replace(/"/g, '&quot;')
 
-    if (cleanSrc.includes('assets/')) {
-      cleanSrc = '/assets/' + cleanSrc.split('assets/')[1]
-    }
+    // Only rewrite relative public/assets paths, preserving http://, https://, and data: URLs
+    if (!/^(?:https?:\/\/|data:)/i.test(cleanSrc)) {
+      if (cleanSrc.includes('assets/')) {
+        cleanSrc = '/assets/' + cleanSrc.split('assets/')[1]
+      }
 
-    if (cleanSrc.startsWith('/')) {
-      cleanSrc = withBase(cleanSrc)
+      if (cleanSrc.startsWith('/')) {
+        cleanSrc = withBase(cleanSrc)
+      }
     }
 
     return `<img src="${cleanSrc}" alt="${cleanAlt}" class="tut-img-embed" onload="this.dispatchEvent(new Event('load', { bubbles: true }))" />`
@@ -185,7 +188,7 @@ function handleKeydown(e) {
   // Intercept Space or PageDown for paging if output overflow is active and input is empty or unfocused
   if (isScrollOverflowActive.value && !isScrolling.value) {
     const isInputFocused = document.activeElement === inputEl.value
-    if (e.key === 'PageDown' || (e.key === ' ' && (!isInputFocused || !entry.value.trim()))) {
+    if ((e.key === 'PageDown' || e.key === ' ') && (!isInputFocused || !entry.value.trim())) {
       e.preventDefault()
       pageForward()
     }
@@ -317,6 +320,7 @@ function goToStep(targetIdx) {
 
   subStepIdx.value = targetIdx
   finished.value = false
+  entry.value = ''
 
   const newLog = []
   const firstSub = stepsList.value[0] || null
@@ -335,7 +339,15 @@ function goToStep(targetIdx) {
     if (step) {
       if (step.ask) {
         newLog.push({ kind: 'echo', text: step.ask })
-        const rawRes = step.response || step.example || mumeResponses.value[step.ask.toLowerCase()] || ''
+        let rawRes = step.response || step.example || mumeResponses.value[step.ask.toLowerCase()] || ''
+        if (!rawRes && step.accept && step.accept.length) {
+          for (const alias of step.accept) {
+            if (mumeResponses.value[alias.toLowerCase()]) {
+              rawRes = mumeResponses.value[alias.toLowerCase()]
+              break
+            }
+          }
+        }
         const body = rawRes ? rawRes.replace(/^>[^\n]*\n?/, '') : ''
         if (body) {
           newLog.push({ kind: 'example', body })