From f06b58711b451c737899cd60a129fc110fbb0e1b Mon Sep 17 00:00:00 2001
From: nschimme <5505185+nschimme@users.noreply.github.com>
Date: Mon, 21 Sep 2026 16:37:27 +0000
Subject: [PATCH] fix(tutorial): keep input bar mounted and focused during
 command entry

Prevent the tutorial prompt bar from unmounting <input> when output
overflows, ensuring continuous keyboard focus when entering commands
like `look` and `exits`. Display a non-blocking floating overlay toast
when content overflows.
---
 .../theme/components/TutorialPlayer.vue       | 33 +++++++++----------
 tests/tutorial_player.test.ts                 | 13 ++++++--
 2 files changed, 25 insertions(+), 21 deletions(-)

diff --git a/docs/.vitepress/theme/components/TutorialPlayer.vue b/docs/.vitepress/theme/components/TutorialPlayer.vue
index 3eb7f46..3a6755f 100644
--- a/docs/.vitepress/theme/components/TutorialPlayer.vue
+++ b/docs/.vitepress/theme/components/TutorialPlayer.vue
@@ -789,23 +789,10 @@ onUnmounted(() => {
 
           <div class="tut-prompt"
                :class="{
-                 'is-pager': isScrollOverflowActive && !isScrolling && !entry,
                  'is-complete': playerState === PlayerState.CHAPTER_COMPLETE
                }">
-            <!-- Mode 1: Paging State (Replaces input box with interactive pill button) -->
-            <button v-if="isScrollOverflowActive && !isScrolling && !entry"
-                    type="button"
-                    class="tut-full-pager-btn"
-                    @click.prevent="pageForward(true)"
-                    @keydown.enter.prevent="pageForward(true)"
-                    @keydown.space.prevent="pageForward(true)"
-                    aria-label="Scroll to read more output">
-              <i class="fa fa-chevron-circle-down tut-toast-icon" aria-hidden="true"></i>
-              <span>{{ toastText }}</span>
-            </button>
-
-            <!-- Mode 2: Chapter Completion State (Replaces input box with full-width completion pill button) -->
-            <button v-else-if="playerState === PlayerState.CHAPTER_COMPLETE"
+            <!-- Mode 1: Chapter Completion State (Replaces input box with full-width completion pill button) -->
+            <button v-if="playerState === PlayerState.CHAPTER_COMPLETE"
                     type="button"
                     class="tut-full-complete-btn"
                     @click.stop="submit()"
@@ -816,8 +803,19 @@ onUnmounted(() => {
               <i class="fa fa-arrow-right tut-complete-icon" aria-hidden="true"></i>
             </button>
 
-            <!-- Mode 3: Normal Command Input Bar -->
+            <!-- Mode 2: Normal Command Input Bar with Non-Blocking Floating Overflow Toast -->
             <template v-else>
+              <Transition name="tut-toast-fade">
+                <button v-if="isScrollOverflowActive && !isScrolling"
+                        type="button"
+                        class="tut-pager-toast"
+                        @click.prevent="pageForward(true)"
+                        aria-label="Scroll to read more output">
+                  <i class="fa fa-chevron-circle-down tut-toast-icon" aria-hidden="true"></i>
+                  <span>{{ toastText }}</span>
+                </button>
+              </Transition>
+
               <span class="tut-caret">&gt;</span>
               <input ref="inputEl" v-model="entry" @keydown.enter.prevent="submit"
                      autocomplete="off" spellcheck="false"
@@ -1377,8 +1375,7 @@ 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-prompt { display: flex; align-items: center; gap: 8px; border-top: 1px solid #23262e; padding: 10px 14px; background: #08080a; transition: background 0.25s, border-color 0.25s; }
-.tut-prompt.is-pager { background: linear-gradient(180deg, #1a160a, #0b0c0f); border-top-color: rgba(255, 215, 0, 0.6); padding: 8px 12px; }
+.tut-prompt { display: flex; align-items: center; gap: 8px; border-top: 1px solid #23262e; padding: 10px 14px; background: #08080a; transition: background 0.25s, border-color 0.25s; position: relative; }
 
 /* Full-width Pager Action Pill Button */
 .tut-full-pager-btn {
diff --git a/tests/tutorial_player.test.ts b/tests/tutorial_player.test.ts
index 59ab8fd..53a9dc4 100644
--- a/tests/tutorial_player.test.ts
+++ b/tests/tutorial_player.test.ts
@@ -74,11 +74,18 @@ describe('TutorialPlayer.vue', () => {
     expect(backBtn.exists()).toBe(true)
   })
 
-  it('sets input readonly when pager mode is active', async () => {
+  it('keeps input element mounted and accessible during quest steps', async () => {
     const wrapper = mount(TutorialPlayer)
-    // Initially not readonly when input is empty and no overflow
     const input = wrapper.find('input')
-    expect(input.attributes('readonly')).toBeUndefined()
+    expect(input.exists()).toBe(true)
+
+    // Submit first command
+    await input.setValue('score')
+    await input.trigger('keydown.enter')
+
+    // Verify input remains mounted and accessible for subsequent commands (e.g. info or exits)
+    const inputAfter = wrapper.find('input')
+    expect(inputAfter.exists()).toBe(true)
   })
 
   it('provides helpful error text for unrecognized commands', async () => {