From 7655f31b1c99383d50224fb16066a7f28dc363da Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sat, 21 Mar 2026 02:53:35 +0000
Subject: [PATCH] Fix root cause: extra </div> closed #app before API key panel

The Advanced Settings panel (containing the OpenRouter API key input)
was outside the Vue app scope due to an extra </div> on line 122 that
prematurely closed the #app div. This meant:
- The API key input's Vue bindings (:value, @input) were inert
- The Save Key button's @click="saveApiKey" never fired
- The key never reached localStorage or Vue data
- Translation/PromptCraft always saw an empty key

Fix: Remove the duplicate closing </div> (labeled "End of .tabs div"
but .tabs already closed earlier at line 77). Also switch API key input
from manual :value/@input to v-model for reliable two-way binding.

https://claude.ai/code/session_01DjqbQB8WcZoGVe78sjvh72
---
 index.template.html | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/index.template.html b/index.template.html
index 1f532ce..4ca948d 100644
--- a/index.template.html
+++ b/index.template.html
@@ -119,9 +119,7 @@
                     </div>
                 </div>
             </div>
-        </div>
-        <!-- End of .tabs div -->
-        
+
         <!-- Advanced Settings Panel (inside app so Vue bindings work) -->
         <div id="unicode-options-panel" class="unicode-options-panel">
             <div class="unicode-panel-header">
@@ -136,8 +134,7 @@
                     <div class="api-key-input-row">
                         <input
                             :type="showApiKey ? 'text' : 'password'"
-                            :value="openrouterApiKey"
-                            @input="openrouterApiKey = $event.target.value"
+                            v-model="openrouterApiKey"
                             placeholder="sk-or-..."
                             class="api-key-input"
                             autocomplete="off"