From 9e112f5e7c729c9cd5c41952c6fc1ab979ecfe3f Mon Sep 17 00:00:00 2001
From: divadiow <divadiow@hotmail.com>
Date: Mon, 19 Jan 2026 21:55:04 +0000
Subject: [PATCH 01/24] more

---
 vue/gpioDoctor.vue  | 22 +++++------
 vue/myComponent.vue |  4 +-
 vue/tools.vue       | 90 ++++++++++++++++++++++-----------------------
 3 files changed, 58 insertions(+), 58 deletions(-)

diff --git a/vue/gpioDoctor.vue b/vue/gpioDoctor.vue
index 84a85641..28ff4108 100644
--- a/vue/gpioDoctor.vue
+++ b/vue/gpioDoctor.vue
@@ -2,19 +2,19 @@
   <div class="container">
     <div class="item" style="max-width: 300px;">
       <h4>GPIO Doctor</h4>
-      <p>Here you can quickly detect GPIO roles of an unknown device. Remember to try checking <a href="https://www.youtube.com/watch?v=VDbaLR_0YWs"> our Templates</a> first, maybe there is already template for your device.</p>
+      <p>Use this tool to identify GPIO roles on an unknown device. Before you start, check <a href="https://www.youtube.com/watch?v=VDbaLR_0YWs">Templates</a> first; there may already be a template for your device.</p>
 
-      <h4>Usage warning</h4>
-      <p>This tool will override your current GPIO settings. Use with caution. Backup your current template if needed.</p>
+      <h4>Warning</h4>
+      <p>This tool overrides your current GPIO configuration. Use with caution. Back up your current template first, if needed.</p>
 
-      <h4>How to use - finding outputs</h4>
-      <p>To find relays, LEDs or PWMs, just use 'Set Output High'/Set Output Low' button on each pin and see if relay/LED/Light changes. This works also for PWMs, because 'Relay' role can control PWM, it just toggles it between 100% and 0% duty.</p>
+      <h4>How to use: finding outputs</h4>
+      <p>To find relays, LEDs, or PWM outputs, use the “Set Output High” / “Set Output Low” button for each pin and observe what changes. This can also help with PWM outputs, because the “Relay” role can drive a PWM channel by toggling it between 100% and 0% duty cycle.</p>
  
-      <h4>How to use - finding inputs</h4>
-      <p>To find inputs, including buttons, first click 'Setup input with pull up', which is a most common option, and then press a button for a second and check if state High/Low changes. If it changes, then you've found your button. In some rare cases, you also might want to try no pullup resistor mode (maybe for door sensors, etc?)</p>
+      <h4>How to use: finding inputs</h4>
+      <p>To find inputs (including buttons), first click “Set Input (pull-up)”, which is the most common option. Then press and hold the button briefly and check whether the state changes (High/Low). If it does, you have likely found your button. In rarer cases, you may also want to try “Set Input (no pull-up)” (for example, some door sensors).</p>
  
-      <h4>How to use - final steps</h4>
-      <p>You can easily change pin roles here and they will be saved. Remember to clear up unused Relay/dInput/roles etc manually and keep only the roles you are going to use</p>
+      <h4>How to use: final steps</h4>
+      <p>Changes you make here are saved automatically. Once you have identified the required pins, clear any unused roles and keep only the roles you intend to use.</p>
  
     </div>
     <div class="item" style="max-width: 550px;">
@@ -34,7 +34,7 @@
          </button>
         <button @click="setInput(index,'dInput')">Set Input P-up</button>
         <button @click="setInput(index,'dInput_NoPullUp')">Set Input (no p-up)</button>
-        <button @click="clearPin(index)">Clear)</button>
+        <button @click="clearPin(index)">Clear</button>
         <hr>
       </div>
 
@@ -59,7 +59,7 @@
 
         },
        getPinAlias(index) {
-        // some of pins have special roles
+        // Some pins have special roles
         if (index == 23)
           return "ADC3";
         if (index == 26)
diff --git a/vue/myComponent.vue b/vue/myComponent.vue
index 921f6896..71ada3be 100644
--- a/vue/myComponent.vue
+++ b/vue/myComponent.vue
@@ -43,7 +43,7 @@
       <ota-controller></ota-controller>
     </div>
     <div class="tabcontent" v-if="tab === 'Tools'">
-      <h3>Tools (WORK IN PROGRESS, SOME BUTTONS MAY NOT BE READY)</h3>
+      <h3>Tools</h3>
       <tools-controller></tools-controller>
     </div>
     <div class="tabcontent" v-if="tab === 'Flash'">
@@ -60,7 +60,7 @@
     </div>
 
     <div class="tabcontent" v-if="tab === 'GPIODoctor'">
-      <h3>GPIO Doctor - easily find GPIO roles for your relays, PWMs, and buttons (Work In Progress)</h3>
+      <h3>GPIO Doctor - easily find GPIO roles for your relays, PWMs, and buttons</h3>
       <h6>Please also UPDATE OBK to latest version to get best experience, otherwise reading values won't work</h6>
       <gpio-controller></gpio-controller>
     </div>
diff --git a/vue/tools.vue b/vue/tools.vue
index 9526c192..a2e29917 100644
--- a/vue/tools.vue
+++ b/vue/tools.vue
@@ -1,38 +1,38 @@
 <template>
   <div class="container">
     <div class="item">
-      <h4>Command status</h4>
-      <p>Here you can check the last command send to OBK device by our Web App frontent for Tools. </p>
+      <h4>Command Status</h4>
+      <p>Last command shows the most recent command triggered from this page. Last status shows whether the request is still sending, completed successfully (OK 200), or failed (error response).</p>
       <h5>Last command: {{command_text}}</h5>
       <h5>Last status: {{command_status}}</h5>
 
       <h4>Generic Tools</h4>
-      <p>Those are all wrappers for console commands, but they are more friendly for beginners. Please read console <a href="https://github.com/openshwprojects/OpenBK7231T_App/blob/main/docs/commands.md">commands docs</a> if you want to know more. </p>
+      <p>These are wrappers around console commands, presented in a more beginner-friendly way. See the console <a href="https://github.com/openshwprojects/OpenBK7231T_App/blob/main/docs/commands.md">command documentation</a> for details.</p>
       
        <button @click="stopDrivers($event)">Stop all drivers</button><br>
-       <button @click="factorySettings($event)">Return device to factory settings (this will erase everything, even your Wifi config)</button>
-       <button @click="backToOpenAccessPoint($event)">Clear WiFi config and return to AP, but keep settings</button>
-       <button @click="temporaryAPMode($event)">Temporarily convert to AP mode (will go AP now, but back to client with reboot)</button>
+       <button @click="factorySettings($event)">Return device to factory settings (this will erase everything, including your WiFi configuration)</button>
+       <button @click="backToOpenAccessPoint($event)">Clear WiFi configuration and switch to AP mode (keep settings)</button>
+       <button @click="temporaryAPMode($event)">Temporarily switch to AP mode (switches now; returns to client mode after reboot)</button>
        <button @click="forceSafeMode($event)">Force reboot into safe mode</button>
-       <p>Driver testing shortcuts, please REMEMBER, they will not run after reboot, if you want driver to run after reboot, use a startup command/autoexec.bat</p>
+       <p>Driver testing shortcuts. Note: these do not persist across reboots. To start a driver on boot, use a startup command or autoexec.bat.</p>
        <button @click="startDriver('SSDP')">Start SSDP</button>
        <button @click="startDriver('DDP')">Start DDP</button>
        <button @click="startDriver('DGR')">Start DGR</button>
 
       <h4>Test/Play Tools</h4>
-      <p>Some things to play around/to learn events</p>
+      <p>Utilities for testing and learning event behavior.</p>
        <button @click="addRepeatingEvent(7298,'POWER TOGGLE', 2)">Start toggling power every 2 seconds</button><br>
        <button @click="cancelRepeatingEvent(7298)">Stop toggling power</button><br>
-       <button @click="addRepeatingEvent(9531,'add_dimmer 1 2', 0.01)">Start Dimmer ping-pong animation for LED</button><br>
-       <button @click="cancelRepeatingEvent(9531)">Stop Dimmer ping-pong animation for LED</button><br>
-       <button @click="addRepeatingEvent(8412,'add_temperature 1 2', 0.01)">Start Temperature ping-pong animation for LED</button><br>
-       <button @click="cancelRepeatingEvent(8412)">Stop Temperature ping-pong animation for LED</button><br>
+       <button @click="addRepeatingEvent(9531,'add_dimmer 1 2', 0.01)">Start dimmer ping-pong animation for LED</button><br>
+       <button @click="cancelRepeatingEvent(9531)">Stop dimmer ping-pong animation for LED</button><br>
+       <button @click="addRepeatingEvent(8412,'add_temperature 1 2', 0.01)">Start temperature ping-pong animation for LED</button><br>
+       <button @click="cancelRepeatingEvent(8412)">Stop temperature ping-pong animation for LED</button><br>
 
        
     </div>
     <div class="item">
-      <h4>LED tools</h4> 
-      <p>Here are some misc buttons for testing LEDs. </p>
+      <h4>LED Tools</h4>
+      <p>Miscellaneous buttons for testing LEDs.</p>
        <button @click="justSetRed($event)">100% Red</button>
        <button @click="justSetGreen($event)">100% Green</button>
        <button @click="justSetBlue($event)">100% Blue</button><br>
@@ -40,50 +40,50 @@
        <button @click="justSetCool($event)">100% Cool</button>
        <button @click="toggleLED($event)">Toggle LED</button><br>
 
-      <h4>LED driver tools</h4>      
-      <p>Those will show up when you enable a 'I2C' LED driver and set correct pin. You also might need to reboot. </p>
-      <p>Here you can easily change the order of LED colours. The order of colours in SM2135/etc drivers is not standarized, so if you have wrong colours, for example, cool warm is swapped with red, you might need to reorder them here. Enter numbers 0, 1, 2, 3 and 4, each one only once. </p>
+      <h4>LED Driver Tools</h4>
+      <p>These options appear when you enable an I2C LED driver and configure the correct pins. You may also need to reboot.</p>
+      <p>Use this to change the channel order for LED drivers (for example, SM2135). Some drivers are not standardized, so colors may be mapped incorrectly (for example, warm/cool swapped with red). Enter the channel indices 0-4, using each value once.</p>
       <label for="R" style="width:75px; display: inline-block;">Red:</label>&nbsp;<input id="R" v-model="R" placeholder="R"/>
       <label for="G" style="width:75px; display: inline-block;">Green:</label>&nbsp;<input id="G" v-model="G" placeholder="G"/>
       <label for="B" style="width:75px; display: inline-block;">Blue:</label>&nbsp;<input id="B" v-model="B" placeholder="B"/>
       <label for="C" style="width:75px; display: inline-block;">Cool:</label>&nbsp;<input id="C" v-model="C" placeholder="C"/>
       <label for="W" style="width:75px; display: inline-block;">Warm:</label>&nbsp;<input id="W" v-model="W" placeholder="W"/>
-       <button @click="applyMapAndSetRed($event)">Apply and turn light to Red</button><br>
-       <button @click="applyMapAndSetGreen($event)">Apply and turn light to Green</button><br>
-       <button @click="applyMapAndSetBlue($event)">Apply and turn light to Blue</button><br>
-       <button @click="applyMapAndSetWarm($event)">Apply and turn light to Warm</button><br>
-       <button @click="applyMapAndSetCool($event)">Apply and turn light to Cool</button><br><br>
-      <p>LED remap will be automatically saved in flash.</p>
+       <button @click="applyMapAndSetRed($event)">Apply mapping and set light to Red</button><br>
+       <button @click="applyMapAndSetGreen($event)">Apply mapping and set light to Green</button><br>
+       <button @click="applyMapAndSetBlue($event)">Apply mapping and set light to Blue</button><br>
+       <button @click="applyMapAndSetWarm($event)">Apply mapping and set light to Warm</button><br>
+       <button @click="applyMapAndSetCool($event)">Apply mapping and set light to Cool</button><br><br>
+      <p>The LED remap is saved to flash automatically.</p>
     </div>
     <div class="item">
       <h4>Power Metering</h4>
-      <p>Those are useful if you have a device running BL0937, BL0942, CSE or a similiar driver. </p>
-      <h5>Calibration utility</h5>
-      <p>Here you can calibrate your device. It's the same as using 'VoltageSet', etc commands, just with GUI. </p>
-      <p>Please connect 60W bulb (or another resistive load with power factor equal to 1), measure the real voltage with multimeter, enter in field and save: </p>
-      <label for="Voltage" style="width:75px; display: inline-block;">Voltage:</label>&nbsp;<input id="Voltage" v-model="Voltage" placeholder="Startup command"/>
-      <button @click="applyVoltage($event)">Apply!</button>
-      <p>Now do the same for current, enter measured current in A:</p>
-      <label for="Current" style="width:75px; display: inline-block;">Current:</label>&nbsp;<input id="Current" v-model="Current" placeholder="Startup command"/>
-      <button @click="applyCurrent($event)">Apply!</button>
-      <p>Now do the same for power, enter measured power in W:</p>
-      <label for="Power" style="width:75px; display: inline-block;">Power:</label>&nbsp;<input id="Power" v-model="Power" placeholder="Startup command"/>
-      <button @click="applyPower($event)">Apply!</button>
-      <p>Calibration will be automatically saved in flash.</p>
+      <p>These are useful if your device uses BL0937, BL0942, CSE, or a similar driver.</p>
+      <h5>Calibration Utility</h5>
+      <p>Here you can calibrate your device. It is equivalent to using the VoltageSet/CurrentSet/PowerSet commands, but with a GUI.</p>
+      <p>Connect a 60W bulb (or another resistive load with a power factor of 1), measure the mains voltage with a multimeter, enter it in the field below, and save:</p>
+      <label for="Voltage" style="width:75px; display: inline-block;">Voltage:</label>&nbsp;<input id="Voltage" v-model="Voltage" placeholder="Measured voltage (V)"/>
+      <button @click="applyVoltage($event)">Apply</button>
+      <p>Repeat for current: enter the measured current (A):</p>
+      <label for="Current" style="width:75px; display: inline-block;">Current:</label>&nbsp;<input id="Current" v-model="Current" placeholder="Measured current (A)"/>
+      <button @click="applyCurrent($event)">Apply</button>
+      <p>Repeat for power: enter the measured power (W):</p>
+      <label for="Power" style="width:75px; display: inline-block;">Power:</label>&nbsp;<input id="Power" v-model="Power" placeholder="Measured power (W)"/>
+      <button @click="applyPower($event)">Apply</button>
+      <p>Calibration is saved to flash automatically.</p>
       
-      <h5>Extra utilities for power metering.</h5>
-      <p>BL0937/42/ETC devices can measure current, power and voltage. They can also count and save energy consumption, but it requires a little setup. Don't forget to enable NTP in short startup command/autoexec! </p>
+      <h5>Extra Utilities for Power Metering</h5>
+      <p>BL0937/BL0942/etc. devices can measure current, power, and voltage. They can also track and persist energy consumption, but this requires some setup. Do not forget to enable NTP in the short startup command or autoexec.bat.</p>
       <button @click="resetEnergyCounters($event)">Reset the 'total' energy counter</button><br>
       <button @click="setupEnergyCounters($event)">Enable and setup some basic energy counting</button><br>
       <button @click="stopEnergyCounters($event)">Disable basic energy counting</button><br>
 
     </div>
     <div class="item">
-      <h4>Tasmota Device Groups</h4> 
-      <p>Here you can play around Tasmota Device Groups, test sending of packets, etc. </p>
-      <h5>External DGR control</h5>
-      <p>Here you can control any outside Tasmota DGR group, even if your device is not in DGR. Of course, DGR driver must be run first.</p>
-      <label for="ExternalGroupName" style="width:75px; display: inline-block;">Target:</label>&nbsp;<input id="ExternalGroupName" v-model="ExternalGroupName" placeholder="ExternalGroupName"/>
+      <h4>Tasmota Device Groups</h4>
+      <p>Here you can experiment with Tasmota Device Groups (DGR) and test packet sending.</p>
+      <h5>External DGR Control</h5>
+      <p>Here you can control any external Tasmota DGR group, even if your device is not part of a DGR. The DGR driver must be running first.</p>
+      <label for="ExternalGroupName" style="width:75px; display: inline-block;">Target:</label>&nbsp;<input id="ExternalGroupName" v-model="ExternalGroupName" placeholder="Group name"/>
       <br><button @click="sendDGRPower(1,1)">Send power ON</button>
       <button @click="sendDGRPower(0,1)">Send power OFF</button>
       <button @click="sendDGRBrightness(25)">Send brightness 10%</button>
@@ -213,7 +213,7 @@
               this.runCommand("stopDriver *");
         },
         factorySettings(ev){			
-              let rep = prompt("Are you sure? This will ERASE ALL YOUR SETTINGS. Enter yes.", "no");
+              let rep = prompt("Are you sure? This will erase all settings. Type yes to confirm.", "no");
 			  if (rep != null) {
                 if(rep == "yes")
                 {
@@ -222,7 +222,7 @@
 			  }
         },
         backToOpenAccessPoint(ev){			
-              let rep = prompt("Are you sure? This will return device to AP, andd everyone will be able to connect to it. Enter yes.", "no");
+              let rep = prompt("Are you sure? This will clear the WiFi credentials and restart the device in AP mode. Anyone nearby will be able to connect. Type yes to confirm.", "no");
 			  if (rep != null) {
                 if(rep == "yes")
                 {

From 73a278834e4c6996c6cca18d8cfa2d7c21436d88 Mon Sep 17 00:00:00 2001
From: divadiow <divadiow@hotmail.com>
Date: Mon, 19 Jan 2026 22:29:04 +0000
Subject: [PATCH 02/24] Update filesystem.vue

---
 vue/filesystem.vue | 98 +++++++++++++++++++++++-----------------------
 1 file changed, 50 insertions(+), 48 deletions(-)

diff --git a/vue/filesystem.vue b/vue/filesystem.vue
index 8a57bbb1..26e56737 100644
--- a/vue/filesystem.vue
+++ b/vue/filesystem.vue
@@ -1,36 +1,38 @@
 <template>
     <div class="fill">
-        <p>"List Filesystem" will display all files on LittleFS. 
-        After listing the files, you can click on file name to begin editing text.
-        "Create File" allows you to create a new file on Device (like autoexec.bat).
-        You can also add files by drag &amp; dropping it.
-        "Reset scripts" will stop all script threads running (if you have started any) without stopping the device.
-        When editing a file, use "Save, Reset (...), and run" file to test new scripts, it will restart scripting every time with a clear state.
-        </p>
-		<p>You can access LittleFS HTML files by the following url: DEVICE_IP/api/lfs/FILENAME, for example: http://192.168.0.213/api/lfs/cfg.html . See <a href="https://www.elektroda.com/rtvforum/topic3971355.html">OBK/TASMOTA rest tutorial</a> for details</p>
+        <p>This tab lets you browse and manage files stored on LittleFS:</p>
+        <ul>
+            <li><strong>List filesystem</strong> shows all files and folders on the device.</li>
+            <li>Click a filename to open it in the editor.</li>
+            <li><strong>Create file</strong> creates a new file on the device (for example, <code>autoexec.bat</code>).</li>
+            <li>You can also upload files by dragging and dropping them onto the drop area.</li>
+            <li><strong>Reset scripts</strong> stops all running script threads without rebooting the device.</li>
+            <li>Use <strong>Save, reset SVM, and run</strong> to test changes with a clean scripting state.</li>
+        </ul>
+        <p>You can access LittleFS files via <code>http://&lt;device-ip&gt;/api/lfs/&lt;filename&gt;</code>. For details, see the <a href="https://www.elektroda.com/rtvforum/topic3971355.html">OpenBeken/Tasmota REST tutorial</a>.</p>
         <div class="top">
-            <button @click="backup(null, $event)">Read fsblock</button>
-            <button @click="restore(null, $event)">Restore fsblock</button>
-            <button @click="read(null, $event)">List Filesystem</button>
-            <button @click="create(null, $event)">Create File</button>
-            <button @click="upload(null, $event, false)">Upload file</button>
-            <button @click="upload(null, $event, true)">Upload as gzip</button>
+            <button @click="backup(null, $event)">Read FS block</button>
+            <button @click="restore(null, $event)">Restore FS block</button>
+            <button @click="read(null, $event)">List filesystem</button>
+            <button @click="create(null, $event)">Create file</button>
+            <button @click="upload(null, $event, false)">Upload file(s)</button>
+            <button @click="upload(null, $event, true)">Upload as gzip (.gz)</button>
             <button @click="showUrlModal = true">Fetch from URLs</button>
             <button @click="resetSVM(null, $event)">Reset scripts</button>
             <br/>
-            <button @click="getTar(null, $event)">Download FS Backup in Tar Archive</button>
+            <button @click="getTar(null, $event)">Download filesystem backup (tar)</button>
 
         </div>
         <div class="bottom">
 <div v-if="showUrlModal" style="position:fixed; top:20%; left:30%; width:40%; background:white; border:1px solid black; padding:1em; z-index:1000;">
   <h3>Enter URLs (one per line)</h3>
-  This will download files from given URLs and save them to LFS.
+  The web app will download each URL and save the file to LittleFS.
   <br>
   <textarea v-model="urlInput" rows="10" style="width:100%"></textarea>
   <br>
-  <label><input type="checkbox" v-model="urlGzip"> Compress with GZIP</label>
+  <label><input type="checkbox" v-model="urlGzip"> Compress using gzip (.gz)</label>
   <br><br>
-  <button @click="fetchFromUrls">OK</button>
+  <button @click="fetchFromUrls">Fetch</button>
   <button @click="showUrlModal = false">Cancel</button>
 </div>
             <div class="left">
@@ -53,13 +55,13 @@
                 </div>
             </div>
             <div class="right">
-                <h2 id="fileEditorLabel">File editor. Select file to begin.</h2>
+                <h2 id="fileEditorLabel">File editor: select a file to begin.</h2>
                 <div id="fileEditorBody" style="display:none">
                     <button @click="save(null, $event)">Save</button>
-                    <button @click="save(startScript_simple)">Save, Run file as script thread</button>
-                    <button @click="save(startScript_firstReset)">Save, Reset SVM and run file as script thread</button>         
+                    <button @click="save(startScript_simple)">Save and run as script thread</button>
+                    <button @click="save(startScript_firstReset)">Save, reset SVM, and run as script thread</button>         
                     <button @click="deleteFile(null, $event)">Delete</button>
-                    <button @click="openInBrowser(null, $event)">Open in Browser</button>
+                    <button @click="openInBrowser(null, $event)">Open in browser</button>
                     <textarea v-model="edittext" rows="40" cols="100" style="height:90%"></textarea>
                 </div>
             </div>
@@ -74,9 +76,9 @@
       return {
         msg: 'world!',
         backupdata: null,
-        status:'nothing going on',
+        status:'Ready.',
         folder:'',
-        otatext:'drop file(s) or .tar here',
+        otatext:'Drop file(s) or a .tar archive here',
         shortName:'',
         mqtttopic:'',
         output: '',
@@ -145,7 +147,7 @@
                         this.savefile(filename, buffer, resolve);
                     });
                 } catch (e) {
-                    this.status += `<br/>Error with ${url}: ${e}`;
+                    this.status += `<br/>Error fetching ${url}: ${e}`;
                 }
             }
             this.read();
@@ -162,7 +164,7 @@
                         reader.onload = (event) => {
                             console.log(event);
                             console.log('file len:'+event.target.result.byteLength);
-                            this.status += '<br/>tar upload '+files[0].filepath;
+                            this.status += '<br/>Uploading tar archive: '+files[0].filepath;
                             this.putTar(event.target.result);
                         };
                         reader.readAsArrayBuffer(files[0]);
@@ -233,10 +235,10 @@
                     reader.onload = (event) => {
                         console.log(event);
                         console.log('file len:'+event.target.result.byteLength);
-                        this.status += '<br/>save '+files[filecount].filepath;
+                        this.status += '<br/>Saving '+files[filecount].filepath;
                         this.savefile(files[filecount].filepath, event.target.result, ()=>{
                             filecount++;
-                            this.status += '.. done';
+                            this.status += ' done.';
                             saveone();
                         });
                         //holder.style.background = 'url(' + event.target.result + ') no-repeat center';
@@ -297,7 +299,7 @@
         },
 
         savefile(name, data, cb){
-            this.status += '<br/>saving file...';
+            this.status += '<br/>Saving file...';
             let url = window.device+'/api/lfs/';
             if (this.folder){
                 url += this.folder;
@@ -311,28 +313,28 @@
                 .then(response => response.text())
                 .then(text => {
                     console.log('received '+text);
-                    this.status += 'save complete...';
+                    this.status += ' done.';
                     if(cb) cb();
                 })
                 .catch(err => console.error(err)); // Never forget the final catch!
         },
 
         backup(cb){
-            this.status += '<br/>starting backup...';
+            this.status += '<br/>Starting backup...';
             let url = window.device+'/api/fsblock';
             fetch(url)
                 .then(response => response.arrayBuffer())
                 .then(buffer => {
                     this.backupdata = buffer; 
                     console.log('received '+buffer.byteLength);
-                    this.status += '..backup done...';
+                    this.status += ' backup complete.';
                     if(cb) cb();
                 })
                 .catch(err => console.error(err)); // Never forget the final catch!
         },
 
         restore(cb){
-            this.status += '<br/>starting restore...';
+            this.status += '<br/>Starting restore...';
             let url = window.device+'/api/fsblock';
             if (this.backupdata){
                 fetch(url, { 
@@ -342,7 +344,7 @@
                     .then(response => response.text())
                     .then(text => {
                         console.log('received '+text);
-                        this.status += 'Restore complete...';
+                        this.status += ' restore complete.';
                         if(cb) cb();
                     })
                     .catch(err => console.error(err)); // Never forget the final catch!
@@ -355,7 +357,7 @@
                 .then(response => response.json())
                 .then(folder => {
                     console.log('folder '+url,folder);
-                    this.status += 'Read '+url;
+                    this.status += '<br/>Reading '+url;
                     if (!folder.content) return;
                     for (let i = 0;i < folder.content.length; i++){
                         if (folder.content[i].name.startsWith('.')){
@@ -391,19 +393,19 @@
 
 
         create(cb) {
-            let fname = prompt("Please enter new file name:", "autoexec.bat");
+            let fname = prompt("Enter a new filename:", "autoexec.bat");
             if(fname == null)
             {
                  alert("Canceled.");
             }
             else if(fname.length < 1)
             {
-                 alert("Empty name.");
+                 alert("Filename cannot be empty.");
             }
             else
             {
                  //alert("TODO "+fname);
-                 alert("Will try to create " +fname);
+                 alert("Creating " + fname + "...");
                  this.savefile(fname,"", ()=>{
                      this.read();
                  });
@@ -417,7 +419,7 @@
                 .then(text => {
                     this.edittext = text;
                     this.editname = name;
-                    document.getElementById("fileEditorLabel").innerHTML = "Editing "+name;
+                    document.getElementById("fileEditorLabel").innerHTML = "Editing: "+name;
                     document.getElementById("fileEditorBody").style.display = "block";
                 });
         },
@@ -427,27 +429,27 @@
         deleteFile(cb) {   
             let readCallback = this.read;
             if (this.editname) {
-                let r = confirm("Do you really want to remove the file " + this.editname + "?");
+                let r = confirm("Do you want to delete the file " + this.editname + "?");
                 if (r == false) {
-                    alert("Ok, then not.");
+                    alert("Delete canceled.");
                     return;
                 }
                 let url = window.device + '/api/del' + this.editname;
-                alert("Will try to remove - url is " + url);
+                alert("Deleting file...");
                 fetch(url)
                     .then(response => response.arrayBuffer())
                     .then(buffer => {
-                        this.status += '..delete done...';
+                        this.status += '<br/>Delete complete.';
                         if (cb) cb();
                         readCallback();
                     })
                     .catch(error => {
-                        this.status += `..delete failed: ${error}`;
+                        this.status += `<br/>Delete failed: ${error}`;
                         readCallback();
                         alert("Error deleting file: " + error);
                     });
             } else {
-                alert("Please begin editing some file first. Just click the name on list to edit.");
+                alert("Select a file from the list to edit first.");
             }
         },
 
@@ -458,7 +460,7 @@
                 // open URL in new window
                 window.open(url, '_blank');
             } else {
-                alert("Please begin editing some file first. Just click the name on list to edit.");
+                alert("Select a file from the list to edit first.");
             }
         },
         save(cb) {
@@ -474,7 +476,7 @@
                          readCallback();
                     });
             } else {
-                alert("Please begin editing some file first. Just click the name on list to edit.");
+                alert("Select a file from the list to edit first.");
             }
         },
         resetSVM() {
@@ -516,7 +518,7 @@
                          
                     });
             } else {
-                alert("Please begin editing some file first. Just click the name on list to edit.");
+                alert("Select a file from the list to edit first.");
             }
         },
 

From 626a059eba0901208d4b9c392b8185337a69f67b Mon Sep 17 00:00:00 2001
From: divadiow <divadiow@hotmail.com>
Date: Mon, 19 Jan 2026 22:29:13 +0000
Subject: [PATCH 03/24] Update gpioDoctor.vue

---
 vue/gpioDoctor.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/vue/gpioDoctor.vue b/vue/gpioDoctor.vue
index 28ff4108..3212bd1e 100644
--- a/vue/gpioDoctor.vue
+++ b/vue/gpioDoctor.vue
@@ -33,7 +33,7 @@
          {{ pins.states[index] ? 'Set Output Low' : 'Set Output High' }}
          </button>
         <button @click="setInput(index,'dInput')">Set Input P-up</button>
-        <button @click="setInput(index,'dInput_NoPullUp')">Set Input (no p-up)</button>
+        <button @click="setInput(index,'dInput_NoPullUp')">Set Input (no P-up)</button>
         <button @click="clearPin(index)">Clear</button>
         <hr>
       </div>

From 36b9645e1944e21e142fe2b3cad0ddc52ed23e81 Mon Sep 17 00:00:00 2001
From: divadiow <divadiow@hotmail.com>
Date: Mon, 19 Jan 2026 23:00:09 +0000
Subject: [PATCH 04/24] add real IP to filesystem tab

---
 vue/filesystem.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/vue/filesystem.vue b/vue/filesystem.vue
index 26e56737..c938491d 100644
--- a/vue/filesystem.vue
+++ b/vue/filesystem.vue
@@ -9,7 +9,7 @@
             <li><strong>Reset scripts</strong> stops all running script threads without rebooting the device.</li>
             <li>Use <strong>Save, reset SVM, and run</strong> to test changes with a clean scripting state.</li>
         </ul>
-        <p>You can access LittleFS files via <code>http://&lt;device-ip&gt;/api/lfs/&lt;filename&gt;</code>. For details, see the <a href="https://www.elektroda.com/rtvforum/topic3971355.html">OpenBeken/Tasmota REST tutorial</a>.</p>
+        <p>You can access LittleFS files via <code>{{ deviceBase }}/api/lfs/&lt;filename&gt;</code>. For details, see the <a href="https://www.elektroda.com/rtvforum/topic3971355.html">OpenBeken/Tasmota REST tutorial</a>.</p>
         <div class="top">
             <button @click="backup(null, $event)">Read FS block</button>
             <button @click="restore(null, $event)">Restore FS block</button>
@@ -81,6 +81,7 @@
         otatext:'Drop file(s) or a .tar archive here',
         shortName:'',
         mqtttopic:'',
+        deviceBase: '',
         output: '',
         showUrlModal: false,
         urlInput: '',
@@ -1001,6 +1002,9 @@
     mounted (){
         this.msg = 'fred';
 
+        this.deviceBase = (window.device || '').toString().replace(/\/+$/, '');
+        if (!this.deviceBase) this.deviceBase = 'http://<device-ip>';
+
         // construct tarball class
         this.tar = this.tarball();
 

From 3ebb4199a111279da51ed93334e6de0ea77c4b3d Mon Sep 17 00:00:00 2001
From: divadiow <divadiow@hotmail.com>
Date: Mon, 19 Jan 2026 23:01:33 +0000
Subject: [PATCH 05/24] gpio dr/finder?

---
 vue/myComponent.vue | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/vue/myComponent.vue b/vue/myComponent.vue
index 71ada3be..03147a0d 100644
--- a/vue/myComponent.vue
+++ b/vue/myComponent.vue
@@ -10,7 +10,7 @@
       <button :class="'tablinks '+Toolsclass" @click="open($event, 'Tools')">Tools</button>
       <button :class="'tablinks '+Importclass" @click="open($event, 'Import')">Import</button>
       <button :class="'tablinks '+Filesystemclass" @click="open($event, 'Filesystem')">Filesystem</button>
-      <button :class="'tablinks '+GPIODoctorclass" @click="open($event, 'GPIODoctor')">GPIO Finder</button> 
+      <button :class="'tablinks '+GPIODoctorclass" @click="open($event, 'GPIODoctor')">GPIO Doctor</button> 
       <button :class="'tablinks '+Aboutclass" @click="open($event, 'About')">About</button>
     </div>
     
@@ -32,10 +32,9 @@
 
     <div class="tabcontent" v-if="tab === 'About'">
       <h3>About</h3>
-      <p><a v-bind:href="nativeurl" target="_blank">Native UI on this device {{nativeurl}}</a></p>
-      <p>A simple web app to go with OpenBekenIOT equipped devices by <a href="https://github.com/btsimonh">btsimonh</a></p>
-      <p>This app is a pure javascript application written in VueJS as an SFC .vue component, and dynamically loaded from the device via a simple webpage.  The intent here is to be able to provide a rich UI and allow the device UI to remain simple (and small).</p>
-      <p>Currently, it supports displaying logging from the device</p>
+      <p><a v-bind:href="nativeurl" target="_blank">Open the native device UI ({{nativeurl}})</a></p>
+      <p>A simple companion web app for OpenBekenIOT-equipped devices by <a href="https://github.com/btsimonh">btsimonh</a>.</p>
+      <p>This is a lightweight JavaScript web app built with Vue.js as a single-file component (.vue) and loaded directly from the device. The intent is to provide a richer UI while keeping the device UI simple and small.</p>
     </div>
 
     <div class="tabcontent" v-if="tab === 'OTA'">
@@ -60,8 +59,8 @@
     </div>
 
     <div class="tabcontent" v-if="tab === 'GPIODoctor'">
-      <h3>GPIO Doctor - easily find GPIO roles for your relays, PWMs, and buttons</h3>
-      <h6>Please also UPDATE OBK to latest version to get best experience, otherwise reading values won't work</h6>
+      <h3>GPIO Doctor: find GPIO roles for relays, PWM outputs, and buttons</h3>
+      <h6>For best results, update OpenBeken to the latest version. Otherwise, some values may not display correctly.</h6>
       <gpio-controller></gpio-controller>
     </div>
     </div>

From 49efa377be60ceb470946bf2c46805691046404f Mon Sep 17 00:00:00 2001
From: divadiow <divadiow@hotmail.com>
Date: Tue, 20 Jan 2026 06:55:51 +0000
Subject: [PATCH 06/24] logs review

---
 vue/logs.vue | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/vue/logs.vue b/vue/logs.vue
index e5aaa28e..3f74f932 100644
--- a/vue/logs.vue
+++ b/vue/logs.vue
@@ -9,14 +9,14 @@
                 </td>
                 <td>
                     <button class="logging" :class="{paused:paused}"  @click="paused = !paused">{{paused?"Resume":"Pause"}}</button>
-                    <button class="feature" style="width: 100px" @click="clear">Clear History</button>
-                    <button class="feature" style="width: 125px" @click="selectAllFeatures">Select All Features</button>
-                    <button class="feature" style="width: 125px" @click="clearAllFeatures">Clear All Features</button>
+                    <button class="feature" style="width: 100px" @click="clear">Clear log</button>
+                    <button class="feature" style="width: 125px" @click="selectAllFeatures">Select all features</button>
+                    <button class="feature" style="width: 125px" @click="clearAllFeatures">Clear all features</button>
                 </td>
             </tr>
             <tr>
                 <td style="width: 80px">
-                    <label>Log Features:</label>
+                    <label>Log features:</label>
                 </td>
                 <td id="logFeaturesParent">
                     <div class="feature" v-for="(item) in sortedLogFeatureNames" :key="item">
@@ -27,13 +27,13 @@
             </tr>
             <tr>
                 <td style="width: 80px">
-                    <label>Log Level:</label>
+                    <label>Log level:</label>
                 </td>
                 <td>
                     <select v-model="loglevel">
                         <option v-for="(item,index) of loglevelnames" :value="index" :key="index">{{item}}</option>
                     </select>
-                     NOTE: If you are getting 'command unknown', remember that some commands are only added when a driver is started, and some drivers requires device reboot to start.
+                     Note: If you see 'command unknown', remember that some commands are only available after a driver starts. Some drivers require a device reboot to start.
                 </td>
             </tr>
             <tr>

From f6ebdb10d6066921aab1af0045d5367a0d00579f Mon Sep 17 00:00:00 2001
From: divadiow <divadiow@hotmail.com>
Date: Tue, 20 Jan 2026 07:58:24 +0000
Subject: [PATCH 07/24] Update flash.vue

---
 vue/flash.vue | 120 +++++++++++++++++++++++++++-----------------------
 1 file changed, 66 insertions(+), 54 deletions(-)

diff --git a/vue/flash.vue b/vue/flash.vue
index e37a5d98..3bd8bf4e 100644
--- a/vue/flash.vue
+++ b/vue/flash.vue
@@ -1,8 +1,8 @@
 <template>
     <div>
         <div>
-            Here you can read device flash directly. RF config is Beken internal configuration memory and OBK Config is our configuration structure.<br>
-            Here you can also recover your device from "MAC ends with 00 00 00 and is unable to change" bug. Button 'Restore RF config' will restore RF partition for T and N and set a random MAC address, but this also requires rebooting device later.<br>
+            You can read flash regions directly from the device. RF configuration is Beken's RF/WiFi calibration and configuration data, while OBK configuration contains OpenBeken settings.<br>
+            You can also recover devices affected by the "MAC ends with 00 00 00 and is unable to change" issue. The "Restore RF configuration" button recreates the RF partition for BK7231N/BK7231T and generates a random MAC address. Reboot the device afterward.<br>
             
 
             <table class="my-table">
@@ -13,52 +13,55 @@
                 <th>Extra</th>
             </tr>
             <tr>
-                <td> <button @click="rf(null, $event)">Read RF Config</button></td>
-                <td><a :href="rfurl" download="rfdata">Download RF</a></td>
+                <td> <button @click="rf(null, $event)">Read RF configuration</button></td>
+                <td><a :href="rfurl" download="rfdata">Download RF data</a></td>
                 <td>
                 </td>
-                <td><button @click="restore_rf(null, $event)">Restore (Recreate) RF Config (N & T)</button></td>
+                <td><button @click="restore_rf(null, $event)">Restore RF configuration (BK7231N/BK7231T)</button></td>
             </tr>
             <tr>
-                <td>  <button @click="config(null, $event)">Read OBK Config</button></td>
-                <td> <a :href="configurl" download="configdata">Download OBK Config</a></td>
+                <td>  <button @click="config(null, $event)">Read OBK configuration</button></td>
+                <td> <a :href="configurl" download="configdata">Download OBK configuration</a></td>
                 <td>
                 <div>
-                    <label for="cfgFilePicker">Select file with binary CFG header:</label><input id="cfgFilePicker"
+                    <label for="cfgFilePicker">Select a file with a binary CFG header:</label><input id="cfgFilePicker"
                     type="file" @change="cfgFileSelected($event)">
                     <div v-html="cfgStatus" :class="{invalid: invalidCFGSelected}"></div>
-                    <button @click="writeCFG(null, $event)">Start CFG write</button>
+                    <button @click="writeCFG(null, $event)">Write CFG to device</button>
                 </div>
                 </td>
                 <td></td>
             </tr>
-            <tr>
-                <td> <button @click="flashvars(null, $event)">Read Beken FlashVars (unused?)</button></td>
-                <td><a :href="flashvarsurl" download="flashvarsdata">Download Flash Vars</a></td>
+            <tr v-if="isBekenNT">
+                <td> <button @click="flashvars(null, $event)">Read FlashVars (BK7231N/BK7231T only)</button></td>
+                <td><a :href="flashvarsurl" download="flashvarsdata">Download FlashVars</a></td>
                 <td></td>
                 <td></td>
             </tr>
+            <tr v-else-if="chipset !== 'unknown'">
+                <td colspan="4">FlashVars is available only on BK7231N/BK7231T.</td>
+            </tr>
             <tr>
                 <td></td>
-                <td> <button @click="downloadFullDump(null, $event)">Download full 2MB dump</button></td>
+                <td> <button @click="downloadFullDump(null, $event)">Download full 2 MB flash dump</button></td>
                 <td></td>
                 <td></td>
             </tr>
             <tr>
-                <td>  <button @click="readTuyaConfig(null, $event)">Read Tuya GPIO Config</button></td>
-                <td> <button @click="downloadTuyaConfig(null, $event)">Download Tuya GPIO Config</button></td>
+                <td>  <button @click="readTuyaConfig(null, $event)">Read Tuya GPIO configuration</button></td>
+                <td> <button @click="downloadTuyaConfig(null, $event)">Download Tuya GPIO configuration</button></td>
                 <td></td>
                 <td></td>
             </tr>
             <tr>
-                <td>  <button @click="readCustom(null, $event)">Read Custom (prompts for ofs/len)</button></td>
-                <td> <button @click="downloadCustom(null, $event)">Download Custom (prompts for ofs/len)</button></td>
+                <td>  <button @click="readCustom(null, $event)">Read custom region (prompts for offset/length)</button></td>
+                <td> <button @click="downloadCustom(null, $event)">Download custom region (prompts for offset/length)</button></td>
                 <td></td>
                 <td></td>
             </tr>
             </table>
                 <div>
-                    <h4> Current job status</h4>
+                    <h4>Job status</h4>
                     <div v-html="status" :class=""></div>
                 </div>
 
@@ -109,9 +112,14 @@
         invalidOTASelected: false,
         cfgtext:'Drop CFG file here',
         invalidCFGSelected: true,
-        cfgStatus: 'no file selected',
+        cfgStatus: 'No file selected.',
       }
     },
+    computed:{
+        isBekenNT(){
+            return this.chipset === 'BK7231N' || this.chipset === 'BK7231T';
+        },
+    },
     methods:{
         getinfo(){
             let url = window.device+'/api/info';
@@ -123,7 +131,7 @@
                     this.chipset = res.chipset;     //Set chipset to fixed value for testing
                     this.rfurl = window.device+'/api/flash/'+this.getRFAddress();
                     this.configurl = window.device+'/api/flash/'+this.getConfigAddress();
-                    this.flashvarsurl = window.device+'/api/flash/'+this.getFlashVarsAddress();
+                    this.flashvarsurl = this.isBekenNT ? (window.device+'/api/flash/'+this.getFlashVarsAddress()) : '';
                 })
                 .catch(err => {
                     this.error = err.toString();
@@ -133,10 +141,10 @@
         writeCFG(cb){
             if(this.invalidCFGSelected )
             {
-                alert("Sorry, invalid CFG file selected");
+                alert("Invalid CFG file selected.");
                 return;
             }
-            let confirmationForUser = prompt("Are you sure? This will overwrite your OBK config (pins, channels, flags, WiFi data, IP, MQTT, short startup command) Y/N", "N");
+            let confirmationForUser = prompt("Are you sure? This will overwrite your OBK configuration (pins, channels, flags, WiFi, IP, MQTT, short startup command). Type Y to continue.", "N");
             if(confirmationForUser == null)
             {
             }
@@ -154,10 +162,10 @@
          writeCFG_Internal(cb){
             if(this.invalidCFGSelected )
             {
-                alert("Sorry, invalid CFG file selected");
+                alert("Invalid CFG file selected.");
                 return;
             }
-            this.cfgStatus += 'Writing OBK config...';
+            this.cfgStatus += 'Writing OBK configuration...';
             let url = window.device+'/api/flash/'+this.getConfigAddress();
             console.log('Will use URL '+url);
                 fetch(url, { 
@@ -167,7 +175,7 @@
                     .then(response => response.text())
                     .then(text => {
                         console.log('received '+text);
-                        this.cfgStatus = 'Write OBK cfg complete! Now you should reboot...';
+                        this.cfgStatus = 'Write complete. Reboot the device to apply changes.';
                         if(cb) cb();
                     })
                     .catch(err => console.error(err)); // Never forget the final catch!
@@ -205,11 +213,11 @@
 
             if (this.invalidCFGSelected){
                 console.log("this cfg is incorrect");
-                this.cfgStatus = 'Invalid CFG file was ' + operation;
+                this.cfgStatus = 'Invalid CFG file (' + operation + ').';
             }
             else{
                 console.log("this cfg is OK");
-                this.cfgStatus = 'Correct CFG file selected';
+                this.cfgStatus = 'Valid CFG file selected.';
                 this.cfgdata = result;
             }
         },
@@ -285,7 +293,7 @@
         },
         onFullDumpReadyForDownload(){
             this.fullDumpRunning = 0;
-            this.status += `<br>${this.getDumpJobLabel()} ready!</br>`;
+            this.status += `<br/>${this.getDumpJobLabel()} is ready.`;
             this.generateFullDumpDownloadForBrowser();
         },
         downloadFullDumpFragment(){
@@ -310,7 +318,7 @@
                 .then(response => response.arrayBuffer())
                 .then(buffer => {
                     if(buffer.byteLength != this.fullDumpChunkSize) {
-                        this.status += "bad len " + buffer.byteLength + ", retrying...";
+                        this.status += "Unexpected response length (" + buffer.byteLength + "). Retrying...";
                         retryWithDelay();
                         return;
                     }
@@ -328,12 +336,12 @@
                         if(this.fullDumpErrors > 100) {
                             console.error("Fragment error, too many failed attempts, stopping!");
                             console.error(err);
-                            this.status += "error! Too many failed attempts.<br>";
+                            this.status += "Error: too many failed attempts.<br/>";
                             this.fullDumpRunning = 0;
                         } else {
                             console.warn("Fragment error, will retry!");
                             console.warn(err);
-                            this.status += "error, retrying...";
+                            this.status += "Error; retrying...";
                             retryWithDelay();
                         }
                     }); // Never forget the final catch!
@@ -349,7 +357,7 @@
 	        return;
 	    }
 	
-	    this.status += `<br/>reading custom data from offset ${offset.toString(16)} with length ${length}...`;
+	    this.status += `<br/>Reading custom data from offset 0x${offset.toString(16)} with length ${length}...`;
 	    let url = window.device + `/api/flash/${offset.toString(16)}-${length.toString(16)}`;
 	    console.log('Will use URL ' + url);
 	
@@ -358,7 +366,7 @@
 	        .then(buffer => {
 	            this.configdata = buffer;
 	            console.log('received ' + buffer.byteLength);
-	            this.status += '..got custom data...';
+	            this.status += '..received custom data...';
 	            this.dump(buffer);
 	            if (cb) cb();
 	        })
@@ -376,7 +384,7 @@
 	        return;
 	    }
 	
-	    this.status += `<br/>downloading custom data from offset ${offset.toString(16)} with length ${length}...`;
+	    this.status += `<br/>Downloading custom data from offset 0x${offset.toString(16)} with length ${length}...`;
 	    let url = window.device + `/api/flash/${offset.toString(16)}-${length.toString(16)}`;
 	    console.log('Will use URL ' + url);
 	
@@ -384,17 +392,17 @@
 	        .then(response => response.arrayBuffer())
 	        .then(buffer => {
 	            this.downloadArrayBuffer(buffer, `custom_${offset.toString(16)}-${length}.bin`);
-	            this.status += `<br>custom data ready!</br>`;
+	            this.status += `<br/>Custom data is ready.`;
 	            if (cb) cb();
 	        })
 	        .catch(err => console.error(err)); 
 	},  
         downloadFullDump() {
             if(0){
-                alert("Not functional yet");
+                alert("Not available yet.");
                 return;
             }
-			let rep = prompt("Are you certain? This option is currently slow, may crash OBK on older version so you have to repower it manually, and also may still restart OBK several times on newer builds. It is better to just download only config partition and LittleFS TAR. Futhermore, flashing full 2MB of one device to another device is BAD idea. WiFi calibration is per device! Enter yes.", "no");
+			let rep = prompt("Are you certain? This option is slow and may crash OpenBeken on older builds, requiring a manual power-cycle. It may also reboot several times on newer builds. If you only need settings, prefer downloading the configuration partition and a LittleFS backup (tar). Do not flash a full 2 MB dump from one device to another; RF/WiFi calibration is device-specific. Type yes to continue.", "no");
 			if (rep != null) {
 				  if(rep[0] == "y") {
 				  } else {
@@ -407,13 +415,13 @@
         },
         doFlashDumpInternal() {
             if(this.fullDumpRunning!=0){
-                alert("Flash dump is already requested, wait for processing first.");
+                alert("A flash dump is already in progress. Please wait for it to finish.");
                 return;
             }
             // start with empty data
             this.fullDumpRunning = 1;
             console.log("doFlashDumpInternal started!");
-            this.status += `<br/>downloading ${this.getDumpJobLabel()}...`;
+            this.status += `<br/>Downloading ${this.getDumpJobLabel()}...`;
             this.fullDumpData = new ArrayBuffer();
             this.fullDumpCurAt = this.fullDumpFlashStart;
             this.fullDumpChunkSize = 4096;
@@ -426,13 +434,13 @@
 				return '1e3000-2000';
 			}
             if(this.chipset === "BK7231N") {
-				return '0x1D3000-2000';
+				return '1d3000-2000';
 			}
-            console.log('getConfigAddress is not implemented for '+this.chipset);
-			return '1e1000-1000';
+            console.log('getFlashVarsAddress is not implemented for '+this.chipset);
+			return '0-0';
         },
         rf(cb){
-            this.status += '<br/>reading rf config...';
+            this.status += '<br/>Reading RF configuration...';
             let url = window.device+'/api/flash/'+this.getRFAddress();
             console.log('Will use URL '+url);
             fetch(url)
@@ -440,7 +448,7 @@
                 .then(buffer => {
                     this.rfdata = buffer; 
                     console.log('received '+buffer.byteLength);
-                    this.status += '..got rf config...';
+                    this.status += '..received RF configuration...';
                     this.dump(buffer);
                     if(cb) cb();
                 })
@@ -456,7 +464,7 @@
 		return 0x1D8000;
         },
         readTuyaConfig(cb){
-            this.status += '<br/>reading tuya config...';
+            this.status += '<br/>Reading Tuya GPIO configuration...';
             let url = window.device+'/api/flash/1EE000-1000';
             console.log('Will use URL '+url);
             fetch(url)
@@ -464,7 +472,7 @@
                 .then(buffer => {
                     this.configdata = buffer; 
                     console.log('received '+buffer.byteLength);
-                    this.status += '..got tuya config...';
+                    this.status += '..received Tuya GPIO configuration...';
                     this.dump(buffer);
                     if(cb) cb();
                 })
@@ -475,7 +483,7 @@
             this.startDumpJob("Tuya GPIO config", "TuyaConfig", 0x1EE000, 73728, "TuyaConfig");
         },
         config(cb){
-            this.status += '<br/>reading config...';
+            this.status += '<br/>Reading OBK configuration...';
             let url = window.device+'/api/flash/'+this.getConfigAddress();
             console.log('Will use URL '+url);
             fetch(url)
@@ -483,14 +491,18 @@
                 .then(buffer => {
                     this.configdata = buffer; 
                     console.log('received '+buffer.byteLength);
-                    this.status += '..got  config...';
+                    this.status += '..received OBK configuration...';
                     this.dump(buffer);
                     if(cb) cb();
                 })
                 .catch(err => console.error(err)); // Never forget the final catch!
         },
         flashvars(cb){
-            this.status += '<br/>reading flashvars...';
+            if(!this.isBekenNT){
+                this.status += '<br/>FlashVars is available only on BK7231N/BK7231T.';
+                return;
+            }
+            this.status += '<br/>Reading FlashVars...';
             let url = window.device+'/api/flash/'+this.getFlashVarsAddress();
             console.log('Will use URL '+url);
             fetch(url)
@@ -498,14 +510,14 @@
                 .then(buffer => {
                     this.configdata = buffer; 
                     console.log('received '+buffer.byteLength);
-                    this.status += '..got rf config...';
+                    this.status += '..received FlashVars...';
                     this.dump(buffer);
                     if(cb) cb();
                 })
                 .catch(err => console.error(err)); // Never forget the final catch!
         },
         restore_rf(cb){
-			  let rep = prompt("Are you certain? Use this option only if you already broke your RF partition and your MAC ends with 00 00. Otherwise new RF partition might have worse calibration data so WiFi quality will decrease. Enter yes.", "no");
+			  let rep = prompt("Use this option only if your RF partition is already corrupted (for example, your MAC ends with 00 00). Otherwise, WiFi performance may decrease because the recreated RF partition uses generic calibration data. Type yes to continue.", "no");
 			  if (rep != null) {
 				  if(rep == "yes") {
 					this.restore_rf_internal(cb);
@@ -526,7 +538,7 @@
 			return Math.floor(Math.random() * (max - min + 1)) + min;
 		},
         restore_rf_internal(cb){
-            this.status += '<br/>Restoring RF config...';
+            this.status += '<br/>Restoring RF configuration...';
             console.log('restore rf ');
             let url = window.device+'/api/flash/'+this.getRFAddress();
             console.log('Will use URL '+url);
@@ -578,7 +590,7 @@
                     .then(response => response.text())
                     .then(text => {
                         console.log('received '+text);
-                        this.status += '<br/>RF restored!';
+                        this.status += '<br/>RF configuration restored. Reboot the device.';
                     })
                     .catch(err => console.error(err)); // Never forget the final catch!
             }
@@ -610,7 +622,7 @@
 
         this.rfurl = window.device+'/api/flash/'+this.getRFAddress();
         this.configurl = window.device+'/api/flash/'+this.getConfigAddress();
-        this.flashvarsurl = window.device+'/api/flash/'+this.getFlashVarsAddress();
+        this.flashvarsurl = '';
 
         console.log('mounted ota');
         this.getinfo();

From dadc3153fa57cd93f5154d51f9bbb2600d61ca77 Mon Sep 17 00:00:00 2001
From: divadiow <divadiow@hotmail.com>
Date: Tue, 20 Jan 2026 07:58:27 +0000
Subject: [PATCH 08/24] Update import.vue

---
 vue/import.vue | 94 +++++++++++++++++++++++++++++++++-----------------
 1 file changed, 62 insertions(+), 32 deletions(-)

diff --git a/vue/import.vue b/vue/import.vue
index e95c47ff..b51a0dd5 100644
--- a/vue/import.vue
+++ b/vue/import.vue
@@ -1,16 +1,17 @@
 
 <template>
-  <div class="container">
-    Here you can import configuration from a template. Both OBK templates and Cloudcutter profiles are supported. Importing a profile may ovewrite your current pins/channels/startup command configuration, it will also clear LFS (autoexec.bat). 
-    <div class="container">
-      <div class="item"  style="width: 300px;">
-        <h3>1. Enter template here</h3>
-        <p>Here you can enter an  <a href="https://openbekeniot.github.io/webapp/devicesList.html">OBK template</a>/JSON text from Cloudcutter. <a href="https://github.com/tuya-cloudcutter/tuya-cloudcutter.github.io/tree/master/devices"> Here </a> is a list of cloudcutter devices. Just open one and copy-paste config below.</p>
+  <div class="importPage">
+    <p class="importIntro">You can import configuration from a template. Both OpenBeken templates and Cloudcutter profiles are supported. Applying the import will overwrite your current pin/channel assignments and startup command, and it will clear LittleFS (including <code>autoexec.bat</code>).</p>
+    <div class="importContainer">
+      <div class="importItem"  style="width: 300px;">
+        <h3>1. Paste a template or profile</h3>
+        <p>Paste an <a href="https://openbekeniot.github.io/webapp/devicesList.html">OpenBeken template</a> or Cloudcutter JSON. You can find Cloudcutter device profiles <a href="https://github.com/tuya-cloudcutter/tuya-cloudcutter.github.io/tree/master/devices">here</a>.</p>
         <textarea id="importTemplate" 
-        placeholder="Paste (or drag and drop) OBK template, Tuya JSON or cloudcutter json here" style="vertical-align: top; width: 280px; height:500px" @input="handleImportTemplateChange" v-model="importTemplateText"></textarea>
+        placeholder="Paste (or drag and drop) an OpenBeken template, Tuya JSON, or Cloudcutter JSON here" style="vertical-align: top; width: 280px; height:500px" @input="handleImportTemplateChange" v-model="importTemplateText"></textarea>
        <br/>
                <br>
-       Some examples for developer testing:        <br>
+              <div class="importExamplesTitle">Examples (advanced):</div>
+       <div class="importExamples">
          <button @click="loadDemo('https://raw.githubusercontent.com/tuya-cloudcutter/tuya-cloudcutter.github.io/a8a6539aad21a03d5db41e4d27e9d5516c62fe23/devices/lenovo-se-242dc-rgbct-bulb-v1.2.21.json')">RGBCW LED</button>
          <button @click="loadDemo('https://raw.githubusercontent.com/tuya-cloudcutter/tuya-cloudcutter.github.io/a8a6539aad21a03d5db41e4d27e9d5516c62fe23/devices/nous-p4-e14-rgbct-bulb.json')">BP5758 LED</button>
          <button @click="loadDemo('https://raw.githubusercontent.com/tuya-cloudcutter/tuya-cloudcutter.github.io/b04e860fe0bb1c8bed417ab36c57e6759ec08510/devices/spectrum-woj14415-rgbct-gu10-bulb.json')">SM2135 LED</button>
@@ -19,24 +20,24 @@
           <button @click="loadDemo('https://raw.githubusercontent.com/tuya-cloudcutter/tuya-cloudcutter.github.io/43a341ef1dd8eec8514e1d435563bd9008ff2835/devices/hombli-hbss-0209-smart-socket-b2030248-energy-plug.json')">BL0937 plug</button>
           <button @click="loadDemo('https://raw.githubusercontent.com/tuya-cloudcutter/tuya-cloudcutter.github.io/a8a6539aad21a03d5db41e4d27e9d5516c62fe23/devices/athom-garage-door-opener.json')">Garage switch</button>
           <button @click="loadDemo('https://raw.githubusercontent.com/tuya-cloudcutter/tuya-cloudcutter.github.io/a8a6539aad21a03d5db41e4d27e9d5516c62fe23/devices/aldi-casalux-wifi-led-rgb-light-strip.json')">RGB LED</button>
-    
-      </div>
+       </div>
+</div>
 
-      <div class="item"  style="width: 300px;">
-        <h3>2. Check generated script (modify if you want)</h3>
+      <div class="importItem"  style="width: 300px;">
+        <h3>2. Review the generated script (edit if needed)</h3>
                <br>
         <p id ="generateTextID" v-text="generateText"></p>
-        <textarea id="generatedScriptField" placeholder="Here script will appear" style="vertical-align: top; width: 280px; height:500px"  v-model="generatedScriptText"></textarea>
+        <textarea id="generatedScriptField" placeholder="The generated script will appear here" style="vertical-align: top; width: 280px; height:500px"  v-model="generatedScriptText"></textarea>
        <br>
       </div>
 
-      <div class="item" style="width: 300px;">
-      <h3> 3. Once you are happy with the script, use button below to apply:</h3>
+      <div class="importItem" style="width: 300px;">
+      <h3> 3. Apply the script to the device</h3>
                <br>
-       <button @click="applyScript()">Clear OBK and apply new script from above</button>
+       <button @click="applyScript()">Apply script (clears current configuration)</button>
        <br>
        <br>
-       Script execution log:
+       <div class="importExecTitle">Execution log:</div>
         <p id ="progressTextID" v-text="progressText"> </p>
       </div>
     </div>
@@ -68,25 +69,25 @@
       onSendFailed(response,line) {
         //alert('Send failed!');
         if(response.status == 501 || response.status == 400) {
-           this.progressTextElem.innerHTML += "<span style='color:red;'>FAILED! Invalid command \""+line+"\".</span>";
+           this.progressTextElem.innerHTML += "<span style='color:red;'>Failed: invalid command \""+line+"\".</span>";
         } else {
-           this.progressTextElem.innerHTML += "<span style='color:red;'>FAILED! Please check network and retry.</span>";
+           this.progressTextElem.innerHTML += "<span style='color:red;'>Failed. Check your network connection and try again.</span>";
         }
       },
       async sendLines(lines) {
-        this.progressTextElem.innerHTML = "Send started...";
+        this.progressTextElem.innerHTML = "Sending...";
         let idx = 0;
       for (let line of lines) {
         let dbg = "";
         if(false){
           dbg = " ("+line+")";
         }
-        this.progressTextElem.innerHTML += " send "+idx+"/"+lines.length+dbg+"...";
+        this.progressTextElem.innerHTML += " Sending "+idx+" of "+lines.length+dbg+"...";
         await this.sendLine(line,this.onSendFailed);
         idx++;
       }
-        this.progressTextElem.innerHTML += "<span style='color:green;'> Send done!</span>";
-        this.progressTextElem.innerHTML += "<span style='color:green;'> Please restart device if needed.</span>";
+        this.progressTextElem.innerHTML += "<span style='color:green;'> Completed.</span>";
+        this.progressTextElem.innerHTML += "<span style='color:green;'> Restart the device if required.</span>";
     },
     async sendLine(line, errorHandler) {
       line = line.trim();
@@ -148,28 +149,28 @@
     refreshTemplateImport() {
        let res;
        if(processJSON==undefined){
-           this.generateTextElem.innerHTML = "<span style='color:red;'>Failed - processJSON missing.</span>";
+           this.generateTextElem.innerHTML = "<span style='color:red;'>Template parser is not loaded yet.</span>";
           return;
        }
        let jsonText = this.importTemplateText;
        jsonText = jsonText.trim();
        if(jsonText.length < 1) {
-           this.generateTextElem.innerHTML = "<span style='color:yellow;'>No input text.</span>";
+           this.generateTextElem.innerHTML = "<span style='color:yellow;'>No input provided.</span>";
           return;
        }
        try {
            res = processJSON(jsonText);
        } catch (error) {
-           this.generateTextElem.innerHTML = "<span style='color:red;'>Failed - "+error+".</span>";
+           this.generateTextElem.innerHTML = "<span style='color:red;'>Failed: "+error+".</span>";
            return;
        }
         this.generatedScriptText  = "";
          this.generatedScriptText  +=  "ClearIO // clear old GPIO/channels"+"\n";
-         this.generatedScriptText  +=  "lfs_format // clear LFS"+"\n";
+         this.generatedScriptText  +=  "lfs_format // clear LittleFS"+"\n";
          this.generatedScriptText  +=  "StartupCommand \"\"  // clear STARTUP"+"\n";
-         this.generatedScriptText  +=  "stopDriver *  // kill drivers"+"\n";
+         this.generatedScriptText  +=  "stopDriver *  // stop drivers"+"\n";
          this.generatedScriptText  += res.scr;
-           this.generateTextElem.innerHTML = "<span style='color:green;'>OK! Generated.</span>";
+           this.generateTextElem.innerHTML = "<span style='color:green;'>OK. Script generated.</span>";
         
     },
       
@@ -197,7 +198,7 @@
         this.msg = 'fred';
         this.progressTextElem = document.getElementById("progressTextID");
         this.generateTextElem = document.getElementById("generateTextID");
-        this.generateTextElem.innerHTML = "Waiting.";
+        this.generateTextElem.innerHTML = "Waiting for input.";
         const plugin = document.createElement("script");
         plugin.setAttribute(
           "src",
@@ -219,16 +220,45 @@
 </script>
 
 <style scoped>
-  .container {
+  .importPage {
+    width: 100%;
+  }
+
+  .importIntro {
+    max-width: 940px;
+    margin: 0 auto 36px auto;
+    padding: 0 15px;
+  }
+
+  .importContainer {
     display: flex;
     justify-content: center;
+    align-items: flex-start;
+    flex-wrap: wrap;
+    padding-top: 6px;
   }
 
-  .item {
+  .importItem {
     padding: 0 15px;
   }
+
+  .importExamplesTitle {
+    margin: 0 0 6px 0;
+  }
+
+  .importExamples {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+  }
+
+  .importExecTitle {
+    margin-bottom: 6px;
+  }
+
   .pin-index {
     display: inline-block;
     width: 20px;
   }
 </style>
+

From c31cb8dea6bdf57b6379bfeab57f18d9b724b127 Mon Sep 17 00:00:00 2001
From: divadiow <divadiow@hotmail.com>
Date: Fri, 23 Jan 2026 05:51:14 +0000
Subject: [PATCH 09/24] Update control.vue

---
 vue/control.vue | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/vue/control.vue b/vue/control.vue
index dcffdc1c..e637d41b 100644
--- a/vue/control.vue
+++ b/vue/control.vue
@@ -1,7 +1,7 @@
 <template>
     <div>
-    <h3>Basic device status and debug channel values display</h3>
-    <p>Here you can operate on raw channel values. You can also set RAW pwm values, without LED driver. PLEASE REMEMBER that this page is not a correct LED RGB/CW controller. Please use main WWW page for that.</p>
+    <h4>Channel Debug Controls</h4>
+    <p>This page provides low-level control of raw channel values for testing and troubleshooting. You can toggle relay/PWM outputs and set channel values directly. If your device uses an LED driver, these controls bypass it and may not match the lighting UI. For normal RGB/CW lighting control, use the main OpenBeken web UI.</p>
         <div>
           <!--<span v-for="item in channels" v-bind:key="item">{{item}}:{{channels[item]}} </span>-->
           <div v-for="(item, key) in channels" v-bind:key="item">
@@ -12,7 +12,7 @@
                 :class="item?'set':'unset'" 
                 @click="channelclick(key)"
               >{{channels[key]?'On':'Off'}}</button>
-              <span v-bind:key="'span'+item">{{key}}:{{item}} role {{outputchannelrolenames[+key]}}{{channeltag[+key]}}</span>
+              <span v-bind:key="'span'+item">{{key}}:{{item}} Role: {{outputchannelrolenames[+key]}}{{channeltag[+key]}}</span>
               <input 
                 v-if="(outputchannelrolenames[+key] === 'PWM') || (outputchannelrolenames[+key] === 'PWM_n')" 
                 v-bind:key="'input'+item" 
@@ -27,13 +27,13 @@
 
 
         <div v-if="show_cw">
-          <span class="label">CW:</span>
+          <span class="label">Cool White:</span>
           <div class="radiused cw">
             <input type="range" min="0" max="100" v-model="cw" @input="change()">
           </div>
         </div>
         <div v-if="show_ww">
-          <span class="label">WW:</span>
+          <span class="label">Warm White:</span>
           <div class="radiused ww">
             <input type="range" min="0" max="100" v-model="ww" @input="change()">
           </div>
@@ -45,13 +45,13 @@
           </div>
         </div>
         <div v-if="show_rgb">
-          <span class="label">Sat:</span>
+          <span class="label">Saturation:</span>
           <div class="radiused" v-bind:style="backgroundstyle">
               <input type="range" min="0" max="100" v-model="saturation" @input="change()">
           </div>
         </div>
         <div v-if="show_rgb">
-          <span class="label">Int:</span>
+          <span class="label">Intensity:</span>
           <div class="radiused lightness">
               <input type="range" min="0" max="100" v-model="lightness" @input="change()">
           </div>

From 19d48156e409d1dd9cc3eb56839c75655bd0c0a4 Mon Sep 17 00:00:00 2001
From: divadiow <divadiow@hotmail.com>
Date: Fri, 23 Jan 2026 05:51:35 +0000
Subject: [PATCH 10/24] Update flash.vue

---
 vue/flash.vue | 24 +++++++++++++++++-------
 1 file changed, 17 insertions(+), 7 deletions(-)

diff --git a/vue/flash.vue b/vue/flash.vue
index 3bd8bf4e..0b1dc091 100644
--- a/vue/flash.vue
+++ b/vue/flash.vue
@@ -1,8 +1,10 @@
 <template>
     <div>
         <div>
-            You can read flash regions directly from the device. RF configuration is Beken's RF/WiFi calibration and configuration data, while OBK configuration contains OpenBeken settings.<br>
-            You can also recover devices affected by the "MAC ends with 00 00 00 and is unable to change" issue. The "Restore RF configuration" button recreates the RF partition for BK7231N/BK7231T and generates a random MAC address. Reboot the device afterward.<br>
+            <div class="flashIntro">
+            <p>Here you can read flash regions directly from the device. RF configuration contains Beken calibration and network data, while OBK configuration contains OpenBeken settings.</p>
+            <p>If your device has an invalid MAC address ending in 00:00:00, use Restore RF configuration. This resets the RF partition and generates a random MAC address. Reboot the device afterward.</p>
+            </div>
             
 
             <table class="my-table">
@@ -26,7 +28,7 @@
                 <div>
                     <label for="cfgFilePicker">Select a file with a binary CFG header:</label><input id="cfgFilePicker"
                     type="file" @change="cfgFileSelected($event)">
-                    <div v-html="cfgStatus" :class="{invalid: invalidCFGSelected}"></div>
+                    <div v-if="cfgStatus" v-html="cfgStatus" :class="{invalid: invalidCFGSelected}"></div>
                     <button @click="writeCFG(null, $event)">Write CFG to device</button>
                 </div>
                 </td>
@@ -43,7 +45,7 @@
             </tr>
             <tr>
                 <td></td>
-                <td> <button @click="downloadFullDump(null, $event)">Download full 2 MB flash dump</button></td>
+                <td> <button @click="downloadFullDump(null, $event)">Download full 2MB flash dump</button></td>
                 <td></td>
                 <td></td>
             </tr>
@@ -61,7 +63,7 @@
             </tr>
             </table>
                 <div>
-                    <h4>Job status</h4>
+                    <h4>Job Status</h4>
                     <div v-html="status" :class=""></div>
                 </div>
 
@@ -112,7 +114,7 @@
         invalidOTASelected: false,
         cfgtext:'Drop CFG file here',
         invalidCFGSelected: true,
-        cfgStatus: 'No file selected.',
+        cfgStatus: '',
       }
     },
     computed:{
@@ -402,7 +404,7 @@
                 alert("Not available yet.");
                 return;
             }
-			let rep = prompt("Are you certain? This option is slow and may crash OpenBeken on older builds, requiring a manual power-cycle. It may also reboot several times on newer builds. If you only need settings, prefer downloading the configuration partition and a LittleFS backup (tar). Do not flash a full 2 MB dump from one device to another; RF/WiFi calibration is device-specific. Type yes to continue.", "no");
+			let rep = prompt("Are you certain? This option is slow and may crash OpenBeken on older builds, requiring a manual power-cycle. It may also reboot several times on newer builds. If you only need settings, prefer downloading the configuration partition and a LittleFS backup (tar). Do not flash a full 2MB dump from one device to another; RF/WiFi calibration is device-specific. Type yes to continue.", "no");
 			if (rep != null) {
 				  if(rep[0] == "y") {
 				  } else {
@@ -648,6 +650,14 @@
     display: inline-block;
     width: 20px;
   }
+  .flashIntro {
+    margin: 0 0 12px 0;
+  }
+  .flashIntro p {
+    margin: 0 0 6px 0;
+  }
+
+
   
             .my-table, 
             .my-table th,

From 3b1008e3b760cd853fc0ac4b21248a8c01956af7 Mon Sep 17 00:00:00 2001
From: divadiow <divadiow@hotmail.com>
Date: Fri, 23 Jan 2026 05:51:42 +0000
Subject: [PATCH 11/24] Update import.vue

---
 vue/import.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/vue/import.vue b/vue/import.vue
index b51a0dd5..f6041844 100644
--- a/vue/import.vue
+++ b/vue/import.vue
@@ -1,7 +1,7 @@
 
 <template>
   <div class="importPage">
-    <p class="importIntro">You can import configuration from a template. Both OpenBeken templates and Cloudcutter profiles are supported. Applying the import will overwrite your current pin/channel assignments and startup command, and it will clear LittleFS (including <code>autoexec.bat</code>).</p>
+    <p class="importIntro">Here you can import configuration from a template. Both OpenBeken templates and Cloudcutter profiles are supported. Applying the import will overwrite your current pin/channel assignments and startup command, and it will clear LittleFS (including <code>autoexec.bat</code>).</p>
     <div class="importContainer">
       <div class="importItem"  style="width: 300px;">
         <h3>1. Paste a template or profile</h3>
@@ -10,7 +10,7 @@
         placeholder="Paste (or drag and drop) an OpenBeken template, Tuya JSON, or Cloudcutter JSON here" style="vertical-align: top; width: 280px; height:500px" @input="handleImportTemplateChange" v-model="importTemplateText"></textarea>
        <br/>
                <br>
-              <div class="importExamplesTitle">Examples (advanced):</div>
+              <div class="importExamplesTitle">Developer testing examples:</div>
        <div class="importExamples">
          <button @click="loadDemo('https://raw.githubusercontent.com/tuya-cloudcutter/tuya-cloudcutter.github.io/a8a6539aad21a03d5db41e4d27e9d5516c62fe23/devices/lenovo-se-242dc-rgbct-bulb-v1.2.21.json')">RGBCW LED</button>
          <button @click="loadDemo('https://raw.githubusercontent.com/tuya-cloudcutter/tuya-cloudcutter.github.io/a8a6539aad21a03d5db41e4d27e9d5516c62fe23/devices/nous-p4-e14-rgbct-bulb.json')">BP5758 LED</button>

From 6aca45541ccce994acd50ea605e4ddcb4395126e Mon Sep 17 00:00:00 2001
From: divadiow <divadiow@hotmail.com>
Date: Fri, 23 Jan 2026 05:51:52 +0000
Subject: [PATCH 12/24] Update myComponent.vue

---
 vue/myComponent.vue | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/vue/myComponent.vue b/vue/myComponent.vue
index 03147a0d..2f18d25e 100644
--- a/vue/myComponent.vue
+++ b/vue/myComponent.vue
@@ -10,7 +10,7 @@
       <button :class="'tablinks '+Toolsclass" @click="open($event, 'Tools')">Tools</button>
       <button :class="'tablinks '+Importclass" @click="open($event, 'Import')">Import</button>
       <button :class="'tablinks '+Filesystemclass" @click="open($event, 'Filesystem')">Filesystem</button>
-      <button :class="'tablinks '+GPIODoctorclass" @click="open($event, 'GPIODoctor')">GPIO Doctor</button> 
+      <button :class="'tablinks '+GPIODoctorclass" @click="open($event, 'GPIOFinder')">GPIO Finder</button> 
       <button :class="'tablinks '+Aboutclass" @click="open($event, 'About')">About</button>
     </div>
     
@@ -58,9 +58,9 @@
       <filesystem-controller></filesystem-controller>
     </div>
 
-    <div class="tabcontent" v-if="tab === 'GPIODoctor'">
-      <h3>GPIO Doctor: find GPIO roles for relays, PWM outputs, and buttons</h3>
-      <h6>For best results, update OpenBeken to the latest version. Otherwise, some values may not display correctly.</h6>
+    <div class="tabcontent" v-if="tab === 'GPIOFinder'">
+      <h3>GPIO Doctor - easily find GPIO roles for your relays, PWMs, and buttons</h3>
+      <p class="helperNote">For best results, update OpenBeken to the latest version. Otherwise, some values may not display correctly.</p>
       <gpio-controller></gpio-controller>
     </div>
     </div>
@@ -138,6 +138,12 @@
         color: v-bind('color');
     }
 
+    .helperNote {
+      margin: 6px 0 18px 0;
+      font-size: 0.8em;
+      color: #444;
+    }
+
     /* Style the tab */
     .tab {
       overflow: hidden;

From 433c0c38f3c200d28c8ab6a66e74cb71a95cb201 Mon Sep 17 00:00:00 2001
From: divadiow <divadiow@hotmail.com>
Date: Fri, 23 Jan 2026 06:07:54 +0000
Subject: [PATCH 13/24] Update myComponent.vue

---
 vue/myComponent.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/vue/myComponent.vue b/vue/myComponent.vue
index 2f18d25e..8a721e0f 100644
--- a/vue/myComponent.vue
+++ b/vue/myComponent.vue
@@ -10,7 +10,7 @@
       <button :class="'tablinks '+Toolsclass" @click="open($event, 'Tools')">Tools</button>
       <button :class="'tablinks '+Importclass" @click="open($event, 'Import')">Import</button>
       <button :class="'tablinks '+Filesystemclass" @click="open($event, 'Filesystem')">Filesystem</button>
-      <button :class="'tablinks '+GPIODoctorclass" @click="open($event, 'GPIOFinder')">GPIO Finder</button> 
+      <button :class="'tablinks '+GPIODoctorclass" @click="open($event, 'GPIODoctor')">GPIO Finder</button> 
       <button :class="'tablinks '+Aboutclass" @click="open($event, 'About')">About</button>
     </div>
     
@@ -58,7 +58,7 @@
       <filesystem-controller></filesystem-controller>
     </div>
 
-    <div class="tabcontent" v-if="tab === 'GPIOFinder'">
+    <div class="tabcontent" v-if="tab === 'GPIODoctor'">
       <h3>GPIO Doctor - easily find GPIO roles for your relays, PWMs, and buttons</h3>
       <p class="helperNote">For best results, update OpenBeken to the latest version. Otherwise, some values may not display correctly.</p>
       <gpio-controller></gpio-controller>

From a3296ebd6955087cad025120653b621b2fd2016a Mon Sep 17 00:00:00 2001
From: divadiow <divadiow@hotmail.com>
Date: Fri, 23 Jan 2026 06:30:37 +0000
Subject: [PATCH 14/24] Update filesystem.vue

---
 vue/filesystem.vue | 26 +++++++++++++++++++++++++-
 1 file changed, 25 insertions(+), 1 deletion(-)

diff --git a/vue/filesystem.vue b/vue/filesystem.vue
index c938491d..fbaf23de 100644
--- a/vue/filesystem.vue
+++ b/vue/filesystem.vue
@@ -36,7 +36,13 @@
   <button @click="showUrlModal = false">Cancel</button>
 </div>
             <div class="left">
-                <input type="text" v-model="folder">
+                <div class="folderBox">
+                    <label for="folderInput"><strong>Target Folder (Optional)</strong></label><br/>
+                    <input id="folderInput" class="folderInput" type="text" v-model="folder" placeholder="e.g., www">
+                    <div class="folderHelp">
+                        Used for uploads and newly created files. Leave blank to save to the LittleFS root.
+                    </div>
+                </div>
                 <div class="drop" @drop="dropHandler($event)" @dragover="dragOverHandler($event)">
                     <div class="otatext center" v-html="otatext"></div>
                 </div>
@@ -1028,6 +1034,24 @@
         vertical-align: center;
     }
 
+    .folderBox {
+        margin: 0 0 10px 0;
+        width: 200px;
+    }
+
+    .folderInput {
+        width: 200px;
+        box-sizing: border-box;
+        padding: 2px 4px;
+    }
+
+    .folderHelp {
+        margin-top: 4px;
+        font-size: 0.9em;
+        line-height: 1.2em;
+        word-break: break-word;
+    }
+
     .otatext {
     }
     .center {

From efb20b8725fb4e30afc563e6df7ae64897f373bc Mon Sep 17 00:00:00 2001
From: divadiow <divadiow@hotmail.com>
Date: Fri, 23 Jan 2026 06:54:11 +0000
Subject: [PATCH 15/24] Update filesystem.vue

---
 vue/filesystem.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/vue/filesystem.vue b/vue/filesystem.vue
index fbaf23de..6a8bd1e6 100644
--- a/vue/filesystem.vue
+++ b/vue/filesystem.vue
@@ -20,7 +20,7 @@
             <button @click="showUrlModal = true">Fetch from URLs</button>
             <button @click="resetSVM(null, $event)">Reset scripts</button>
             <br/>
-            <button @click="getTar(null, $event)">Download filesystem backup (tar)</button>
+            <button @click="getTar(null, $event)">Download filesystem backup (.tar)</button>
 
         </div>
         <div class="bottom">
@@ -1026,7 +1026,11 @@
 
 <style scoped>
     .drop {
-        border: 5px solid blue;
+        border: 4px solid #3b82f6;
+        background: #eff6ff;
+        color: #1e40af;
+        margin-top: 20px;
+        margin-bottom: 20px;
         width:  200px;
         height: 100px;
         text-align: center;

From 54d85bd0aff45ff696f63cc671b8a01d0e5f2316 Mon Sep 17 00:00:00 2001
From: divadiow <divadiow@hotmail.com>
Date: Fri, 23 Jan 2026 06:54:20 +0000
Subject: [PATCH 16/24] Update ota.vue

---
 vue/ota.vue | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/vue/ota.vue b/vue/ota.vue
index e48fe5b1..84792597 100644
--- a/vue/ota.vue
+++ b/vue/ota.vue
@@ -35,10 +35,9 @@
         </div>
         <br/>
         <div>
-            <label for="otaFilePicker">Select OTA file from disk:</label><input id="otaFilePicker" type="file" @change="fileSelected($event)" :accept="otaFileExtension">
+            <label for="otaFilePicker">Select OTA file from disk: </label><input id="otaFilePicker" type="file" @change="fileSelected($event)" :accept="otaFileExtension">
             <br/>
             <p>Or drop it here:</p>
-            <br/>
             <div class="drop" @drop="dropHandler($event)" @dragover="dragOverHandler($event)">
                 <div class="otatext center" v-html="otatext"></div>
             </div>
@@ -59,7 +58,7 @@
         backupdata: null,
         otadata:null,
         otatext:'Drop OTA file here',
-        status:'Nothing going on',
+        status:'Ready.',
         defaultaction: '',
         build:'unknown',
         chipset:'unknown',
@@ -665,7 +664,10 @@
 
 <style scoped>
     .drop {
-        border: 5px solid blue;
+        border: 4px solid #3b82f6;
+        background: #eff6ff;
+        color: #1e40af;
+        margin-bottom: 20px;
         width:  200px;
         height: 100px;
         text-align: center;

From 2e4c3741b4d636f91f9633a65aaa538cb6477c77 Mon Sep 17 00:00:00 2001
From: divadiow <divadiow@hotmail.com>
Date: Sun, 25 Jan 2026 19:21:00 +0000
Subject: [PATCH 17/24] .

---
 vue/flash.vue  |   6 +-
 vue/import.vue | 195 ++++++++++++++++++++++++++++++++-----------------
 vue/ota.vue    |   4 +-
 3 files changed, 133 insertions(+), 72 deletions(-)

diff --git a/vue/flash.vue b/vue/flash.vue
index 0b1dc091..72bd4d5f 100644
--- a/vue/flash.vue
+++ b/vue/flash.vue
@@ -2,7 +2,7 @@
     <div>
         <div>
             <div class="flashIntro">
-            <p>Here you can read flash regions directly from the device. RF configuration contains Beken calibration and network data, while OBK configuration contains OpenBeken settings.</p>
+            <p>You can read flash regions directly from the device. RF configuration contains Beken calibration and network data, while OBK configuration contains OpenBeken settings.</p>
             <p>If your device has an invalid MAC address ending in 00:00:00, use Restore RF configuration. This resets the RF partition and generates a random MAC address. Reboot the device afterward.</p>
             </div>
             
@@ -45,7 +45,7 @@
             </tr>
             <tr>
                 <td></td>
-                <td> <button @click="downloadFullDump(null, $event)">Download full 2MB flash dump</button></td>
+                <td> <button @click="downloadFullDump(null, $event)">Download full 2 MB flash dump</button></td>
                 <td></td>
                 <td></td>
             </tr>
@@ -404,7 +404,7 @@
                 alert("Not available yet.");
                 return;
             }
-			let rep = prompt("Are you certain? This option is slow and may crash OpenBeken on older builds, requiring a manual power-cycle. It may also reboot several times on newer builds. If you only need settings, prefer downloading the configuration partition and a LittleFS backup (tar). Do not flash a full 2MB dump from one device to another; RF/WiFi calibration is device-specific. Type yes to continue.", "no");
+			let rep = prompt("Are you certain? This option is slow and may crash OpenBeken on older builds, requiring a manual power-cycle. It may also reboot several times on newer builds. If you only need settings, prefer downloading the configuration partition and a LittleFS backup (tar). Do not flash a full 2 MB dump from one device to another; RF/WiFi calibration is device-specific. Type yes to continue.", "no");
 			if (rep != null) {
 				  if(rep[0] == "y") {
 				  } else {
diff --git a/vue/import.vue b/vue/import.vue
index f6041844..0fcef7d9 100644
--- a/vue/import.vue
+++ b/vue/import.vue
@@ -1,17 +1,17 @@
 
 <template>
-  <div class="importPage">
-    <p class="importIntro">Here you can import configuration from a template. Both OpenBeken templates and Cloudcutter profiles are supported. Applying the import will overwrite your current pin/channel assignments and startup command, and it will clear LittleFS (including <code>autoexec.bat</code>).</p>
-    <div class="importContainer">
-      <div class="importItem"  style="width: 300px;">
-        <h3>1. Paste a template or profile</h3>
-        <p>Paste an <a href="https://openbekeniot.github.io/webapp/devicesList.html">OpenBeken template</a> or Cloudcutter JSON. You can find Cloudcutter device profiles <a href="https://github.com/tuya-cloudcutter/tuya-cloudcutter.github.io/tree/master/devices">here</a>.</p>
+  <div class="container">
+    Here you can import configuration from a template. Both OBK templates and Cloudcutter profiles are supported. Importing a profile may ovewrite your current pins/channels/startup command configuration, it will also clear LFS (autoexec.bat). 
+    <div class="container">
+      <div class="item"  style="width: 300px;">
+        <h3>1. Enter template or drag and drop Tuya firmware</h3>
+        <p>Here you can enter an  <a href="https://openbekeniot.github.io/webapp/devicesList.html">OBK template</a>/JSON text from Cloudcutter. <a href="https://github.com/tuya-cloudcutter/tuya-cloudcutter.github.io/tree/master/devices"> Here </a> is a list of cloudcutter devices. Just open one and copy-paste config below.</p>
+        <p><b>New:</b> You can also drag and drop a 2MB binary full device dump or just the Tuya config partition to automatically extract keys and JSON configuration.</p>
         <textarea id="importTemplate" 
-        placeholder="Paste (or drag and drop) an OpenBeken template, Tuya JSON, or Cloudcutter JSON here" style="vertical-align: top; width: 280px; height:500px" @input="handleImportTemplateChange" v-model="importTemplateText"></textarea>
+        placeholder="Paste (or drag and drop) OBK template, Tuya JSON or cloudcutter json here" style="vertical-align: top; width: 280px; height:500px" @input="handleImportTemplateChange" v-model="importTemplateText"></textarea>
        <br/>
                <br>
-              <div class="importExamplesTitle">Developer testing examples:</div>
-       <div class="importExamples">
+       Some examples for developer testing:        <br>
          <button @click="loadDemo('https://raw.githubusercontent.com/tuya-cloudcutter/tuya-cloudcutter.github.io/a8a6539aad21a03d5db41e4d27e9d5516c62fe23/devices/lenovo-se-242dc-rgbct-bulb-v1.2.21.json')">RGBCW LED</button>
          <button @click="loadDemo('https://raw.githubusercontent.com/tuya-cloudcutter/tuya-cloudcutter.github.io/a8a6539aad21a03d5db41e4d27e9d5516c62fe23/devices/nous-p4-e14-rgbct-bulb.json')">BP5758 LED</button>
          <button @click="loadDemo('https://raw.githubusercontent.com/tuya-cloudcutter/tuya-cloudcutter.github.io/b04e860fe0bb1c8bed417ab36c57e6759ec08510/devices/spectrum-woj14415-rgbct-gu10-bulb.json')">SM2135 LED</button>
@@ -20,26 +20,34 @@
           <button @click="loadDemo('https://raw.githubusercontent.com/tuya-cloudcutter/tuya-cloudcutter.github.io/43a341ef1dd8eec8514e1d435563bd9008ff2835/devices/hombli-hbss-0209-smart-socket-b2030248-energy-plug.json')">BL0937 plug</button>
           <button @click="loadDemo('https://raw.githubusercontent.com/tuya-cloudcutter/tuya-cloudcutter.github.io/a8a6539aad21a03d5db41e4d27e9d5516c62fe23/devices/athom-garage-door-opener.json')">Garage switch</button>
           <button @click="loadDemo('https://raw.githubusercontent.com/tuya-cloudcutter/tuya-cloudcutter.github.io/a8a6539aad21a03d5db41e4d27e9d5516c62fe23/devices/aldi-casalux-wifi-led-rgb-light-strip.json')">RGB LED</button>
-       </div>
-</div>
+    
+      </div>
 
-      <div class="importItem"  style="width: 300px;">
-        <h3>2. Review the generated script (edit if needed)</h3>
+      <div class="item"  style="width: 300px;">
+        <h3>2. Check generated script (modify if you want)</h3>
                <br>
         <p id ="generateTextID" v-text="generateText"></p>
-        <textarea id="generatedScriptField" placeholder="The generated script will appear here" style="vertical-align: top; width: 280px; height:500px"  v-model="generatedScriptText"></textarea>
+        <textarea id="generatedScriptField" placeholder="Here script will appear" style="vertical-align: top; width: 280px; height:500px"  v-model="generatedScriptText"></textarea>
        <br>
       </div>
 
-      <div class="importItem" style="width: 300px;">
-      <h3> 3. Apply the script to the device</h3>
+      <div class="item" style="width: 300px;">
+      <h3>3. Apply Script</h3>
+      <p>Once you are happy with the script, use button below to apply:</p>
                <br>
-       <button @click="applyScript()">Apply script (clears current configuration)</button>
+       <button @click="applyScript()">Clear OBK and apply new script from above</button>
        <br>
        <br>
-       <div class="importExecTitle">Execution log:</div>
+       Script execution log:
         <p id ="progressTextID" v-text="progressText"> </p>
       </div>
+      
+      <div class="item" style="width: 300px;">
+        <h3> 4. If something fails, check the log</h3>
+         <br>
+         <div id="debugLog" style="width: 280px; height: 500px; border: 1px solid #999; overflow-y: scroll; padding: 5px; background: white; white-space: pre-wrap;" v-html="logHtml"></div>
+         <button @click="clearLog()">Clear Log</button>
+       </div>
     </div>
   </div>
 </template>
@@ -59,9 +67,30 @@
         progressText: "",
         generateTextElem:undefined,
         progressTextElem:undefined,
+        logHtml: "",
       }
     },
     methods:{
+      log(msg, type = 'info') {
+          let color = 'black';
+          if(type === 'error') color = 'red';
+          if(type === 'warning') color = 'orange';
+          if(type === 'success') color = 'green';
+          if(type === 'info') color = 'blue';
+          
+          const time = new Date().toLocaleTimeString();
+          const html = `<div style="color:${color}">[${time}] ${msg}</div>`;
+          this.logHtml += html;
+          
+          this.$nextTick(() => {
+             const elem = document.getElementById('debugLog');
+             if(elem) elem.scrollTop = elem.scrollHeight;
+          });
+          console.log(`[${type}] ${msg}`);
+      },
+      clearLog(){
+        this.logHtml = "";
+      },
       getinfo(){
        
 
@@ -69,25 +98,25 @@
       onSendFailed(response,line) {
         //alert('Send failed!');
         if(response.status == 501 || response.status == 400) {
-           this.progressTextElem.innerHTML += "<span style='color:red;'>Failed: invalid command \""+line+"\".</span>";
+           this.progressTextElem.innerHTML += "<span style='color:red;'>FAILED! Invalid command \""+line+"\".</span>";
         } else {
-           this.progressTextElem.innerHTML += "<span style='color:red;'>Failed. Check your network connection and try again.</span>";
+           this.progressTextElem.innerHTML += "<span style='color:red;'>FAILED! Please check network and retry.</span>";
         }
       },
       async sendLines(lines) {
-        this.progressTextElem.innerHTML = "Sending...";
+        this.progressTextElem.innerHTML = "Send started...";
         let idx = 0;
       for (let line of lines) {
         let dbg = "";
         if(false){
           dbg = " ("+line+")";
         }
-        this.progressTextElem.innerHTML += " Sending "+idx+" of "+lines.length+dbg+"...";
+        this.progressTextElem.innerHTML += " send "+idx+"/"+lines.length+dbg+"...";
         await this.sendLine(line,this.onSendFailed);
         idx++;
       }
-        this.progressTextElem.innerHTML += "<span style='color:green;'> Completed.</span>";
-        this.progressTextElem.innerHTML += "<span style='color:green;'> Restart the device if required.</span>";
+        this.progressTextElem.innerHTML += "<span style='color:green;'> Send done!</span>";
+        this.progressTextElem.innerHTML += "<span style='color:green;'> Please restart device if needed.</span>";
     },
     async sendLine(line, errorHandler) {
       line = line.trim();
@@ -144,33 +173,34 @@
       },
     handleImportTemplateChange(event) {
       console.log("Import template changed!");
+       this.clearLog();
        this.refreshTemplateImport();
     },
     refreshTemplateImport() {
        let res;
        if(processJSON==undefined){
-           this.generateTextElem.innerHTML = "<span style='color:red;'>Template parser is not loaded yet.</span>";
+           this.generateTextElem.innerHTML = "<span style='color:red;'>Failed - processJSON missing.</span>";
           return;
        }
        let jsonText = this.importTemplateText;
        jsonText = jsonText.trim();
        if(jsonText.length < 1) {
-           this.generateTextElem.innerHTML = "<span style='color:yellow;'>No input provided.</span>";
+           this.generateTextElem.innerHTML = "<span style='color:yellow;'>No input text.</span>";
           return;
        }
        try {
            res = processJSON(jsonText);
        } catch (error) {
-           this.generateTextElem.innerHTML = "<span style='color:red;'>Failed: "+error+".</span>";
+           this.generateTextElem.innerHTML = "<span style='color:red;'>Failed - "+error+".</span>";
            return;
        }
         this.generatedScriptText  = "";
          this.generatedScriptText  +=  "ClearIO // clear old GPIO/channels"+"\n";
-         this.generatedScriptText  +=  "lfs_format // clear LittleFS"+"\n";
+         this.generatedScriptText  +=  "lfs_format // clear LFS"+"\n";
          this.generatedScriptText  +=  "StartupCommand \"\"  // clear STARTUP"+"\n";
-         this.generatedScriptText  +=  "stopDriver *  // stop drivers"+"\n";
+         this.generatedScriptText  +=  "stopDriver *  // kill drivers"+"\n";
          this.generatedScriptText  += res.scr;
-           this.generateTextElem.innerHTML = "<span style='color:green;'>OK. Script generated.</span>";
+           this.generateTextElem.innerHTML = "<span style='color:green;'>OK! Generated.</span>";
         
     },
       
@@ -180,16 +210,58 @@
       handleDrop(event) {
         event.preventDefault();
 
+        this.clearLog();
+        this.importTemplateText = ""; // Clear old content immediately
         const files = event.dataTransfer.files;
 
         if (files.length > 0) {
-          const reader = new FileReader();
+          const file = files[0];
+          
+          if (file.name.toLowerCase().endsWith('.bin')) {
+            this.log(`Processing dropped file: ${file.name}`, 'info');
+            const reader = new FileReader();
+            reader.onload = (evt) => {
+              const arrayBuffer = evt.target.result;
+              const uint8Array = new Uint8Array(arrayBuffer);
+              try {
+                if (typeof window.TuyaExporter === 'undefined' || !window.TuyaExporter.extractConfig) {
+                   this.log('TuyaExporter library not loaded correctly.', 'error');
+                   return;
+                }
+                // Pass log callback logic
+                const result = window.TuyaExporter.extractConfig(uint8Array, this.log);
+                if (result) {
+                  if (typeof result === 'object') {
+                    this.importTemplateText = JSON.stringify(result, null, 2);
+                    this.refreshTemplateImport(); // trigger generation
+                    this.log('Config extracted and loaded successfully.', 'success');
+                  } else {
+                    this.importTemplateText = result;
+                    this.refreshTemplateImport(); // trigger generation
+                    this.log('Config extracted but parsing had issues. Raw/Repaired text loaded.', 'warning');
+                  }
+                } else {
+                  this.log('Failed to extract config from binary.', 'error');
+                }
+              } catch (err) {
+                this.log(`Decryption crash: ${err.message}`, 'error');
+                console.error(err);
+              }
+            };
+            reader.readAsArrayBuffer(file);
+          } else {
+             // Text/JSON file
+            this.log(`Dropped file is not .bin, trying text read for ${file.name}`, 'info');
+            const reader = new FileReader();
 
-          reader.onload = (e) => {
-            this.importTemplateText = e.target.result;
-          };
+            reader.onload = (e) => {
+              this.importTemplateText = e.target.result;
+              this.refreshTemplateImport();
+              this.log("Loaded text file content.", 'success');
+            };
 
-          reader.readAsText(files[0]);
+            reader.readAsText(file); 
+          }
         }
       },
 
@@ -198,7 +270,16 @@
         this.msg = 'fred';
         this.progressTextElem = document.getElementById("progressTextID");
         this.generateTextElem = document.getElementById("generateTextID");
-        this.generateTextElem.innerHTML = "Waiting for input.";
+        this.generateTextElem.innerHTML = "Waiting.";
+
+        const cryptoScript = document.createElement("script");
+        cryptoScript.setAttribute(
+          "src",
+          "https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"
+        );
+        cryptoScript.async = true;
+        document.head.appendChild(cryptoScript);
+
         const plugin = document.createElement("script");
         plugin.setAttribute(
           "src",
@@ -207,6 +288,15 @@
         );
         plugin.async = true;
         document.head.appendChild(plugin);
+        
+        const plugin2 = document.createElement("script");
+        plugin2.setAttribute(
+          "src",
+            "https://openbekeniot.github.io/webapp/tuyaExporter.js"
+        );
+        plugin2.async = true;
+        document.head.appendChild(plugin2);
+        
       let importTemplateTextarea = document.getElementById("importTemplate");
       importTemplateTextarea.addEventListener('dragover', this.handleDragOver);
       importTemplateTextarea.addEventListener('drop', this.handleDrop);
@@ -220,45 +310,16 @@
 </script>
 
 <style scoped>
-  .importPage {
-    width: 100%;
-  }
-
-  .importIntro {
-    max-width: 940px;
-    margin: 0 auto 36px auto;
-    padding: 0 15px;
-  }
-
-  .importContainer {
+  .container {
     display: flex;
     justify-content: center;
-    align-items: flex-start;
-    flex-wrap: wrap;
-    padding-top: 6px;
   }
 
-  .importItem {
+  .item {
     padding: 0 15px;
   }
-
-  .importExamplesTitle {
-    margin: 0 0 6px 0;
-  }
-
-  .importExamples {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 6px;
-  }
-
-  .importExecTitle {
-    margin-bottom: 6px;
-  }
-
   .pin-index {
     display: inline-block;
     width: 20px;
   }
 </style>
-
diff --git a/vue/ota.vue b/vue/ota.vue
index 84792597..20de92a0 100644
--- a/vue/ota.vue
+++ b/vue/ota.vue
@@ -2,7 +2,7 @@
     <div>
         <div>
             <p>Chipset: {{chipset}}</p>
-            <p>Build: {{build}}</p>
+            <p>Release: {{build}}</p>
         </div>
         <div>
             <span v-if="supportsLittleFS">
@@ -665,7 +665,7 @@
 <style scoped>
     .drop {
         border: 4px solid #3b82f6;
-        background: #eff6ff;
+        background: #ffffff;
         color: #1e40af;
         margin-bottom: 20px;
         width:  200px;

From 66e6e7be666d8bb2ad3c809392bf79a2a3967d7a Mon Sep 17 00:00:00 2001
From: divadiow <divadiow@hotmail.com>
Date: Sun, 25 Jan 2026 21:56:37 +0000
Subject: [PATCH 18/24] .

---
 vue/filesystem.vue |   2 +-
 vue/flash.vue      |   4 +-
 vue/import.vue     | 133 +++++++++++++++++++++++++++++++++------------
 3 files changed, 100 insertions(+), 39 deletions(-)

diff --git a/vue/filesystem.vue b/vue/filesystem.vue
index 6a8bd1e6..4a81a863 100644
--- a/vue/filesystem.vue
+++ b/vue/filesystem.vue
@@ -1027,7 +1027,7 @@
 <style scoped>
     .drop {
         border: 4px solid #3b82f6;
-        background: #eff6ff;
+        background: #ffffff;
         color: #1e40af;
         margin-top: 20px;
         margin-bottom: 20px;
diff --git a/vue/flash.vue b/vue/flash.vue
index 72bd4d5f..a2699296 100644
--- a/vue/flash.vue
+++ b/vue/flash.vue
@@ -45,7 +45,7 @@
             </tr>
             <tr>
                 <td></td>
-                <td> <button @click="downloadFullDump(null, $event)">Download full 2 MB flash dump</button></td>
+                <td> <button @click="downloadFullDump(null, $event)">Download full 2MB flash dump</button></td>
                 <td></td>
                 <td></td>
             </tr>
@@ -404,7 +404,7 @@
                 alert("Not available yet.");
                 return;
             }
-			let rep = prompt("Are you certain? This option is slow and may crash OpenBeken on older builds, requiring a manual power-cycle. It may also reboot several times on newer builds. If you only need settings, prefer downloading the configuration partition and a LittleFS backup (tar). Do not flash a full 2 MB dump from one device to another; RF/WiFi calibration is device-specific. Type yes to continue.", "no");
+			let rep = prompt("Are you certain? This option is slow and may crash OpenBeken on older builds, requiring a manual power-cycle. It may also reboot several times on newer builds. If you only need settings, prefer downloading the configuration partition and a LittleFS backup (.tar). Do not flash a full 2MB dump from one device to another; RF/WiFi calibration is device-specific. Type yes to continue.", "no");
 			if (rep != null) {
 				  if(rep[0] == "y") {
 				  } else {
diff --git a/vue/import.vue b/vue/import.vue
index 0fcef7d9..a1ec71cf 100644
--- a/vue/import.vue
+++ b/vue/import.vue
@@ -1,18 +1,22 @@
 
 <template>
-  <div class="container">
-    Here you can import configuration from a template. Both OBK templates and Cloudcutter profiles are supported. Importing a profile may ovewrite your current pins/channels/startup command configuration, it will also clear LFS (autoexec.bat). 
-    <div class="container">
-      <div class="item"  style="width: 300px;">
-        <h3>1. Enter template or drag and drop Tuya firmware</h3>
-        <p>Here you can enter an  <a href="https://openbekeniot.github.io/webapp/devicesList.html">OBK template</a>/JSON text from Cloudcutter. <a href="https://github.com/tuya-cloudcutter/tuya-cloudcutter.github.io/tree/master/devices"> Here </a> is a list of cloudcutter devices. Just open one and copy-paste config below.</p>
-        <p><b>New:</b> You can also drag and drop a 2MB binary full device dump or just the Tuya config partition to automatically extract keys and JSON configuration.</p>
+  <div class="importPage">
+        <p class="importIntro">You can import configuration from an OpenBeken template or a Cloudcutter profile. Applying the import overwrites your current pin/channel assignments and startup command, and it clears LittleFS (including <code>autoexec.bat</code>).</p>
+    <div class="importContainer">
+      <div class="importItem"  style="width: 300px;">
+        <h3>1. Input</h3>
+        <p>Paste an <a href="https://openbekeniot.github.io/webapp/devicesList.html">OpenBeken template</a> or Cloudcutter JSON. Cloudcutter device profiles are available <a href="https://github.com/tuya-cloudcutter/tuya-cloudcutter.github.io/tree/master/devices">here</a>. Drag and drop files onto the input box below.</p>
+        <div class="importNote"><b>New:</b> You can also drag and drop a 2MB full device dump or Tuya config partition file to extract keys and JSON configuration automatically.</div>
         <textarea id="importTemplate" 
-        placeholder="Paste (or drag and drop) OBK template, Tuya JSON or cloudcutter json here" style="vertical-align: top; width: 280px; height:500px" @input="handleImportTemplateChange" v-model="importTemplateText"></textarea>
+        placeholder="Paste an OpenBeken template or Cloudcutter JSON here, a Tuya config partition, or drop a 2MB .bin firmware dump onto this box." style="vertical-align: top; width: 280px; height:500px" @input="handleImportTemplateChange" v-model="importTemplateText"></textarea>
        <br/>
                <br>
-       Some examples for developer testing:        <br>
-         <button @click="loadDemo('https://raw.githubusercontent.com/tuya-cloudcutter/tuya-cloudcutter.github.io/a8a6539aad21a03d5db41e4d27e9d5516c62fe23/devices/lenovo-se-242dc-rgbct-bulb-v1.2.21.json')">RGBCW LED</button>
+       <details class="importExamplesBox">
+
+         <summary>Examples</summary>
+
+         <div class="importExamples">
+<button @click="loadDemo('https://raw.githubusercontent.com/tuya-cloudcutter/tuya-cloudcutter.github.io/a8a6539aad21a03d5db41e4d27e9d5516c62fe23/devices/lenovo-se-242dc-rgbct-bulb-v1.2.21.json')">RGBCW LED</button>
          <button @click="loadDemo('https://raw.githubusercontent.com/tuya-cloudcutter/tuya-cloudcutter.github.io/a8a6539aad21a03d5db41e4d27e9d5516c62fe23/devices/nous-p4-e14-rgbct-bulb.json')">BP5758 LED</button>
          <button @click="loadDemo('https://raw.githubusercontent.com/tuya-cloudcutter/tuya-cloudcutter.github.io/b04e860fe0bb1c8bed417ab36c57e6759ec08510/devices/spectrum-woj14415-rgbct-gu10-bulb.json')">SM2135 LED</button>
           <button @click="loadDemo('https://raw.githubusercontent.com/tuya-cloudcutter/tuya-cloudcutter.github.io/a8a6539aad21a03d5db41e4d27e9d5516c62fe23/devices/pegant-pg3451-3-outlet-power-strip.json')">Triple socket + USB</button>
@@ -20,30 +24,34 @@
           <button @click="loadDemo('https://raw.githubusercontent.com/tuya-cloudcutter/tuya-cloudcutter.github.io/43a341ef1dd8eec8514e1d435563bd9008ff2835/devices/hombli-hbss-0209-smart-socket-b2030248-energy-plug.json')">BL0937 plug</button>
           <button @click="loadDemo('https://raw.githubusercontent.com/tuya-cloudcutter/tuya-cloudcutter.github.io/a8a6539aad21a03d5db41e4d27e9d5516c62fe23/devices/athom-garage-door-opener.json')">Garage switch</button>
           <button @click="loadDemo('https://raw.githubusercontent.com/tuya-cloudcutter/tuya-cloudcutter.github.io/a8a6539aad21a03d5db41e4d27e9d5516c62fe23/devices/aldi-casalux-wifi-led-rgb-light-strip.json')">RGB LED</button>
-    
+
+         </div>
+
+       </details>
       </div>
 
-      <div class="item"  style="width: 300px;">
-        <h3>2. Check generated script (modify if you want)</h3>
+      <div class="importItem" style="width: 300px;">
+        <h3>2. Review the Generated Script</h3>
                <br>
         <p id ="generateTextID" v-text="generateText"></p>
-        <textarea id="generatedScriptField" placeholder="Here script will appear" style="vertical-align: top; width: 280px; height:500px"  v-model="generatedScriptText"></textarea>
+        <textarea id="generatedScriptField" placeholder="OpenBeken configuration script will appear here" style="vertical-align: top; width: 280px; height:500px"  v-model="generatedScriptText"></textarea>
        <br>
       </div>
 
-      <div class="item" style="width: 300px;">
-      <h3>3. Apply Script</h3>
-      <p>Once you are happy with the script, use button below to apply:</p>
+      <div class="importItem" style="width: 300px;">
+      <h3>3. Apply the Script to the Device</h3>
+      <p>Once you are satisfied with the script, click Apply to update the device.</p>
                <br>
-       <button @click="applyScript()">Clear OBK and apply new script from above</button>
+       <button @click="applyScript()">Apply script (clears current configuration)</button>
        <br>
        <br>
-       Script execution log:
+       <div class="importExecTitle">Apply Status:</div>
         <p id ="progressTextID" v-text="progressText"> </p>
       </div>
       
-      <div class="item" style="width: 300px;">
-        <h3> 4. If something fails, check the log</h3>
+      <div class="importItem" style="width: 300px;">
+        <h3>4. Processing Log</h3>
+         <p class="importLogHelp">Shows progress, successes, and errors while processing dropped files and extracting Tuya configuration data.</p>
          <br>
          <div id="debugLog" style="width: 280px; height: 500px; border: 1px solid #999; overflow-y: scroll; padding: 5px; background: white; white-space: pre-wrap;" v-html="logHtml"></div>
          <button @click="clearLog()">Clear Log</button>
@@ -98,25 +106,25 @@
       onSendFailed(response,line) {
         //alert('Send failed!');
         if(response.status == 501 || response.status == 400) {
-           this.progressTextElem.innerHTML += "<span style='color:red;'>FAILED! Invalid command \""+line+"\".</span>";
+           this.progressTextElem.innerHTML += "<span style='color:red;'>Failed: invalid command \""+line+"\".</span>";
         } else {
-           this.progressTextElem.innerHTML += "<span style='color:red;'>FAILED! Please check network and retry.</span>";
+           this.progressTextElem.innerHTML += "<span style='color:red;'>Failed. Check your network connection and try again.</span>";
         }
       },
       async sendLines(lines) {
-        this.progressTextElem.innerHTML = "Send started...";
+        this.progressTextElem.innerHTML = "Sending...";
         let idx = 0;
       for (let line of lines) {
         let dbg = "";
         if(false){
           dbg = " ("+line+")";
         }
-        this.progressTextElem.innerHTML += " send "+idx+"/"+lines.length+dbg+"...";
+        this.progressTextElem.innerHTML += " Sending "+idx+" of "+lines.length+dbg+"...";
         await this.sendLine(line,this.onSendFailed);
         idx++;
       }
-        this.progressTextElem.innerHTML += "<span style='color:green;'> Send done!</span>";
-        this.progressTextElem.innerHTML += "<span style='color:green;'> Please restart device if needed.</span>";
+        this.progressTextElem.innerHTML += "<span style='color:green;'> Completed.</span>";
+        this.progressTextElem.innerHTML += "<span style='color:green;'> Restart the device if required.</span>";
     },
     async sendLine(line, errorHandler) {
       line = line.trim();
@@ -179,28 +187,28 @@
     refreshTemplateImport() {
        let res;
        if(processJSON==undefined){
-           this.generateTextElem.innerHTML = "<span style='color:red;'>Failed - processJSON missing.</span>";
+           this.generateTextElem.innerHTML = "<span style='color:red;'>Template parser is not loaded yet.</span>";
           return;
        }
        let jsonText = this.importTemplateText;
        jsonText = jsonText.trim();
        if(jsonText.length < 1) {
-           this.generateTextElem.innerHTML = "<span style='color:yellow;'>No input text.</span>";
+           this.generateTextElem.innerHTML = "<span style='color:yellow;'>No input provided.</span>";
           return;
        }
        try {
            res = processJSON(jsonText);
        } catch (error) {
-           this.generateTextElem.innerHTML = "<span style='color:red;'>Failed - "+error+".</span>";
+           this.generateTextElem.innerHTML = "<span style='color:red;'>Failed: "+error+".</span>";
            return;
        }
         this.generatedScriptText  = "";
          this.generatedScriptText  +=  "ClearIO // clear old GPIO/channels"+"\n";
-         this.generatedScriptText  +=  "lfs_format // clear LFS"+"\n";
+         this.generatedScriptText  +=  "lfs_format // clear LittleFS"+"\n";
          this.generatedScriptText  +=  "StartupCommand \"\"  // clear STARTUP"+"\n";
-         this.generatedScriptText  +=  "stopDriver *  // kill drivers"+"\n";
+         this.generatedScriptText  +=  "stopDriver *  // stop drivers"+"\n";
          this.generatedScriptText  += res.scr;
-           this.generateTextElem.innerHTML = "<span style='color:green;'>OK! Generated.</span>";
+           this.generateTextElem.innerHTML = "<span style='color:green;'>OK. Script generated.</span>";
         
     },
       
@@ -270,7 +278,7 @@
         this.msg = 'fred';
         this.progressTextElem = document.getElementById("progressTextID");
         this.generateTextElem = document.getElementById("generateTextID");
-        this.generateTextElem.innerHTML = "Waiting.";
+        this.generateTextElem.innerHTML = "Configuration script can be edited manually if needed.";
 
         const cryptoScript = document.createElement("script");
         cryptoScript.setAttribute(
@@ -310,14 +318,67 @@
 </script>
 
 <style scoped>
-  .container {
+  .importPage {
+    width: 100%;
+  }
+
+  .importIntro {
+    max-width: 940px;
+    margin: 0 auto 36px auto;
+    padding: 0 15px;
+    text-align: left;
+    line-height: 1.35em;
+  }
+
+  .importNote {
+    font-weight: normal;
+    color: #1e40af;
+    background: #eff6ff;
+    border-left: 4px solid #3b82f6;
+    padding: 6px 10px;
+    margin-top: 10px;
+  }
+
+  .importLogHelp {
+    margin: 0 0 6px 0;
+  }
+
+  .importExamplesBox {
+    margin-top: 12px;
+  }
+
+  .importExamplesBox summary {
+    cursor: pointer;
+    font-weight: bold;
+    margin-bottom: 6px;
+  }
+
+  .importContainer {
     display: flex;
     justify-content: center;
+    align-items: flex-start;
+    flex-wrap: wrap;
+    padding-top: 6px;
   }
 
-  .item {
+  .importItem {
     padding: 0 15px;
   }
+
+  .importExamplesTitle {
+    margin: 0 0 6px 0;
+  }
+
+  .importExamples {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+  }
+
+  .importExecTitle {
+    margin-bottom: 6px;
+  }
+
   .pin-index {
     display: inline-block;
     width: 20px;

From 90d6a1a0c61b5ca0d37a9637ee3a650c6d0dc663 Mon Sep 17 00:00:00 2001
From: divadiow <divadiow@hotmail.com>
Date: Mon, 26 Jan 2026 07:31:42 +0000
Subject: [PATCH 19/24] Update filesystem.vue

---
 vue/filesystem.vue | 84 +++++++++++++++++++++++++++++++++++++++-------
 1 file changed, 72 insertions(+), 12 deletions(-)

diff --git a/vue/filesystem.vue b/vue/filesystem.vue
index 4a81a863..f687f1b9 100644
--- a/vue/filesystem.vue
+++ b/vue/filesystem.vue
@@ -10,18 +10,21 @@
             <li>Use <strong>Save, reset SVM, and run</strong> to test changes with a clean scripting state.</li>
         </ul>
         <p>You can access LittleFS files via <code>{{ deviceBase }}/api/lfs/&lt;filename&gt;</code>. For details, see the <a href="https://www.elektroda.com/rtvforum/topic3971355.html">OpenBeken/Tasmota REST tutorial</a>.</p>
-        <div class="top">
-            <button @click="backup(null, $event)">Read FS block</button>
-            <button @click="restore(null, $event)">Restore FS block</button>
-            <button @click="read(null, $event)">List filesystem</button>
-            <button @click="create(null, $event)">Create file</button>
-            <button @click="upload(null, $event, false)">Upload file(s)</button>
-            <button @click="upload(null, $event, true)">Upload as gzip (.gz)</button>
-            <button @click="showUrlModal = true">Fetch from URLs</button>
-            <button @click="resetSVM(null, $event)">Reset scripts</button>
-            <br/>
-            <button @click="getTar(null, $event)">Download filesystem backup (.tar)</button>
-
+                <div class="top toolbar">
+            <div class="toolbarRow">
+                <button @click="read(null, $event)">List filesystem</button>
+                <button @click="create(null, $event)">Create file</button>
+                <button @click="upload(null, $event, false)">Upload file(s)</button>
+                <button @click="upload(null, $event, true)">Upload as gzip (.gz)</button>
+                <button @click="showUrlModal = true">Fetch from URLs</button>
+                <button @click="getTar(null, $event)">Download filesystem backup (.tar)</button>
+            </div>
+            <div class="toolbarRow toolbarRowAdvanced">
+                <button @click="backup(null, $event)">Read FS block</button>
+                <button @click="restore(null, $event)">Restore FS block</button>
+                <button @click="resetSVM(null, $event)">Reset scripts</button>
+                <button class="danger" @click="formatLittleFS(null, $event)">Format LittleFS</button>
+            </div>
         </div>
         <div class="bottom">
 <div v-if="showUrlModal" style="position:fixed; top:20%; left:30%; width:40%; background:white; border:1px solid black; padding:1em; z-index:1000;">
@@ -502,6 +505,46 @@
                     });
             }
         },
+        formatLittleFS(cb, event) {
+            const r = confirm("Format LittleFS? This will permanently delete all files on the device.");
+            if (r === false) {
+                this.status += '<br/>LittleFS format canceled.';
+                return;
+            }
+
+            // Close the editor (the file may no longer exist after formatting)
+            this.edittext = '';
+            this.editname = '';
+            const lbl = document.getElementById('fileEditorLabel');
+            const body = document.getElementById('fileEditorBody');
+            if (lbl) lbl.innerHTML = 'File editor: select a file to begin.';
+            if (body) body.style.display = 'none';
+
+            this.status += '<br/>Formatting LittleFS...';
+            const url = window.device + '/api/cmnd';
+            const cmd = 'lfs_format';
+
+            fetch(url, {
+                body: cmd,
+                method: 'POST',
+            })
+                .then(response => response.text())
+                .then(text => {
+                    console.log('lfs_format response:', text);
+                    this.status += ' done.';
+                    if (cb) cb();
+
+                    // The format can take a moment; refresh the listing shortly afterwards.
+                    setTimeout(() => {
+                        this.read();
+                    }, 1500);
+                })
+                .catch(err => {
+                    console.error(err);
+                    this.status += '<br/>LittleFS format failed: ' + err;
+                });
+        },
+
         startScript_simple() {
             this.startScript(null,null,0);
         },
@@ -1091,6 +1134,23 @@
     .top {
         height:10%;
     }
+    .top.toolbar {
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+    }
+    .toolbarRow {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 6px;
+        align-items: center;
+    }
+    .toolbarRowAdvanced {
+        margin-top: 2px;
+    }
+    button.danger {
+        border-width: 2px;
+    }
     .bottom {
         height:90%;
         position: relative;

From eee8b817d075922a76a8b302212934faca0f926b Mon Sep 17 00:00:00 2001
From: divadiow <divadiow@hotmail.com>
Date: Wed, 28 Jan 2026 21:07:59 +0000
Subject: [PATCH 20/24] Update filesystem.vue

---
 vue/filesystem.vue | 336 +++++++++++++++++++++++++++++++++------------
 1 file changed, 249 insertions(+), 87 deletions(-)

diff --git a/vue/filesystem.vue b/vue/filesystem.vue
index f687f1b9..2e70e3ac 100644
--- a/vue/filesystem.vue
+++ b/vue/filesystem.vue
@@ -1,16 +1,22 @@
 <template>
     <div class="fill">
-        <p>This tab lets you browse and manage files stored on LittleFS:</p>
-        <ul>
-            <li><strong>List filesystem</strong> shows all files and folders on the device.</li>
-            <li>Click a filename to open it in the editor.</li>
-            <li><strong>Create file</strong> creates a new file on the device (for example, <code>autoexec.bat</code>).</li>
-            <li>You can also upload files by dragging and dropping them onto the drop area.</li>
-            <li><strong>Reset scripts</strong> stops all running script threads without rebooting the device.</li>
-            <li>Use <strong>Save, reset SVM, and run</strong> to test changes with a clean scripting state.</li>
-        </ul>
-        <p>You can access LittleFS files via <code>{{ deviceBase }}/api/lfs/&lt;filename&gt;</code>. For details, see the <a href="https://www.elektroda.com/rtvforum/topic3971355.html">OpenBeken/Tasmota REST tutorial</a>.</p>
-                <div class="top toolbar">
+        <div class="helpBox">
+            <div class="helpIntro">This tab lets you browse and manage files stored on LittleFS:</div>
+            <ul class="helpList">
+                <li><strong>List filesystem</strong> shows all files and folders on the device.</li>
+                <li>Click a filename to open it in the editor.</li>
+                <li><strong>Create file</strong> creates a new file on the device (for example, <code>autoexec.bat</code>).</li>
+                <li>You can also upload files by dragging and dropping them onto the drop area.</li>
+                <li><strong>Reset scripts</strong> stops all running script threads without rebooting the device.</li>
+                <li>Use <strong>Save, reset SVM, and run</strong> to test changes with a clean scripting state.</li>
+            </ul>
+            <div class="helpFooter">
+                LittleFS files can also be accessed via <code>{{ deviceBase }}/api/lfs/&lt;filename&gt;</code>.
+                For details, see the <a href="https://www.elektroda.com/rtvforum/topic3971355.html">OpenBeken/Tasmota REST tutorial</a>.
+            </div>
+        </div>
+
+<div class="top toolbar">
             <div class="toolbarRow">
                 <button @click="read(null, $event)">List filesystem</button>
                 <button @click="create(null, $event)">Create file</button>
@@ -27,16 +33,17 @@
             </div>
         </div>
         <div class="bottom">
-<div v-if="showUrlModal" style="position:fixed; top:20%; left:30%; width:40%; background:white; border:1px solid black; padding:1em; z-index:1000;">
-  <h3>Enter URLs (one per line)</h3>
-  The web app will download each URL and save the file to LittleFS.
-  <br>
-  <textarea v-model="urlInput" rows="10" style="width:100%"></textarea>
-  <br>
-  <label><input type="checkbox" v-model="urlGzip"> Compress using gzip (.gz)</label>
-  <br><br>
-  <button @click="fetchFromUrls">Fetch</button>
-  <button @click="showUrlModal = false">Cancel</button>
+<div v-if="showUrlModal" class="modalOverlay" @click.self="showUrlModal = false">
+    <div class="modal">
+        <h3>Fetch from URLs</h3>
+        <p class="modalHelp">The web app will download each URL and save the file to LittleFS.</p>
+        <textarea v-model="urlInput" rows="10"></textarea>
+        <label class="modalOption"><input type="checkbox" v-model="urlGzip"> Compress using gzip (.gz)</label>
+        <div class="modalActions">
+            <button @click="fetchFromUrls">Fetch</button>
+            <button @click="showUrlModal = false">Cancel</button>
+        </div>
+    </div>
 </div>
             <div class="left">
                 <div class="folderBox">
@@ -49,29 +56,31 @@
                 <div class="drop" @drop="dropHandler($event)" @dragover="dragOverHandler($event)">
                     <div class="otatext center" v-html="otatext"></div>
                 </div>
-                <div v-html="status"></div>
-                <div v-html="output"></div>
+                <div class="logText" v-html="status"></div>
+                <div class="logText" v-html="output"></div>
             </div>
             <div class="middle">
                 <div>
-                    <div v-for="file in files" v-bind:key="file.name">
-                        <span v-if="file.type === 1"><button @click="editfile(file.name)">{{file.name}}</button> - {{file.size}}</span>
-                        <br v-if="file.type === 1"/>
+                    <div v-for="file in files" v-bind:key="file.name" v-if="file.type === 1" class="fileRow">
+                        <button class="fileBtn" @click="editfile(file.name)">{{file.name}}</button>
+                        <span class="fileSize">- {{file.size}}</span>
                     </div>
                     <div v-if="files.length > 0">
-                    <strong>Total Size: {{ totalBytes }} bytes</strong>
+                        <strong>Total Size: {{ totalBytes }} bytes</strong>
                     </div>
                 </div>
             </div>
             <div class="right">
-                <h2 id="fileEditorLabel">File editor: select a file to begin.</h2>
-                <div id="fileEditorBody" style="display:none">
-                    <button @click="save(null, $event)">Save</button>
-                    <button @click="save(startScript_simple)">Save and run as script thread</button>
-                    <button @click="save(startScript_firstReset)">Save, reset SVM, and run as script thread</button>         
-                    <button @click="deleteFile(null, $event)">Delete</button>
-                    <button @click="openInBrowser(null, $event)">Open in browser</button>
-                    <textarea v-model="edittext" rows="40" cols="100" style="height:90%"></textarea>
+                <h2 id="fileEditorLabel">File editor: select or create a file to begin.</h2>
+                <div id="fileEditorBody" class="editorBody" style="display:none">
+                    <div class="editorActions">
+                        <button @click="save(null, $event)">Save</button>
+                        <button @click="save(startScript_simple)">Save and run as script thread</button>
+                        <button @click="save(startScript_firstReset)">Save, reset SVM, and run as script thread</button>
+                        <button @click="deleteFile(null, $event)">Delete</button>
+                        <button @click="openInBrowser(null, $event)">Open in browser</button>
+                    </div>
+                    <textarea v-model="edittext" rows="40" cols="100"></textarea>
                 </div>
             </div>
         </div>
@@ -430,7 +439,7 @@
                     this.edittext = text;
                     this.editname = name;
                     document.getElementById("fileEditorLabel").innerHTML = "Editing: "+name;
-                    document.getElementById("fileEditorBody").style.display = "block";
+                    document.getElementById("fileEditorBody").style.display = "flex";
                 });
         },
 
@@ -1068,30 +1077,124 @@
 </script>
 
 <style scoped>
-    .drop {
-        border: 4px solid #3b82f6;
-        background: #ffffff;
-        color: #1e40af;
-        margin-top: 20px;
-        margin-bottom: 20px;
-        width:  200px;
-        height: 100px;
-        text-align: center;
+    .fill {
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+        height: 100%;
+        min-height: 0;
+    }
+
+        /* Help text: always visible, but compact so actions stay near the top. */
+    .helpBox {
+        font-size: 0.85em;
+        line-height: 1.25em;
+        padding: 8px 10px;
+        border: 1px solid rgba(0, 0, 0, 0.12);
+        border-radius: 6px;
+        background: rgba(0, 0, 0, 0.02);
+    }
+    .helpIntro {
+        margin: 0 0 6px 0;
+        font-weight: 600;
+    }
+    .helpList {
+        margin: 0 0 6px 18px;
+        padding: 0;
+        columns: 2;
+        column-gap: 26px;
+    }
+    .helpList li {
+        break-inside: avoid;
+        margin: 0 0 2px 0;
+    }
+    .helpFooter {
+        margin: 0;
+    }
+
+
+    /* Action toolbar */
+    .top.toolbar {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+    }
+    .toolbarRow {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 6px;
+        align-items: center;
+    }
+    .toolbarRowAdvanced {
+        padding-top: 8px;
+        border-top: 1px solid rgba(0, 0, 0, 0.15);
+    }
+    button.danger {
+        border-width: 2px;
+    }
+
+    /* Main 3-column layout */
+    .bottom {
+        flex: 1 1 auto;
+        min-height: 0;
+        display: grid;
+        grid-template-columns: 300px 280px 1fr;
+        gap: 12px;
         position: relative;
-        vertical-align: center;
+        padding-top: 10px;
+        border-top: 1px solid rgba(0, 0, 0, 0.12);
+    }
+
+    .left,
+    .middle,
+    .right {
+        position: static;
+        width: auto;
+        height: auto;
+        min-height: 0;
+        overflow: auto;
+        box-sizing: border-box;
+    }
+
+    .left {
+        padding: 4px 8px 4px 0;
+    }
+    .middle {
+        padding: 4px 8px 4px 12px;
+        border-left: 1px solid rgba(0, 0, 0, 0.15);
+    }
+    .right {
+        padding: 4px 0 4px 12px;
+        border-left: 1px solid rgba(0, 0, 0, 0.15);
     }
 
+
+    /* Middle panel: file list spacing */
+    .fileRow {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        margin: 0 0 6px 0;
+        flex-wrap: wrap;
+    }
+    .fileBtn {
+        padding: 2px 6px;
+    }
+    .fileSize {
+        white-space: nowrap;
+    }
+
+
+    /* Left panel */
     .folderBox {
         margin: 0 0 10px 0;
-        width: 200px;
+        width: 100%;
     }
-
     .folderInput {
-        width: 200px;
+        width: 100%;
         box-sizing: border-box;
-        padding: 2px 4px;
+        padding: 4px 6px;
     }
-
     .folderHelp {
         margin-top: 4px;
         font-size: 0.9em;
@@ -1099,7 +1202,25 @@
         word-break: break-word;
     }
 
-    .otatext {
+    .logText {
+        font-size: 0.88em;
+        line-height: 1.25em;
+        word-break: break-word;
+    }
+
+
+    .drop {
+        border: 4px solid #3b82f6;
+        background: #ffffff;
+        color: #000000;
+        margin: 10px 0 10px 2px;
+        width: 240px;
+        max-width: 100%;
+        height: 120px;
+        text-align: center;
+        position: relative;
+        vertical-align: center;
+        box-sizing: border-box;
     }
     .center {
         margin: 0;
@@ -1110,49 +1231,90 @@
         transform: translate(-50%, -50%);
     }
 
-    .left {
-        position: absolute;
-        left:0;
-        width:30%;
-        height:100%;
-    }
-    .middle {
-        position: absolute;
-        left:30%;
-        width:20%;
-        height:100%;
-    }
-    .right {
-        position: absolute;
-        left:50%;
-        width:50%;
-        height:100%;
-    }
-    .fill {
-        height:90%;
+    /* Right panel: editor */
+    #fileEditorLabel {
+        margin: 0 0 8px 0;
+        font-size: 1.05em;
+        line-height: 1.25em;
     }
-    .top {
-        height:10%;
-    }
-    .top.toolbar {
-        display: flex;
+    .editorBody {
+        gap: 8px;
         flex-direction: column;
-        gap: 6px;
+        min-height: 0;
     }
-    .toolbarRow {
+    .editorActions {
         display: flex;
         flex-wrap: wrap;
         gap: 6px;
         align-items: center;
     }
-    .toolbarRowAdvanced {
-        margin-top: 2px;
+    .editorBody textarea {
+        width: 100%;
+        box-sizing: border-box;
+        flex: 1 1 auto;
+        min-height: 340px;
+        height: 100%;
     }
-    button.danger {
-        border-width: 2px;
+
+    /* Modal */
+    .modalOverlay {
+        position: fixed;
+        inset: 0;
+        background: rgba(0, 0, 0, 0.35);
+        z-index: 1000;
+        display: flex;
+        justify-content: center;
+        align-items: flex-start;
+        padding: 10vh 12px 12px 12px;
+        box-sizing: border-box;
     }
-    .bottom {
-        height:90%;
-        position: relative;
+    .modal {
+        background: #ffffff;
+        border: 1px solid rgba(0, 0, 0, 0.35);
+        padding: 12px;
+        width: min(720px, 92vw);
+        box-sizing: border-box;
+        border-radius: 6px;
+    }
+    .modal h3 {
+        margin: 0 0 8px 0;
+        font-size: 1.05em;
+    }
+    .modalHelp {
+        margin: 0 0 8px 0;
+    }
+    .modal textarea {
+        width: 100%;
+        box-sizing: border-box;
+    }
+    .modalOption {
+        display: inline-flex;
+        gap: 6px;
+        align-items: center;
+        margin-top: 8px;
+    }
+    .modalActions {
+        display: flex;
+        justify-content: flex-end;
+        gap: 6px;
+        margin-top: 10px;
+    }
+
+    /* Responsive: stack columns on narrower screens */
+    @media (max-width: 1000px) {
+        .bottom {
+            grid-template-columns: 1fr;
+        }
+        .helpList {
+            columns: 1;
+        }
+        .left,
+        .middle,
+        .right {
+            overflow: visible;
+        }
+        .editorBody textarea {
+            min-height: 260px;
+        }
     }
-</style>
+</style>
\ No newline at end of file

From 168a8c72ed7b8098199a12c5bad6e53d472d7b5e Mon Sep 17 00:00:00 2001
From: divadiow <divadiow@hotmail.com>
Date: Thu, 29 Jan 2026 06:49:02 +0000
Subject: [PATCH 21/24] Update filesystem.vue

---
 vue/filesystem.vue | 82 +++++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 77 insertions(+), 5 deletions(-)

diff --git a/vue/filesystem.vue b/vue/filesystem.vue
index 2e70e3ac..9cd82ec0 100644
--- a/vue/filesystem.vue
+++ b/vue/filesystem.vue
@@ -30,6 +30,7 @@
                 <button @click="restore(null, $event)">Restore FS block</button>
                 <button @click="resetSVM(null, $event)">Reset scripts</button>
                 <button class="danger" @click="formatLittleFS(null, $event)">Format LittleFS</button>
+                <button class="danger" @click="resizeLittleFS(null, $event)">Resize LittleFS</button>
             </div>
         </div>
         <div class="bottom">
@@ -407,7 +408,7 @@
         },
         read(cb) {
             this.files = [];
-            this.readFolder('/');
+            this.readFolder('/', cb);
         },
 
 
@@ -553,6 +554,77 @@
                     this.status += '<br/>LittleFS format failed: ' + err;
                 });
         },
+        resizeLittleFS(cb, event) {
+            const input = prompt(
+                "Enter new LittleFS size in bytes (hex like 0x10000 or decimal like 65536):",
+                "0x10000"
+            );
+
+            if (input === null) {
+                this.status += '<br/>LittleFS resize canceled.';
+                return;
+            }
+
+            const raw = input.trim();
+            if (!raw) {
+                alert("Size cannot be empty.");
+                return;
+            }
+
+            // Accept hex (0x...) or decimal
+            let sizeVal = null;
+            if (/^0x[0-9a-fA-F]+$/.test(raw)) {
+                sizeVal = parseInt(raw, 16);
+            } else if (/^[0-9]+$/.test(raw)) {
+                sizeVal = parseInt(raw, 10);
+            } else {
+                alert("Invalid size. Use hex like 0x10000 or decimal like 65536.");
+                return;
+            }
+
+            if (!Number.isFinite(sizeVal) || sizeVal <= 0) {
+                alert("Size must be a positive number.");
+                return;
+            }
+
+            // Normalise to hex for the command (matches your example)
+            const sizeHex = '0x' + sizeVal.toString(16);
+
+            const ok = confirm(
+                `Resize LittleFS to ${sizeHex} (${sizeVal} bytes)?\n\nThis will erase existing files. Reboot to apply.`
+            );
+            if (!ok) {
+                this.status += '<br/>LittleFS resize canceled.';
+                return;
+            }
+
+            // Safer UX: close editor (resizing can invalidate files)
+            this.edittext = '';
+            this.editname = '';
+            const lbl = document.getElementById('fileEditorLabel');
+            const body = document.getElementById('fileEditorBody');
+            if (lbl) lbl.innerHTML = 'File editor: select a file to begin.';
+            if (body) body.style.display = 'none';
+
+            this.status += `<br/>Resizing LittleFS to ${sizeHex}...`;
+            const url = window.device + '/api/cmnd';
+            const cmd = `lfs_size ${sizeHex}`;
+
+            fetch(url, { body: cmd, method: 'POST' })
+                .then(r => r.text())
+                .then(text => {
+                    console.log('lfs_size response:', text);
+                    this.status += ' done.';
+                    if (cb) cb();
+
+                    // Give the device a moment, then refresh file list
+                    setTimeout(() => this.read(), 1500);
+                })
+                .catch(err => {
+                    console.error(err);
+                    this.status += '<br/>LittleFS resize failed: ' + err;
+                });
+        },
 
         startScript_simple() {
             this.startScript(null,null,0);
@@ -1126,8 +1198,8 @@
         align-items: center;
     }
     .toolbarRowAdvanced {
-        padding-top: 8px;
-        border-top: 1px solid rgba(0, 0, 0, 0.15);
+        padding-top: none;
+        border-top: none;
     }
     button.danger {
         border-width: 2px;
@@ -1161,11 +1233,11 @@
     }
     .middle {
         padding: 4px 8px 4px 12px;
-        border-left: 1px solid rgba(0, 0, 0, 0.15);
+        border-left: none;
     }
     .right {
         padding: 4px 0 4px 12px;
-        border-left: 1px solid rgba(0, 0, 0, 0.15);
+        border-left: none;
     }
 
 

From 3d5090cf570936df2b5b562e22869b1005ed36f5 Mon Sep 17 00:00:00 2001
From: divadiow <divadiow@hotmail.com>
Date: Thu, 29 Jan 2026 20:21:34 +0000
Subject: [PATCH 22/24] Update filesystem.vue

---
 vue/filesystem.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/vue/filesystem.vue b/vue/filesystem.vue
index 9cd82ec0..340efd66 100644
--- a/vue/filesystem.vue
+++ b/vue/filesystem.vue
@@ -1198,7 +1198,7 @@
         align-items: center;
     }
     .toolbarRowAdvanced {
-        padding-top: none;
+        padding-top: 0;
         border-top: none;
     }
     button.danger {

From a850ffae32e39022a92dac6e5a8330ad8023f237 Mon Sep 17 00:00:00 2001
From: divadiow <divadiow@hotmail.com>
Date: Mon, 9 Feb 2026 16:06:48 +0000
Subject: [PATCH 23/24] updates

---
 vue/gpioDoctor.vue | 251 ++++++++++++---
 vue/import.vue     | 759 +++++++++++++++++++++++++++++++++------------
 vue/info.vue       | 178 +++++++++--
 3 files changed, 928 insertions(+), 260 deletions(-)

diff --git a/vue/gpioDoctor.vue b/vue/gpioDoctor.vue
index 3212bd1e..9f27b1df 100644
--- a/vue/gpioDoctor.vue
+++ b/vue/gpioDoctor.vue
@@ -1,7 +1,6 @@
 <template>
   <div class="container">
-    <div class="item" style="max-width: 300px;">
-      <h4>GPIO Doctor</h4>
+    <div class="item infoPanel">
       <p>Use this tool to identify GPIO roles on an unknown device. Before you start, check <a href="https://www.youtube.com/watch?v=VDbaLR_0YWs">Templates</a> first; there may already be a template for your device.</p>
 
       <h4>Warning</h4>
@@ -9,42 +8,59 @@
 
       <h4>How to use: finding outputs</h4>
       <p>To find relays, LEDs, or PWM outputs, use the “Set Output High” / “Set Output Low” button for each pin and observe what changes. This can also help with PWM outputs, because the “Relay” role can drive a PWM channel by toggling it between 100% and 0% duty cycle.</p>
- 
+
       <h4>How to use: finding inputs</h4>
       <p>To find inputs (including buttons), first click “Set Input (pull-up)”, which is the most common option. Then press and hold the button briefly and check whether the state changes (High/Low). If it does, you have likely found your button. In rarer cases, you may also want to try “Set Input (no pull-up)” (for example, some door sensors).</p>
- 
+
       <h4>How to use: final steps</h4>
       <p>Changes you make here are saved automatically. Once you have identified the required pins, clear any unused roles and keep only the roles you intend to use.</p>
- 
     </div>
-    <div class="item" style="max-width: 550px;">
-    
-      <h4>GPIO Doctor Pins</h4> 
-      <div v-for="(role, index) in pins.roles" :key="index">
-        <span class="pin-index">P{{index}} ({{getPinAlias(index)}})</span>
-        <select v-model="pins.roles[index]"  @change="onPinChange(index)">
-          <option v-for="(name, index2) in pins.rolenames" :value="index2" :key="index2" :selected="(role == index2)">{{name}}</option>
-        </select>
-       Ch: <input type="number" min="0" max="64" step="1" v-model="pins.channels[index]" @change="onChannelChange(index)">
-       Val:
-        <span class="pin-value" :style="{ fontWeight: pins.states[index] ? 'bold' : 'bold', color: pins.states[index] ? 'green' : 'red' }">{{pins.states[index] ? 'High' : 'Low'}}</span>
-        <br>
-        Tools: <button @click="toggle(index)" :class="pins.states[index] ? 'button-green' : 'button-red'">
-         {{ pins.states[index] ? 'Set Output Low' : 'Set Output High' }}
-         </button>
-        <button @click="setInput(index,'dInput')">Set Input P-up</button>
-        <button @click="setInput(index,'dInput_NoPullUp')">Set Input (no P-up)</button>
-        <button @click="clearPin(index)">Clear</button>
-        <hr>
+
+    <div class="item pinsPanel" :style="pinsCssVars">
+
+      <div class="pinHeader">
+        <div>Pin</div>
+        <div>Role</div>
+        <div class="rightHeader">
+          <div>Ch</div>
+        </div>
       </div>
 
+      <div v-for="(role, index) in pins.roles" :key="index" class="pinRow">
+        <div class="cellPin">
+          <span class="pin-index">P{{index}}</span>
+          <span class="pin-alias">({{getPinAlias(index)}})</span>
+        </div>
 
+        <div class="cellRole">
+          <select class="roleSelect" v-model="pins.roles[index]" @change="onPinChange(index)">
+            <option v-for="(name, index2) in pins.rolenames" :value="index2" :key="index2">{{name}}</option>
+          </select>
+        </div>
+
+        <div class="cellRight rightGroup">
+          <input class="chInput" type="number" min="0" max="64" step="1" v-model="pins.channels[index]" @change="onChannelChange(index)">
+          <span class="valBadge" :data-state="pins.states[index] ? 'high' : 'low'">{{pins.states[index] ? 'High' : 'Low'}}</span>
+        </div>
+
+        <div class="cellToolsLeft">
+          <button @click="toggle(index)" :class="pins.states[index] ? 'button-green' : 'button-red'">
+            {{ pins.states[index] ? 'Set Output Low' : 'Set Output High' }}
+          </button>
+          <button @click="setInput(index,'dInput')">Set Input P-up</button>
+        </div>
+
+        <div class="cellToolsRight">
+          <button @click="setInput(index,'dInput_NoPullUp')">Set Input (no P-up)</button>
+          <button @click="clearPin(index)">Clear</button>
+        </div>
+      </div>
     </div>
-   </div>
+  </div>
 </template>
 
 <script>
-  module.exports = {
+module.exports = {
 
     data: ()=>{
       return {
@@ -201,6 +217,24 @@
               }); // Never forget the final catch!
         }
     },
+    computed:{
+      roleMaxCh(){
+        const names = (this.pins && this.pins.rolenames) ? this.pins.rolenames : [];
+        let maxLen = 0;
+        for(let i = 0; i < names.length; i++){
+          const s = names[i];
+          if(s && s.length > maxLen) maxLen = s.length;
+        }
+        // Extra space for dropdown chrome and padding
+        let ch = maxLen + 6;
+        if(ch < 18) ch = 18;
+        if(ch > 48) ch = 48;
+        return ch;
+      },
+      pinsCssVars(){
+        return { '--roleW': this.roleMaxCh + 'ch' };
+      }
+    },
     mounted (){
         this.msg = 'fred';
 
@@ -224,18 +258,140 @@
     font-family: 'Courier New', Courier, monospace;
     font-size: 14px;
 }
-  .container {
-    display: flex;
-    justify-content: center;
-  }
 
-  .item {
-    padding: 0 15px;
-  }
-  .pin-index {
-    display: inline-block;
-  }
-  .button-green {
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 28px;
+  flex-wrap: wrap;
+  margin-top: 18px;
+}
+
+.item {
+  padding: 0 15px;
+}
+
+/* Left info panel */
+.infoPanel {
+  flex: 0 0 300px;
+  max-width: 360px;
+}
+
+/* Right pins panel */
+.pinsPanel {
+  flex: 1 1 720px;
+  max-width: 920px;
+  min-width: 520px;
+  /* Role column target width (computed via pinsCssVars) */
+  --roleW: 28ch;
+}
+
+.pinHeader{
+  display: grid;
+  grid-template-columns: 150px minmax(18ch, var(--roleW)) 1fr;
+  column-gap: 12px;
+  padding: 6px 10px;
+  font-weight: 600;
+  opacity: 0.85;
+  border-bottom: 1px solid rgba(0,0,0,0.12);
+  margin-bottom: 6px;
+  align-items: end;
+}
+
+.rightHeader{
+  display: grid;
+  grid-template-columns: 5ch max-content;
+  column-gap: 12px;
+  justify-content: start;
+}
+
+.pinRow{
+  display: grid;
+  grid-template-columns: 150px minmax(18ch, var(--roleW)) 1fr;
+  grid-template-areas:
+    "pin role right"
+    ".  toolsL toolsR";
+  column-gap: 12px;
+  row-gap: 6px;
+  padding: 8px 10px;
+  border-bottom: 1px solid rgba(0,0,0,0.08);
+  align-items: center;
+}
+
+.cellPin{ grid-area: pin; white-space: nowrap; }
+.cellRole{ grid-area: role; min-width: 0; }
+.cellRight{ grid-area: right; }
+.cellToolsLeft{ grid-area: toolsL; }
+.cellToolsRight{ grid-area: toolsR; }
+
+.pin-index{ font-weight: 600; }
+.pin-alias{ opacity: 0.7; margin-left: 6px; }
+
+.roleSelect{
+  width: 100%;
+  max-width: 100%;
+  box-sizing: border-box;
+}
+
+.rightGroup{
+  display: grid;
+  grid-template-columns: 5ch max-content;
+  column-gap: 12px;
+  align-items: center;
+  justify-content: start;
+}
+
+.chInput{
+  width: 100%;
+  box-sizing: border-box;
+  text-align: center;
+}
+
+/* Hide number spinners to avoid cramped/clipped look at small widths */
+.chInput::-webkit-outer-spin-button,
+.chInput::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+.chInput[type=number] {
+  -moz-appearance: textfield;
+}
+
+/* Keep classic/simple control feel but with consistent sizing */
+select, input, button{
+  font-size: 13px;
+}
+
+select, input{
+  padding: 4px 6px;
+}
+
+button{
+  padding: 3px 10px;
+}
+
+/* Tool button rows */
+.cellToolsLeft,
+.cellToolsRight{
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+}
+
+.valBadge{
+  display: inline-block;
+  padding: 3px 10px;
+  border-radius: 999px;
+  font-weight: 600;
+  border: 1px solid rgba(0,0,0,0.15);
+}
+
+.valBadge[data-state="high"]{ background: rgba(46,125,50,0.12); color: #1b5e20; }
+.valBadge[data-state="low"] { background: rgba(229,57,53,0.12); color: #b71c1c; }
+
+.button-green {
   background-color: green;
   color: white;
 }
@@ -244,4 +400,25 @@
   background-color: red;
   color: white;
 }
+
+@media (max-width: 900px){
+  .pinsPanel{
+    min-width: 0;
+    max-width: 100%;
+  }
+  .pinHeader{
+    display: none;
+  }
+  .pinRow{
+    grid-template-columns: 1fr;
+    grid-template-areas:
+      "pin"
+      "role"
+      "right"
+      "toolsL"
+      "toolsR";
+  }
+  .cellPin{ margin-bottom: 2px; }
+}
 </style>
+
diff --git a/vue/import.vue b/vue/import.vue
index a1ec71cf..ff14025b 100644
--- a/vue/import.vue
+++ b/vue/import.vue
@@ -1,112 +1,180 @@
-
 <template>
   <div class="importPage">
-        <p class="importIntro">You can import configuration from an OpenBeken template or a Cloudcutter profile. Applying the import overwrites your current pin/channel assignments and startup command, and it clears LittleFS (including <code>autoexec.bat</code>).</p>
-    <div class="importContainer">
-      <div class="importItem"  style="width: 300px;">
-        <h3>1. Input</h3>
-        <p>Paste an <a href="https://openbekeniot.github.io/webapp/devicesList.html">OpenBeken template</a> or Cloudcutter JSON. Cloudcutter device profiles are available <a href="https://github.com/tuya-cloudcutter/tuya-cloudcutter.github.io/tree/master/devices">here</a>. Drag and drop files onto the input box below.</p>
-        <div class="importNote"><b>New:</b> You can also drag and drop a 2MB full device dump or Tuya config partition file to extract keys and JSON configuration automatically.</div>
-        <textarea id="importTemplate" 
-        placeholder="Paste an OpenBeken template or Cloudcutter JSON here, a Tuya config partition, or drop a 2MB .bin firmware dump onto this box." style="vertical-align: top; width: 280px; height:500px" @input="handleImportTemplateChange" v-model="importTemplateText"></textarea>
-       <br/>
-               <br>
-       <details class="importExamplesBox">
-
-         <summary>Examples</summary>
-
-         <div class="importExamples">
-<button @click="loadDemo('https://raw.githubusercontent.com/tuya-cloudcutter/tuya-cloudcutter.github.io/a8a6539aad21a03d5db41e4d27e9d5516c62fe23/devices/lenovo-se-242dc-rgbct-bulb-v1.2.21.json')">RGBCW LED</button>
-         <button @click="loadDemo('https://raw.githubusercontent.com/tuya-cloudcutter/tuya-cloudcutter.github.io/a8a6539aad21a03d5db41e4d27e9d5516c62fe23/devices/nous-p4-e14-rgbct-bulb.json')">BP5758 LED</button>
-         <button @click="loadDemo('https://raw.githubusercontent.com/tuya-cloudcutter/tuya-cloudcutter.github.io/b04e860fe0bb1c8bed417ab36c57e6759ec08510/devices/spectrum-woj14415-rgbct-gu10-bulb.json')">SM2135 LED</button>
-          <button @click="loadDemo('https://raw.githubusercontent.com/tuya-cloudcutter/tuya-cloudcutter.github.io/a8a6539aad21a03d5db41e4d27e9d5516c62fe23/devices/pegant-pg3451-3-outlet-power-strip.json')">Triple socket + USB</button>
-          <button @click="loadDemo('https://raw.githubusercontent.com/tuya-cloudcutter/tuya-cloudcutter.github.io/b04e860fe0bb1c8bed417ab36c57e6759ec08510/devices/tuya-generic-rr620w-jl-smart-switch.json')">BL0942 plug</button>
-          <button @click="loadDemo('https://raw.githubusercontent.com/tuya-cloudcutter/tuya-cloudcutter.github.io/43a341ef1dd8eec8514e1d435563bd9008ff2835/devices/hombli-hbss-0209-smart-socket-b2030248-energy-plug.json')">BL0937 plug</button>
-          <button @click="loadDemo('https://raw.githubusercontent.com/tuya-cloudcutter/tuya-cloudcutter.github.io/a8a6539aad21a03d5db41e4d27e9d5516c62fe23/devices/athom-garage-door-opener.json')">Garage switch</button>
-          <button @click="loadDemo('https://raw.githubusercontent.com/tuya-cloudcutter/tuya-cloudcutter.github.io/a8a6539aad21a03d5db41e4d27e9d5516c62fe23/devices/aldi-casalux-wifi-led-rgb-light-strip.json')">RGB LED</button>
-
-         </div>
-
-       </details>
-      </div>
-
-      <div class="importItem" style="width: 300px;">
-        <h3>2. Review the Generated Script</h3>
-               <br>
-        <p id ="generateTextID" v-text="generateText"></p>
-        <textarea id="generatedScriptField" placeholder="OpenBeken configuration script will appear here" style="vertical-align: top; width: 280px; height:500px"  v-model="generatedScriptText"></textarea>
-       <br>
+    <p class="importIntro">
+      You can import configuration from an OpenBeken template or a Cloudcutter profile. Applying the import overwrites your current
+      pin/channel assignments and startup command, and it clears LittleFS (including <code>autoexec.bat</code>).
+    </p>
+
+    <div class="importLayout">
+      <div class="importTopGrid">
+        <!-- 1. INPUT -->
+        <section class="importCard importCard--top" aria-labelledby="importStep1Title">
+          <div class="importCardHeader">
+            <div class="importStepBadge" aria-hidden="true">1</div>
+            <h3 id="importStep1Title" class="importCardTitle">Input</h3>
+          </div>
+
+          <div class="importCardBody importCardBody--top">
+            <div class="importTopText">
+              <p class="importBodyText">
+                Paste an <a href="https://openbekeniot.github.io/webapp/devicesList.html">OpenBeken template</a> or Cloudcutter JSON.
+                Cloudcutter device profiles are <a href="https://github.com/tuya-cloudcutter/tuya-cloudcutter.github.io/tree/master/devices">here</a>. Drag &amp; drop also works.
+              </p>
+            </div>
+
+            <div class="importMainPane">
+              <textarea
+                id="importTemplate"
+                class="importTextarea importTextarea--mono"
+                placeholder="Paste an OpenBeken template or Cloudcutter JSON here, a Tuya config partition, or drop a 2MB .bin firmware dump onto this box."
+                @input="handleImportTemplateChange"
+                v-model="importTemplateText"
+              ></textarea>
+            </div>
+
+            <div class="importBottomPane">
+              <div class="importNote">
+                <b>New:</b> You can also drop a 2MB full device dump or Tuya config partition file to extract keys and JSON configuration automatically.
+              </div>
+
+              <details class="importExamplesBox">
+                <summary>Examples</summary>
+                <div class="importExamples">
+                  <button class="importChip" type="button" @click="loadDemo('https://raw.githubusercontent.com/tuya-cloudcutter/tuya-cloudcutter.github.io/a8a6539aad21a03d5db41e4d27e9d5516c62fe23/devices/lenovo-se-242dc-rgbct-bulb-v1.2.21.json')">RGBCW LED</button>
+                  <button class="importChip" type="button" @click="loadDemo('https://raw.githubusercontent.com/tuya-cloudcutter/tuya-cloudcutter.github.io/a8a6539aad21a03d5db41e4d27e9d5516c62fe23/devices/nous-p4-e14-rgbct-bulb.json')">BP5758 LED</button>
+                  <button class="importChip" type="button" @click="loadDemo('https://raw.githubusercontent.com/tuya-cloudcutter/tuya-cloudcutter.github.io/b04e860fe0bb1c8bed417ab36c57e6759ec08510/devices/spectrum-woj14415-rgbct-gu10-bulb.json')">SM2135 LED</button>
+                  <button class="importChip" type="button" @click="loadDemo('https://raw.githubusercontent.com/tuya-cloudcutter/tuya-cloudcutter.github.io/a8a6539aad21a03d5db41e4d27e9d5516c62fe23/devices/pegant-pg3451-3-outlet-power-strip.json')">Triple socket + USB</button>
+                  <button class="importChip" type="button" @click="loadDemo('https://raw.githubusercontent.com/tuya-cloudcutter/tuya-cloudcutter.github.io/b04e860fe0bb1c8bed417ab36c57e6759ec08510/devices/tuya-generic-rr620w-jl-smart-switch.json')">BL0942 plug</button>
+                  <button class="importChip" type="button" @click="loadDemo('https://raw.githubusercontent.com/tuya-cloudcutter/tuya-cloudcutter.github.io/43a341ef1dd8eec8514e1d435563bd9008ff2835/devices/hombli-hbss-0209-smart-socket-b2030248-energy-plug.json')">BL0937 plug</button>
+                  <button class="importChip" type="button" @click="loadDemo('https://raw.githubusercontent.com/tuya-cloudcutter/tuya-cloudcutter.github.io/a8a6539aad21a03d5db41e4d27e9d5516c62fe23/devices/athom-garage-door-opener.json')">Garage switch</button>
+                  <button class="importChip" type="button" @click="loadDemo('https://raw.githubusercontent.com/tuya-cloudcutter/tuya-cloudcutter.github.io/a8a6539aad21a03d5db41e4d27e9d5516c62fe23/devices/aldi-casalux-wifi-led-rgb-light-strip.json')">RGB LED</button>
+                </div>
+              </details>
+            </div>
+          </div>
+        </section>
+
+        <!-- 2. REVIEW -->
+        <section class="importCard importCard--top" aria-labelledby="importStep2Title">
+          <div class="importCardHeader">
+            <div class="importStepBadge" aria-hidden="true">2</div>
+            <h3 id="importStep2Title" class="importCardTitle">Review</h3>
+          </div>
+
+          <div class="importCardBody importCardBody--top">
+            <div class="importTopText">
+              <p id="generateTextID" class="importBodyText">OpenBeken configuration script:</p>
+              <p id="generateStatusID" class="importStatusLine"></p>
+            </div>
+
+            <div class="importMainPane">
+              <textarea
+                id="generatedScriptField"
+                class="importTextarea importTextarea--mono"
+                placeholder="OpenBeken configuration script will appear here"
+                v-model="generatedScriptText"
+              ></textarea>
+            </div>
+
+            <div class="importBottomPane">
+              <div class="importHint">Tip: you can edit the generated script before applying it.</div>
+            </div>
+          </div>
+        </section>
+
+        <!-- 3. APPLY -->
+        <section class="importCard importCard--top" aria-labelledby="importStep3Title">
+          <div class="importCardHeader">
+            <div class="importStepBadge" aria-hidden="true">3</div>
+            <h3 id="importStep3Title" class="importCardTitle">Apply</h3>
+          </div>
+
+          <div class="importCardBody importCardBody--top">
+            <div class="importTopText importTopText--apply">
+              <p class="importBodyText">When you are satisfied with the script, click Apply to update the device.</p>
+
+              <div class="importApplyActionRow">
+                <button class="importBtn importBtn--primary importBtn--slim" type="button" @click="applyScript()">
+                  Apply script (clears current configuration)
+                </button>
+              </div>
+            </div>
+
+            <div class="importMainPane importMainPane--apply">
+              <div class="importStatusBlock">
+                <div class="importPlaceholderLabel">Apply status</div>
+                <p id="progressTextID" class="importStatusLine importStatusLine--mono"></p>
+              </div>
+            </div>
+
+            <div class="importBottomPane"></div>
+          </div>
+        </section>
       </div>
 
-      <div class="importItem" style="width: 300px;">
-      <h3>3. Apply the Script to the Device</h3>
-      <p>Once you are satisfied with the script, click Apply to update the device.</p>
-               <br>
-       <button @click="applyScript()">Apply script (clears current configuration)</button>
-       <br>
-       <br>
-       <div class="importExecTitle">Apply Status:</div>
-        <p id ="progressTextID" v-text="progressText"> </p>
-      </div>
-      
-      <div class="importItem" style="width: 300px;">
-        <h3>4. Processing Log</h3>
-         <p class="importLogHelp">Shows progress, successes, and errors while processing dropped files and extracting Tuya configuration data.</p>
-         <br>
-         <div id="debugLog" style="width: 280px; height: 500px; border: 1px solid #999; overflow-y: scroll; padding: 5px; background: white; white-space: pre-wrap;" v-html="logHtml"></div>
-         <button @click="clearLog()">Clear Log</button>
-       </div>
+      <!-- PROCESSING LOG (FULL WIDTH) -->
+      <section class="importCard importCard--log" aria-labelledby="importLogTitle">
+        <div class="importCardHeader importCardHeader--log">
+          <h3 id="importLogTitle" class="importCardTitle">Processing log</h3>
+          <button class="importBtn importBtn--secondary importBtn--compact" type="button" @click="clearLog()">Clear log</button>
+        </div>
+
+        <div class="importCardBody importCardBody--log">
+          <p class="importBodyText importLogHelp">
+            Shows progress, successes, and errors while processing dropped files and extracting Tuya configuration data.
+          </p>
+
+          <div id="debugLog" class="importLogBox" v-html="logHtml"></div>
+        </div>
+      </section>
     </div>
   </div>
 </template>
 
-
-
 <script>
   module.exports = {
     components: {
       'import': window.getComponent('import')
     },
-    data: ()=>{
+    data: ()=> {
       return {
-        generateText:"",
+        generateText: "",
         importTemplateText: "",
         generatedScriptText: "",
         progressText: "",
-        generateTextElem:undefined,
-        progressTextElem:undefined,
+        generateTextElem: undefined,
+        generateStatusElem: undefined,
+        progressTextElem: undefined,
         logHtml: "",
       }
     },
-    methods:{
+    methods: {
       log(msg, type = 'info') {
           let color = 'black';
           if(type === 'error') color = 'red';
           if(type === 'warning') color = 'orange';
           if(type === 'success') color = 'green';
           if(type === 'info') color = 'blue';
-          
+
           const time = new Date().toLocaleTimeString();
           const html = `<div style="color:${color}">[${time}] ${msg}</div>`;
           this.logHtml += html;
-          
+
           this.$nextTick(() => {
              const elem = document.getElementById('debugLog');
              if(elem) elem.scrollTop = elem.scrollHeight;
           });
           console.log(`[${type}] ${msg}`);
       },
-      clearLog(){
+      clearLog() {
         this.logHtml = "";
       },
-      getinfo(){
-       
+      getinfo() {
 
       },
-      onSendFailed(response,line) {
-        //alert('Send failed!');
+      onSendFailed(response, line) {
         if(response.status == 501 || response.status == 400) {
-           this.progressTextElem.innerHTML += "<span style='color:red;'>Failed: invalid command \""+line+"\".</span>";
+           this.progressTextElem.innerHTML += "<span style='color:red;'>Failed: invalid command \"" + line + "\".</span>";
         } else {
            this.progressTextElem.innerHTML += "<span style='color:red;'>Failed. Check your network connection and try again.</span>";
         }
@@ -114,104 +182,95 @@
       async sendLines(lines) {
         this.progressTextElem.innerHTML = "Sending...";
         let idx = 0;
-      for (let line of lines) {
-        let dbg = "";
-        if(false){
-          dbg = " ("+line+")";
+        for (let line of lines) {
+          line = line.trim();
+          if(line.length < 1) { idx++; continue; }
+          if(line.length >= 2 && line[0] == '/' && line[1] == '/') { idx++; continue; }
+
+          let dbg = "";
+          if(false){
+            dbg = " (" + line + ")";
+          }
+          this.progressTextElem.innerHTML += " Sending " + idx + " of " + lines.length + dbg + "...";
+          await this.sendLine(line, this.onSendFailed);
+          idx++;
         }
-        this.progressTextElem.innerHTML += " Sending "+idx+" of "+lines.length+dbg+"...";
-        await this.sendLine(line,this.onSendFailed);
-        idx++;
-      }
         this.progressTextElem.innerHTML += "<span style='color:green;'> Completed.</span>";
         this.progressTextElem.innerHTML += "<span style='color:green;'> Restart the device if required.</span>";
-    },
-    async sendLine(line, errorHandler) {
-      line = line.trim();
-        if(line.length < 2)
-          return;
-        if(line[0]=='/' && line[1] == '/')
-            return;
-      console.log("sending line: " + line);
-      let url = window.device+'/api/cmnd';
-      return new Promise((resolve, reject) => {
-        // Replace the URL and request options with your own
-        fetch(url, {
-          method: "POST",
-          body: line 
-        })
-        .then(response => {
-          if (!response.ok) {
-           errorHandler(response,line);
-            throw new Error("Failed to send line "+line + " with error " + response.status);
-          }
-          resolve();
-        })
-        .catch(error => {
-          reject(error);
+      },
+      async sendLine(line, errorHandler) {
+        line = line.trim();
+        if(line.length < 1) return;
+
+        console.log("sending line: " + line);
+        let url = window.device + '/api/cmnd';
+        return new Promise((resolve, reject) => {
+          fetch(url, {
+            method: "POST",
+            body: line
+          })
+          .then(response => {
+            if (!response.ok) {
+              errorHandler(response, line);
+              throw new Error("Failed to send line " + line + " with error " + response.status);
+            }
+            resolve();
+          })
+          .catch(error => {
+            reject(error);
+          });
         });
-      });
-    },
+      },
       applyScript() {
-
         const lines = this.generatedScriptText.split("\n");
-
-       // lines.unshift("ClearIO");
-        for (let i = 0; i < lines.length; i++) {
-          const line = lines[i];
-         // alert("line " +line);
-        }
         this.sendLines(lines);
       },
-      setImportSrc(txt){
-        //alert(txt);
-        this.importTemplateText  = txt;
-       this.refreshTemplateImport();
+      setImportSrc(txt) {
+        this.importTemplateText = txt;
+        this.refreshTemplateImport();
       },
       loadDemo(url) {
-            fetch(url)
-                .then(response => response.text())
-                .then(res => {
-                  this.setImportSrc(res);
-                })
-                .catch(err => {
-                    this.error = err.toString();
-                    console.error(err)
-                }); // Never forget the final catch!
+        fetch(url)
+          .then(response => response.text())
+          .then(res => {
+            this.setImportSrc(res);
+          })
+          .catch(err => {
+            this.error = err.toString();
+            console.error(err)
+          });
       },
-    handleImportTemplateChange(event) {
-      console.log("Import template changed!");
-       this.clearLog();
-       this.refreshTemplateImport();
-    },
-    refreshTemplateImport() {
-       let res;
-       if(processJSON==undefined){
-           this.generateTextElem.innerHTML = "<span style='color:red;'>Template parser is not loaded yet.</span>";
+      handleImportTemplateChange(event) {
+        console.log("Import template changed!");
+        this.clearLog();
+        this.refreshTemplateImport();
+      },
+      refreshTemplateImport() {
+        let res;
+        if(processJSON == undefined){
+          if(this.generateStatusElem) this.generateStatusElem.innerHTML = "<span style='color:red;'>Template parser is not loaded yet.</span>";
+          return;
+        }
+        let jsonText = (this.importTemplateText || "").trim();
+        if(jsonText.length < 1) {
+          if(this.generateStatusElem) this.generateStatusElem.innerHTML = "<span style='color:orange;'>No input provided.</span>";
           return;
-       }
-       let jsonText = this.importTemplateText;
-       jsonText = jsonText.trim();
-       if(jsonText.length < 1) {
-           this.generateTextElem.innerHTML = "<span style='color:yellow;'>No input provided.</span>";
+        }
+        try {
+          res = processJSON(jsonText);
+        } catch (error) {
+          if(this.generateStatusElem) this.generateStatusElem.innerHTML = "<span style='color:red;'>Failed: " + error + ".</span>";
           return;
-       }
-       try {
-           res = processJSON(jsonText);
-       } catch (error) {
-           this.generateTextElem.innerHTML = "<span style='color:red;'>Failed: "+error+".</span>";
-           return;
-       }
+        }
         this.generatedScriptText  = "";
-         this.generatedScriptText  +=  "ClearIO // clear old GPIO/channels"+"\n";
-         this.generatedScriptText  +=  "lfs_format // clear LittleFS"+"\n";
-         this.generatedScriptText  +=  "StartupCommand \"\"  // clear STARTUP"+"\n";
-         this.generatedScriptText  +=  "stopDriver *  // stop drivers"+"\n";
-         this.generatedScriptText  += res.scr;
-           this.generateTextElem.innerHTML = "<span style='color:green;'>OK. Script generated.</span>";
-        
-    },
-      
+        this.generatedScriptText += "ClearIO // clear old GPIO/channels\n";
+        this.generatedScriptText += "lfs_format // clear LittleFS\n";
+        this.generatedScriptText += "StartupCommand \"\"  // clear STARTUP\n";
+        this.generatedScriptText += "stopDriver *  // stop drivers\n";
+        this.generatedScriptText += res.scr;
+
+        if(this.generateStatusElem) this.generateStatusElem.innerHTML = "<span style='color:green;'>OK. Script generated.</span>";
+      },
       handleDragOver(event) {
         event.preventDefault();
       },
@@ -224,7 +283,7 @@
 
         if (files.length > 0) {
           const file = files[0];
-          
+
           if (file.name.toLowerCase().endsWith('.bin')) {
             this.log(`Processing dropped file: ${file.name}`, 'info');
             const reader = new FileReader();
@@ -236,16 +295,15 @@
                    this.log('TuyaExporter library not loaded correctly.', 'error');
                    return;
                 }
-                // Pass log callback logic
                 const result = window.TuyaExporter.extractConfig(uint8Array, this.log);
                 if (result) {
                   if (typeof result === 'object') {
                     this.importTemplateText = JSON.stringify(result, null, 2);
-                    this.refreshTemplateImport(); // trigger generation
+                    this.refreshTemplateImport();
                     this.log('Config extracted and loaded successfully.', 'success');
                   } else {
                     this.importTemplateText = result;
-                    this.refreshTemplateImport(); // trigger generation
+                    this.refreshTemplateImport();
                     this.log('Config extracted but parsing had issues. Raw/Repaired text loaded.', 'warning');
                   }
                 } else {
@@ -258,27 +316,32 @@
             };
             reader.readAsArrayBuffer(file);
           } else {
-             // Text/JSON file
             this.log(`Dropped file is not .bin, trying text read for ${file.name}`, 'info');
             const reader = new FileReader();
-
             reader.onload = (e) => {
               this.importTemplateText = e.target.result;
               this.refreshTemplateImport();
               this.log("Loaded text file content.", 'success');
             };
-
-            reader.readAsText(file); 
+            reader.readAsText(file);
           }
         }
       },
-
     },
-    mounted (){
-        this.msg = 'fred';
+    mounted () {
         this.progressTextElem = document.getElementById("progressTextID");
         this.generateTextElem = document.getElementById("generateTextID");
-        this.generateTextElem.innerHTML = "Configuration script can be edited manually if needed.";
+        this.generateStatusElem = document.getElementById("generateStatusID");
+
+        if(this.generateTextElem) {
+          this.generateTextElem.innerHTML = "OpenBeken configuration script:";
+        }
+        if(this.generateStatusElem) {
+          this.generateStatusElem.innerHTML = "<span style='color:#111;'>Waiting for input...</span>";
+        }
+        if(this.progressTextElem) {
+          this.progressTextElem.innerHTML = "";
+        }
 
         const cryptoScript = document.createElement("script");
         cryptoScript.setAttribute(
@@ -292,95 +355,389 @@
         plugin.setAttribute(
           "src",
           "https://openbekeniot.github.io/webapp/templateParser.js"
-         //"../templateParser.js"
         );
         plugin.async = true;
         document.head.appendChild(plugin);
-        
+
         const plugin2 = document.createElement("script");
         plugin2.setAttribute(
           "src",
-            "https://openbekeniot.github.io/webapp/tuyaExporter.js"
+          "https://openbekeniot.github.io/webapp/tuyaExporter.js"
         );
         plugin2.async = true;
         document.head.appendChild(plugin2);
-        
-      let importTemplateTextarea = document.getElementById("importTemplate");
-      importTemplateTextarea.addEventListener('dragover', this.handleDragOver);
-      importTemplateTextarea.addEventListener('drop', this.handleDrop);
+
+        let importTemplateTextarea = document.getElementById("importTemplate");
+        if(importTemplateTextarea){
+          importTemplateTextarea.addEventListener('dragover', this.handleDragOver);
+          importTemplateTextarea.addEventListener('drop', this.handleDrop);
+        }
     },
-    destroyed(){
+    destroyed() {
       clearInterval(this.interval);
     }
-
   }
 //@ sourceURL=/vue/import.vue
 </script>
 
 <style scoped>
+  /* Ensure padding/borders never cause right-edge clipping */
+  .importPage, .importPage * {
+    box-sizing: border-box;
+  }
+
   .importPage {
     width: 100%;
   }
 
   .importIntro {
-    max-width: 940px;
-    margin: 0 auto 36px auto;
+    max-width: 1100px;
+    margin: 0 auto 18px auto;
     padding: 0 15px;
     text-align: left;
     line-height: 1.35em;
   }
 
+  .importLayout {
+    max-width: 1280px;
+    margin: 0 auto;
+    padding: 0 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    text-align: left;
+    line-height: 1.45em;
+  }
+
+  .importTopGrid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+    gap: 16px;
+    align-items: stretch;
+  }
+
+  .importCard {
+    border: 1px solid rgba(17, 24, 39, 0.10);
+    border-radius: 14px;
+    background: #ffffff;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.04);
+  }
+
+  .importCard--top {
+    height: 720px;
+  }
+
+  .importCard--log {
+    min-height: 220px;
+  }
+
+  .importCardHeader {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 14px 14px 10px 14px;
+    background: transparent;
+  }
+
+  .importCardHeader--log {
+    padding-bottom: 8px;
+    justify-content: space-between;
+  }
+
+  .importStepBadge {
+    width: 28px;
+    height: 28px;
+    border-radius: 999px;
+    border: 1px solid rgba(17, 24, 39, 0.14);
+    display: grid;
+    place-items: center;
+    font-weight: 700;
+    font-size: 0.95em;
+    background: #ffffff;
+    flex: 0 0 auto;
+  }
+
+  .importCardTitle {
+    margin: 0;
+    font-size: 1.05em;
+    line-height: 1.2;
+  }
+
+  .importCardBody {
+    padding: 12px 14px 14px 14px;
+    flex: 1;
+    min-height: 0;
+  }
+
+  .importCardBody--top {
+    /* Make the main panes run edge-to-edge inside the outer card.
+       Top/bottom copy gets its own padding so we don't create nested "cards". */
+    padding: 0;
+    display: grid;
+    grid-template-rows: 118px 1fr auto;
+    gap: 10px;
+    min-height: 0;
+  }
+
+  .importCardBody--log {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  .importTopText {
+    min-height: 118px;
+    padding: 12px 14px 0 14px;
+  }
+
+  .importTopText--apply {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  .importApplyActionRow {
+    display: flex;
+    align-items: center;
+  }
+
+  .importMainPane,
+  .importBottomPane {
+    min-height: 0;
+  }
+
+  /* Main content area inside each step card.
+     We keep a single "surface" per column (no nested bordered cards). */
+  .importMainPane {
+    /* This is the single main "surface" per column.
+       It should touch the outer card edges (no inset card look). */
+    background: #f9fafb;
+    border-radius: 0;
+    padding: 0;
+    overflow: hidden;
+    border-top: 1px solid rgba(17, 24, 39, 0.10);
+    border-bottom: 1px solid rgba(17, 24, 39, 0.10);
+  }
+
+  .importMainPane:focus-within {
+    box-shadow: inset 0 0 0 3px rgba(99, 102, 241, 0.12);
+  }
+
+  /* Apply status should remain a plain white box (no grey pane behind it). */
+  .importMainPane--apply {
+    background: transparent;
+    padding: 0;
+    border-radius: 0;
+    box-shadow: none;
+    border-top: 1px solid rgba(17, 24, 39, 0.10);
+    border-bottom: 1px solid rgba(17, 24, 39, 0.10);
+  }
+
+  .importBodyText {
+    margin: 0;
+    line-height: 1.45em;
+  }
+
   .importNote {
-    font-weight: normal;
+    font-weight: 600;
     color: #1e40af;
     background: #eff6ff;
-    border-left: 4px solid #3b82f6;
-    padding: 6px 10px;
-    margin-top: 10px;
+    border-radius: 12px;
+    padding: 8px 10px;
+    margin-bottom: 10px;
   }
 
-  .importLogHelp {
-    margin: 0 0 6px 0;
+  .importTextarea {
+    width: 100%;
+    height: 100%;
+    min-height: 0;
+    resize: none;
+    /* Provide breathing room now that the pane is edge-to-edge */
+    padding: 12px 14px;
+    border: none;
+    border-radius: 0;
+    background: transparent;
+    outline: none;
+    line-height: 1.35em;
+    box-shadow: none;
+  }
+
+  .importTextarea:focus {
+    outline: none;
+  }
+
+  .importTextarea::placeholder {
+    color: #6b7280;
+  }
+
+  .importTextarea--mono {
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+    font-size: 12.5px;
   }
 
   .importExamplesBox {
-    margin-top: 12px;
+    border: none;
+    padding: 0;
+    background: transparent;
   }
 
   .importExamplesBox summary {
     cursor: pointer;
-    font-weight: bold;
-    margin-bottom: 6px;
+    font-weight: 700;
+    margin: 0;
+    list-style: none;
   }
 
-  .importContainer {
-    display: flex;
-    justify-content: center;
-    align-items: flex-start;
-    flex-wrap: wrap;
-    padding-top: 6px;
+  .importExamplesBox summary::-webkit-details-marker {
+    display: none;
   }
 
-  .importItem {
-    padding: 0 15px;
+  .importExamplesBox summary::before {
+    content: "▶";
+    display: inline-block;
+    margin-right: 8px;
+    transform-origin: center;
+    font-size: 0.9em;
   }
 
-  .importExamplesTitle {
-    margin: 0 0 6px 0;
+  details[open].importExamplesBox summary::before {
+    content: "▼";
   }
 
   .importExamples {
     display: flex;
     flex-wrap: wrap;
-    gap: 6px;
+    gap: 8px;
+    margin-top: 10px;
   }
 
-  .importExecTitle {
-    margin-bottom: 6px;
+  .importChip {
+    border: 1px solid rgba(17, 24, 39, 0.12);
+    background: rgba(249, 250, 251, 0.9);
+    border-radius: 999px;
+    padding: 6px 10px;
+    cursor: pointer;
+    font-size: 0.95em;
   }
 
-  .pin-index {
-    display: inline-block;
-    width: 20px;
+  .importChip:hover {
+    background: rgba(243, 244, 246, 0.95);
+  }
+
+  .importBtn {
+    border: 1px solid #111827;
+    background: #111827;
+    color: #ffffff;
+    border-radius: 12px;
+    padding: 10px 12px;
+    cursor: pointer;
+    font-weight: 650;
+    line-height: 1.15em;
+  }
+
+  .importBtn:hover {
+    filter: brightness(1.05);
+  }
+
+  .importBtn--primary {
+    width: 100%;
+  }
+
+  .importBtn--slim {
+    padding: 7px 10px;
+    border-radius: 10px;
+    font-weight: 650;
+    font-size: 0.98em;
+  }
+
+  .importBtn--secondary {
+    border-color: #d1d5db;
+    background: #ffffff;
+    color: #111827;
+    font-weight: 600;
+  }
+
+  .importBtn--secondary:hover {
+    background: #f9fafb;
+  }
+
+  .importBtn--compact {
+    padding: 7px 10px;
+    border-radius: 10px;
+    font-weight: 600;
+  }
+
+  .importPlaceholderLabel {
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+    font-size: 12.5px;
+    color: #6b7280;
+    font-weight: 400;
+  }
+
+  .importStatusBlock {
+    height: 100%;
+    min-height: 0;
+    /* Keep it as a lined-off area without creating another nested card */
+    border: none;
+    border-radius: 0;
+    padding: 12px 14px;
+    background: transparent;
+    overflow: auto;
+  }
+
+  .importBottomPane {
+    padding: 10px 14px 14px 14px;
+  }
+
+  .importStatusLine {
+    margin: 4px 0 0 0;
+    line-height: 1.35em;
+    min-height: 1.35em;
+    word-break: break-word;
+  }
+
+  .importTopText .importStatusLine {
+    margin-top: 4px;
+  }
+
+  .importStatusLine--mono {
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+    font-size: 12.5px;
+    color: #111827;
+  }
+
+  .importHint {
+    font-size: 0.95em;
+    color: #4b5563;
+  }
+
+  .importLogHelp {
+    margin: 0;
+  }
+
+  .importLogBox {
+    width: 100%;
+    height: 160px;
+    border: 1px solid rgba(17, 24, 39, 0.12);
+    border-radius: 12px;
+    overflow-y: auto;
+    padding: 10px;
+    background: #ffffff;
+    white-space: pre-wrap;
+  }
+
+  @media (max-width: 640px) {
+    .importIntro {
+      margin-bottom: 12px;
+    }
+    .importCard--top {
+      height: auto;
+    }
+    .importLogBox {
+      height: 220px;
+    }
   }
 </style>
diff --git a/vue/info.vue b/vue/info.vue
index d223f749..30e81865 100644
--- a/vue/info.vue
+++ b/vue/info.vue
@@ -1,10 +1,10 @@
 <template>
   <div class="container">
-    <div class="item">
-      <h4 v-if="peers.length">SSDP Devices</h4>
+    <div class="item item--ssdp" v-if="peers.length">
+      <h4>SSDP Devices</h4>
       <p v-for="peer in peers" v-bind:key="peer.url"><a target="_blank" v-bind:href="peer.url">{{peer.name}}</a></p>
     </div>
-    <div class="item">
+    <div class="item item--current">
       <h4>Current Device</h4>
       <p>Uptime: {{ formattedUptime }}</p>
       <p>Release: {{build}}</p>
@@ -18,27 +18,29 @@
       <p>Flags: {{flags}}</p>
       <p>Version: {{currentversion}} <span v-html="lateststr"></span></p>
       <p v-if="error">Error: {{error}}</p>
-      <h4>Export Current Template</h4>
-      <p>Please complete all missing details before submitting a new template to <a href="https://www.elektroda.com/rtvforum/forum390.html" target="_blank" rel="noopener noreferrer">Elektroda</a>.</p>
-	  <textarea id="deviceTemplate"  placeholder="Template will appear here. If this box is empty, template generation may have failed." style="vertical-align: top; width: 300px; height:500px"></textarea>
-    <br>
-          <button @click="getTemplateAsFile">Download template</button>
-          <button @click="getTemplateAsClipboard">Copy to clipboard</button>
+      <h4 class="export-title">Export Current Template</h4>
+      <p class="templateNote">Please complete all missing details before submitting a new template to <a href="https://www.elektroda.com/rtvforum/forum390.html" target="_blank" rel="noopener noreferrer">Elektroda</a>.</p>
+	  <textarea id="deviceTemplate" class="templateBox" placeholder="Template will appear here. If this box is empty, template generation may have failed."></textarea>
+
+      <div class="button-row">
+        <button @click="getTemplateAsFile">Download template</button>
+        <button @click="getTemplateAsClipboard">Copy to clipboard</button>
+      </div>
 
     </div>
 
-    <div class="item" v-if="supportsClientDeviceDB" style="width: 300px;">
+    <div class="item item--templates" v-if="supportsClientDeviceDB">
       <h4>Device Templates</h4>
 	  <p>Here you can apply an existing template (configuration) to your device. The template list is loaded from <a href="https://openbekeniot.github.io/webapp/devicesList.html">here</a>. </p>
 	  <p>If you have questions, please ask on our forum <a href="https://www.elektroda.com/rtvforum/forum390.html">here</a>. </p>
       Chipset:
-      <select v-model="selectedChipset">
+      <select class="chipset-select" v-model="selectedChipset">
         <option v-for="chip in chipsets" :value="chip" :key="chip">{{chip}}</option>
       </select>
       {{ (filteredDevices || []).length - 1 }} devices
       <br/><br/>
 
-      <select v-model="selectedDevice" style="width: 250px;">
+      <select class="device-select" v-model="selectedDevice">
         <option v-for="dev in filteredDevices" :value="dev" :key="dev">{{ getDeviceDisplayName(dev) }}</option>
       </select>
 
@@ -51,10 +53,10 @@
       </div>
     </div>
 
-    <div class="item" style="width: 300px;">
+    <div class="item item--pins">
       <h4>Pin Settings</h4>
 	  <p>Configure your device pins here. Note that some pin roles require a second channel field, which is currently only available in the native UI. LED channel order is R, G, B, C, W (first channel is Red, second is Green, etc.).</p>
-      <div v-for="(role, index) in pins.roles" :key="index">
+      <div class="pin-row" v-for="(role, index) in pins.roles" :key="index">
         <span class="pin-index">{{index}}</span>
         <select v-model="pins.roles[index]">
           <option v-for="(name, index2) in pins.rolenames" :value="index2" :key="index2" :selected="(role == index2)">{{name}}</option>
@@ -63,19 +65,25 @@
       </div>
 
       <br/>
-      <label for="deviceFlag" style="width:75px; display: inline-block;">Flags:</label>&nbsp;<input id="deviceFlag" v-model="deviceFlag" /><br/>
-      <label for="deviceCommand" style="width:75px; display: inline-block;">Command:</label>&nbsp;<input id="deviceCommand" v-model="deviceCommand" placeholder="Startup command"/><br/>
+      <div class="kv-row">
+        <label for="deviceFlag">Flags:</label>
+        <input id="deviceFlag" v-model="deviceFlag" />
+      </div>
+      <div class="kv-row">
+        <label for="deviceCommand">Command:</label>
+        <input id="deviceCommand" v-model="deviceCommand" placeholder="Startup command"/>
+      </div>
 
-      <button @click="savePins">Save pin settings</button>
+      <button class="pins-save" @click="savePins">Save pin settings</button>
       <br/>
 	  You may need to reboot the device for changes to take effect.
     </div>
-    <div class="item" style="width: 300px;">
+    <div class="item item--channels">
       <h4>Channel Types</h4>
 	  <p>Channel types/roles are primarily used with TuyaMCU devices and are intended for advanced users. They are also useful for creating advanced scriptable devices and for testing.</p>
 	  <p>Setting a type for given channel may cause a special control to appear on the main web UI page. For example, a slider for dimmer channel or a radio selection box for a fan speed channel.</p>
 	  <p>Do not change these settings unless you understand the implications.</p>
-      <div v-for="(role, index) in channelTypes.types" :key="index">
+      <div class="channel-row" v-for="(role, index) in channelTypes.types" :key="index">
         <span class="channel-index">{{index}}</span>
         <select v-model="channelTypes.types[index]">
           <option v-for="(name, index2) in channelTypes.typenames" :value="index2" :key="index2" :selected="(role == index2)">{{name}}</option>
@@ -705,16 +713,142 @@
 </script>
 
 <style scoped>
+  /* Layout: responsive flex columns with weighted widths (no phantom SSDP column, no centering) */
   .container {
     display: flex;
-    justify-content: center;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    justify-content: flex-start;
+    gap: 18px;
+    padding: 10px 12px;
+  }
+
+  /* Make sizing predictable for inputs/selects inside the component */
+  .container, .container * {
+    box-sizing: border-box;
   }
 
   .item {
-    padding: 0 15px;
+    padding: 0;
+    min-width: 220px;
+  }
+
+  /* Weighted columns (not equal width)
+     Tuned so a typical 1366px-wide viewport still fits 4 columns in most cases. */
+  .item--ssdp      { flex: 0.7 1 220px; }
+  .item--current   { flex: 2.1 1 420px; min-width: 320px; }
+  .item--templates { flex: 1.0 1 270px; }
+  .item--pins      { flex: 0.9 1 250px; }
+  .item--channels  { flex: 0.8 1 240px; }
+
+  /* Typography / spacing */
+  h4 { margin: 0 0 8px; }
+  p  { margin: 0 0 6px; }
+  .item--current p { line-height: 1.35; }
+
+  /* Export template */
+  .export-title { margin-top: 14px; }
+  .templateBox {
+    width: 100%;
+    min-width: 0;
+    height: 460px;
+    max-height: 60vh;
+    resize: vertical;
+    vertical-align: top;
+  }
+
+  /* Keep the JSON box from becoming absurdly wide on large screens */
+  .item--current .templateBox,
+  .item--current .button-row,
+  .item--current .templateNote {
+    width: 75%;
+    max-width: 100%;
+  }
+
+
+  .button-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin-top: 6px;
+  }
+
+  .pins-save {
+    margin-top: 10px;
+    margin-bottom: 6px;
+  }
+
+  /* Device Templates selects */
+  .device-select {
+    width: 100%;
+    min-width: 0;
+  }
+
+  /* Pin settings rows */
+  .pin-row {
+    display: grid;
+    grid-template-columns: 22px minmax(0, 1fr) 56px;
+    gap: 8px;
+    align-items: center;
+    margin: 2px 0;
   }
+
   .pin-index {
     display: inline-block;
-    width: 20px;
+    width: 22px;
+  }
+
+  .pin-row select,
+  .pin-row input {
+    width: 100%;
+    min-width: 0;
+  }
+
+  .pin-row input[type="number"] {
+    padding-left: 4px;
+    padding-right: 4px;
+  }
+
+  /* Flags/Command: aligned label + input */
+  .kv-row {
+    display: grid;
+    grid-template-columns: 80px minmax(0, 1fr);
+    gap: 8px;
+    align-items: center;
+    margin: 6px 0;
+  }
+  .kv-row label { margin: 0; }
+  .kv-row input {
+    width: 100%;
+    min-width: 0;
+  }
+
+  /* Channel types rows */
+  .channel-row {
+    display: grid;
+    grid-template-columns: 22px minmax(0, 1fr);
+    gap: 8px;
+    align-items: center;
+    margin: 2px 0;
+  }
+
+  .channel-index {
+    display: inline-block;
+    width: 22px;
+  }
+
+  .channel-row select {
+    width: 100%;
+    min-width: 0;
+  }
+
+  /* Small-screen: reduce gaps and textarea height */
+  @media (max-width: 700px) {
+    .container { gap: 14px; padding: 10px 10px; }
+    .templateBox { height: 340px; }
+    .item--current .templateBox,
+    .item--current .button-row,
+    .item--current .templateNote { width: 100%; }
+
   }
 </style>

From ee4935422fcec2a8ce8e1bf209802b0a70064ca1 Mon Sep 17 00:00:00 2001
From: divadiow <divadiow@hotmail.com>
Date: Wed, 11 Feb 2026 06:34:42 +0000
Subject: [PATCH 24/24] Update flash.vue

---
 vue/flash.vue | 359 ++++++++++++++++++++++++++++++++------------------
 1 file changed, 229 insertions(+), 130 deletions(-)

diff --git a/vue/flash.vue b/vue/flash.vue
index a2699296..b42c1088 100644
--- a/vue/flash.vue
+++ b/vue/flash.vue
@@ -3,9 +3,10 @@
         <div>
             <div class="flashIntro">
             <p>You can read flash regions directly from the device. RF configuration contains Beken calibration and network data, while OBK configuration contains OpenBeken settings.</p>
-            <p>If your device has an invalid MAC address ending in 00:00:00, use Restore RF configuration. This resets the RF partition and generates a random MAC address. Reboot the device afterward.</p>
+            <p>If your device has an invalid MAC address ending in 00:00:00, use Restore RF configuration (supported on BK7231N, BK7231T, BK7231U, BK7252, BK7231M, BK7258, BK7238, BK7252N, BK7236). This resets the RF partition and generates a random MAC address. Reboot the device afterward.</p>
+            <p><b>BK7238/T1 recommendation:</b> If you have a backup of your device's factory RF partition (TLV data), restoring it via <i>Write RF data to device</i> is recommended on BK7238. OpenBK7238 stores RF at <code>0x1E0000</code> (length <code>0x1000</code>), while stock Tuya BK7238 firmwares store RF at <code>0x1E3000</code>; writing a known-good backup will reinstate the factory MAC address and may also contain RF calibration data.</p>
             </div>
-            
+
 
             <table class="my-table">
             <tr>
@@ -18,36 +19,27 @@
                 <td> <button @click="rf(null, $event)">Read RF configuration</button></td>
                 <td><a :href="rfurl" download="rfdata">Download RF data</a></td>
                 <td>
+                    <div>
+                        <label for="RFFilePicker">Select a file with binary RF data (TLV header):</label>
+                        <input id="RFFilePicker" type="file" @change="RFFileSelected($event)">
+                        <div v-if="RFcfgStatus" v-html="RFcfgStatus" :class="{invalid: invalidRFCFGSelected}"></div>
+                        <button @click="writeRFCFG(null, $event)">Write RF data to device</button>
+                    </div>
                 </td>
-                <td><button @click="restore_rf(null, $event)">Restore RF configuration (BK7231N/BK7231T)</button></td>
+                <td><button @click="restore_rf(null, $event)" :disabled="!isRestoreRFSupported" :title="restoreRFTitle">{{ restoreRFLabel }}</button></td>
             </tr>
             <tr>
                 <td>  <button @click="config(null, $event)">Read OBK configuration</button></td>
                 <td> <a :href="configurl" download="configdata">Download OBK configuration</a></td>
                 <td>
                 <div>
-                    <label for="cfgFilePicker">Select a file with a binary CFG header:</label><input id="cfgFilePicker"
+                    <label for="cfgFilePicker">Select a file with a binary CFG header: </label><input id="cfgFilePicker"
                     type="file" @change="cfgFileSelected($event)">
                     <div v-if="cfgStatus" v-html="cfgStatus" :class="{invalid: invalidCFGSelected}"></div>
                     <button @click="writeCFG(null, $event)">Write CFG to device</button>
                 </div>
                 </td>
-                <td></td>
-            </tr>
-            <tr v-if="isBekenNT">
-                <td> <button @click="flashvars(null, $event)">Read FlashVars (BK7231N/BK7231T only)</button></td>
-                <td><a :href="flashvarsurl" download="flashvarsdata">Download FlashVars</a></td>
-                <td></td>
-                <td></td>
-            </tr>
-            <tr v-else-if="chipset !== 'unknown'">
-                <td colspan="4">FlashVars is available only on BK7231N/BK7231T.</td>
-            </tr>
-            <tr>
-                <td></td>
-                <td> <button @click="downloadFullDump(null, $event)">Download full 2MB flash dump</button></td>
-                <td></td>
-                <td></td>
+                <td><button @click="downloadFullDump(null, $event)">Download full 2MB flash dump</button></td>
             </tr>
             <tr>
                 <td>  <button @click="readTuyaConfig(null, $event)">Read Tuya GPIO configuration</button></td>
@@ -69,17 +61,17 @@
 
 
 
-           
-          
-           
+
+
+
             <br/>
-            
+
             <br/>
-            
+
             <br/>
-           
+
             <br/>
-            
+
         </div>
         <div v-html="display" class="display"></div>
     </div>
@@ -109,20 +101,46 @@
         shortName:'',
         rfurl: '',
         configurl: '',
-        flashvarsurl: '',
         otatext:'Drop OTA file here',
         invalidOTASelected: false,
         cfgtext:'Drop CFG file here',
         invalidCFGSelected: true,
         cfgStatus: '',
+        rfCfgData: null,
+        rfCfgText: '',
+        invalidRFCFGSelected: true,
+        RFcfgStatus: '',
       }
     },
     computed:{
-        isBekenNT(){
-            return this.chipset === 'BK7231N' || this.chipset === 'BK7231T';
+        isRestoreRFSupported(){
+            // Keep this list in sync with restore_rf_internal() templates.
+            return this.chipset === 'BK7231T' || this.chipset === 'BK7231U' || this.chipset === 'BK7252'
+                || this.chipset === 'BK7231N' || this.chipset === 'BK7231M' || this.chipset === 'BK7258'
+                || this.chipset === 'BK7238' || this.chipset === 'BK7252N'
+                || this.chipset === 'BK7236';
+        },
+        restoreRFLabel(){
+            if(!this.chipset || this.chipset === 'unknown'){
+                return 'Restore RF configuration (detecting chipset...)';
+            }
+            if(this.isRestoreRFSupported){
+                return 'Restore RF configuration (' + this.chipset + ')';
+            }
+            return 'Restore RF configuration (unsupported: ' + this.chipset + ')';
+        },
+        restoreRFTitle(){
+            if(!this.chipset || this.chipset === 'unknown'){
+                return 'Waiting for /api/info to determine chipset.';
+            }
+            if(this.isRestoreRFSupported){
+                return 'Writes generic RF calibration + randomizes MAC (last 3 bytes). Reboot afterward.';
+            }
+            return 'Restore RF is supported only on BK7231T/U, BK7231N/M, BK7236, BK7238, BK7252, BK7252N, BK7258.';
         },
     },
     methods:{
+
         getinfo(){
             let url = window.device+'/api/info';
             fetch(url)
@@ -133,7 +151,6 @@
                     this.chipset = res.chipset;     //Set chipset to fixed value for testing
                     this.rfurl = window.device+'/api/flash/'+this.getRFAddress();
                     this.configurl = window.device+'/api/flash/'+this.getConfigAddress();
-                    this.flashvarsurl = this.isBekenNT ? (window.device+'/api/flash/'+this.getFlashVarsAddress()) : '';
                 })
                 .catch(err => {
                     this.error = err.toString();
@@ -160,7 +177,7 @@
                     this.writeCFG_Internal(cb);
                 }
             }
-        },   
+        },
          writeCFG_Internal(cb){
             if(this.invalidCFGSelected )
             {
@@ -170,7 +187,7 @@
             this.cfgStatus += 'Writing OBK configuration...';
             let url = window.device+'/api/flash/'+this.getConfigAddress();
             console.log('Will use URL '+url);
-                fetch(url, { 
+                fetch(url, {
                         method: 'POST',
                         body: this.cfgdata
                     })
@@ -203,7 +220,7 @@
         },
         checkCFGData(event, file, operation){
             this.cfgdata = null;    //Reset otadata
-            
+
             var result = event.target.result;   //ArrayBuffer
             console.log('chipset=' + this.chipset);
             console.log("Checking CFG data");
@@ -223,24 +240,119 @@
                 this.cfgdata = result;
             }
         },
+
+        // Write RF partition
+        writeRFCFG(cb){
+            if(this.invalidRFCFGSelected)
+            {
+                alert("Invalid RF data file selected.");
+                return;
+            }
+            let confirmationForUser = prompt("Are you sure? This will overwrite your RF configuration (MAC address and calibration). Type Y to continue.", "N");
+            if(confirmationForUser != null && confirmationForUser.length > 0 && (confirmationForUser[0] === 'Y' || confirmationForUser[0] === 'y')) {
+                this.status += '<br/>Starting RF write...';
+                this.writeRFCFG_Internal(cb);
+            }
+        },
+        writeRFCFG_Internal(cb){
+            if (this.invalidRFCFGSelected)
+            {
+                alert("Invalid RF data file selected.");
+                return;
+            }
+            this.RFcfgStatus = 'Writing RF data...';
+            let url = window.device+'/api/flash/'+this.getRFAddress();
+            console.log('Will use URL '+url);
+            fetch(url, {
+                method: 'POST',
+                body: this.rfCfgData
+            })
+            .then(response => response.text())
+            .then(text => {
+                console.log('received '+text);
+                this.RFcfgStatus = 'Write complete. Reboot the device to apply changes.';
+                if(cb) cb();
+            })
+            .catch(err => {
+                console.error(err);
+                this.RFcfgStatus = 'Write failed: ' + err.toString();
+            }); // Never forget the final catch!
+        },
+        RFFileSelected(ev){
+            console.log("RF file selected");
+            this.invalidRFCFGSelected = true; // pessimistic until validated
+            this.RFcfgStatus = '';
+            this.rfCfgData = null;
+            var file = ev.target.files[0]; //There should be only one file
+            if (file){
+                console.log('... RF fileName = ' + file.name);
+                var reader = new FileReader();
+                reader.onload = (event) => this.checkRFCFGData(event, file, "selected");
+                reader.readAsArrayBuffer(file);
+            }
+        },
+        isRFCFGImage(arrayBuffer){
+            let view = new DataView(arrayBuffer);
+            if (view.byteLength < 4) return false;
+            console.log("isRFCFGImage sees " +view);
+            // TLV\0 header
+            return view.getUint8(0) === 0x54 && view.getUint8(1) === 0x4C && view.getUint8(2) === 0x56 && view.getUint8(3) === 0;
+        },
+        checkRFCFGData(event, file, operation){
+            this.rfCfgData = null; //Reset RF data
+            var result = event.target.result; //ArrayBuffer
+            console.log('chipset=' + this.chipset);
+            console.log("Checking RF data");
+            console.log('rfdata len:' + result.byteLength);
+            this.rfCfgText = file.name + ' len:' + result.byteLength;
+            this.invalidRFCFGSelected = !this.isRFCFGImage(result);
+
+            if (this.invalidRFCFGSelected){
+                console.log("this RF data is incorrect");
+                this.RFcfgStatus = 'Invalid RF data file (' + operation + ').';
+            }
+            else{
+                console.log("this RF data is OK");
+                this.RFcfgStatus = 'Valid RF data file selected.';
+                this.rfCfgData = result;
+            }
+        },
         getRFAddress(){
-            if(this.chipset === "BK7231T") {
+            // RF partition (usually 0x1000 bytes) address varies by chipset.
+            // Beken "T-family" (and relatives) use 0x1E0000, "N-family" use 0x1D0000.
+            if(this.chipset === "BK7231T" || this.chipset === "BK7231U" || this.chipset === "BK7252"
+                || this.chipset === "BK7238" || this.chipset === "BK7252N") {
 				return '1e0000-1000';
 			}
-            if(this.chipset === "BK7231N") {
+            if(this.chipset === "BK7231N" || this.chipset === "BK7231M") {
 				return '1d0000-1000';
 			}
-            console.log('getRFAddress is not implemented for '+this.chipset);
+            // Larger-flash Bekens:
+            if(this.chipset === "BK7236") {
+				return '3fe000-1000';
+			}
+            if(this.chipset === "BK7258") {
+				return '7fe000-1000';
+			}
+			console.log('getRFAddress is not implemented for '+this.chipset);
 			return '1e0000-1000';
         },
         getConfigAddress(){
-            if(this.chipset === "BK7231T") {
+            // OBK config partition is typically RF+0x1000 (size 0x1000).
+            if(this.chipset === "BK7231T" || this.chipset === "BK7231U" || this.chipset === "BK7252"
+                || this.chipset === "BK7238" || this.chipset === "BK7252N") {
 				return '1e1000-1000';
 			}
-            if(this.chipset === "BK7231N") {
+            if(this.chipset === "BK7231N" || this.chipset === "BK7231M") {
 				return '1d1000-1000';
 			}
-            console.log('getConfigAddress is not implemented for '+this.chipset);
+            if(this.chipset === "BK7236") {
+				return '3ff000-1000';
+			}
+            if(this.chipset === "BK7258") {
+				return '7ff000-1000';
+			}
+			console.log('getConfigAddress is not implemented for '+this.chipset);
 			return '1e1000-1000';
         },
         appendArrayBuffers(buffer1, buffer2) {
@@ -304,7 +416,7 @@
             this.status += ''+this.fullDumpCurAt.toString(16)+"...";
             console.log("downloadFullDumpFragment is requesting " + fullAdr + "!");
             let url = window.device+'/api/flash/'+fullAdr;
-            
+
             const retryWithDelay = () => {
                 setTimeout(() => {
                 this.downloadFullDumpFragment();
@@ -353,16 +465,16 @@
 	    let length = prompt("Enter the length (in bytes):", "256");
 	    offset = parseInt(offset, 16);
 	    length = parseInt(length);
-	
+
 	    if (isNaN(offset) || isNaN(length)) {
 	        this.status += '<br/>Invalid offset or length entered.';
 	        return;
 	    }
-	
+
 	    this.status += `<br/>Reading custom data from offset 0x${offset.toString(16)} with length ${length}...`;
 	    let url = window.device + `/api/flash/${offset.toString(16)}-${length.toString(16)}`;
 	    console.log('Will use URL ' + url);
-	
+
 	    fetch(url)
 	        .then(response => response.arrayBuffer())
 	        .then(buffer => {
@@ -374,22 +486,22 @@
 	        })
 	        .catch(err => console.error(err)); // Never forget the final catch!
 	},
-	
+
 	downloadCustom(cb) {
 	    let offset = prompt("Enter the offset (in hex):", "0x0");
 	    let length = prompt("Enter the length (in bytes):", "256");
 	    offset = parseInt(offset, 16);
 	    length = parseInt(length);
-	
+
 	    if (isNaN(offset) || isNaN(length)) {
 	        this.status += '<br/>Invalid offset or length entered.';
 	        return;
 	    }
-	
+
 	    this.status += `<br/>Downloading custom data from offset 0x${offset.toString(16)} with length ${length}...`;
 	    let url = window.device + `/api/flash/${offset.toString(16)}-${length.toString(16)}`;
 	    console.log('Will use URL ' + url);
-	
+
 	    fetch(url)
 	        .then(response => response.arrayBuffer())
 	        .then(buffer => {
@@ -397,8 +509,8 @@
 	            this.status += `<br/>Custom data is ready.`;
 	            if (cb) cb();
 	        })
-	        .catch(err => console.error(err)); 
-	},  
+	        .catch(err => console.error(err));
+	},
         downloadFullDump() {
             if(0){
                 alert("Not available yet.");
@@ -430,17 +542,6 @@
             this.fullDumpErrors = 0;
             this.downloadFullDumpFragment();
         },
-        getFlashVarsAddress(){
-            // "NET info" + len(0x1000) + 0x1000
-            if(this.chipset === "BK7231T") {
-				return '1e3000-2000';
-			}
-            if(this.chipset === "BK7231N") {
-				return '1d3000-2000';
-			}
-            console.log('getFlashVarsAddress is not implemented for '+this.chipset);
-			return '0-0';
-        },
         rf(cb){
             this.status += '<br/>Reading RF configuration...';
             let url = window.device+'/api/flash/'+this.getRFAddress();
@@ -448,7 +549,7 @@
             fetch(url)
                 .then(response => response.arrayBuffer())
                 .then(buffer => {
-                    this.rfdata = buffer; 
+                    this.rfdata = buffer;
                     console.log('received '+buffer.byteLength);
                     this.status += '..received RF configuration...';
                     this.dump(buffer);
@@ -472,7 +573,7 @@
             fetch(url)
                 .then(response => response.arrayBuffer())
                 .then(buffer => {
-                    this.configdata = buffer; 
+                    this.configdata = buffer;
                     console.log('received '+buffer.byteLength);
                     this.status += '..received Tuya GPIO configuration...';
                     this.dump(buffer);
@@ -491,7 +592,7 @@
             fetch(url)
                 .then(response => response.arrayBuffer())
                 .then(buffer => {
-                    this.configdata = buffer; 
+                    this.configdata = buffer;
                     console.log('received '+buffer.byteLength);
                     this.status += '..received OBK configuration...';
                     this.dump(buffer);
@@ -499,25 +600,6 @@
                 })
                 .catch(err => console.error(err)); // Never forget the final catch!
         },
-        flashvars(cb){
-            if(!this.isBekenNT){
-                this.status += '<br/>FlashVars is available only on BK7231N/BK7231T.';
-                return;
-            }
-            this.status += '<br/>Reading FlashVars...';
-            let url = window.device+'/api/flash/'+this.getFlashVarsAddress();
-            console.log('Will use URL '+url);
-            fetch(url)
-                .then(response => response.arrayBuffer())
-                .then(buffer => {
-                    this.configdata = buffer; 
-                    console.log('received '+buffer.byteLength);
-                    this.status += '..received FlashVars...';
-                    this.dump(buffer);
-                    if(cb) cb();
-                })
-                .catch(err => console.error(err)); // Never forget the final catch!
-        },
         restore_rf(cb){
 			  let rep = prompt("Use this option only if your RF partition is already corrupted (for example, your MAC ends with 00 00). Otherwise, WiFi performance may decrease because the recreated RF partition uses generic calibration data. Type yes to continue.", "no");
 			  if (rep != null) {
@@ -525,7 +607,7 @@
 					this.restore_rf_internal(cb);
 				  }
 			  }
-			
+
 		},
 		/**
 		 * Returns a random integer between min (inclusive) and max (inclusive).
@@ -539,60 +621,77 @@
 			max = Math.floor(max);
 			return Math.floor(Math.random() * (max - min + 1)) + min;
 		},
+
+		base64ToUint8Array(b64) {
+			// atob() returns a "binary string" (each char code is a byte 0..255).
+			const bin = atob(b64);
+			const out = new Uint8Array(bin.length);
+			for (let i = 0; i < bin.length; i++) {
+				out[i] = bin.charCodeAt(i) & 0xFF;
+			}
+			return out;
+		},
+		getRestoreRFTemplateBase64() {
+			// Keep this list in sync with isRestoreRFSupported.
+			if (this.chipset === "BK7231T" || this.chipset === "BK7231U" || this.chipset === "BK7252") {
+				return "VExWAOABAAAAERERWgAAAAEREREEAAAATmG8AAIREREGAAAAhONCsmG/AxEREQQAAAAdAQAABBEREQQAAACOFVMBBREREQQAAAAbAAAABhEREQQAAABVAFQDBxEREQgAAAAQAAAAEAAAAAAiIiKiAAAAASIiIgQAAAAPAAAAAiIiIg4AAAAPj4+Ojo6NjY2Mi4sKigMiIiIOAAAAEZGRkI+Pjo2NjIuKCYkEIiIiDgAAAA6Ojo2MjIuKiomIhwaGBSIiIgQAAAACAAAABiIiIgQAAAADAAAAByIiIigAAACQkJCQkI+Pj4+Pjo6Ojo6NjY2NDIyMjIyMjIyMjIyMjIyMjIyMjIyMCCIiIgQAAAABAAAAADMzM4QAAAABMzMzBAAAAAgAAAACMzMzBAAAAAoAAAADMzMzBAAAAAkAAAAEMzMzBAAAAAMCAAAFMzMzBAAAAPgBAAAGMzMzBAAAAOgDAAAHMzMzBAAAAP8DAAAIMzMzBAAAABAAAAAJMzMzBAAAABAAAAAKMzMzBAAAAAACAAALMzMzBAAAAAACAAAAREREQAAAAAFEREQgAAAAgICAgHiAeIBwhHCEYIxYlFaUVpRUlFSUVZVUlVWVVJUCREREBAAAAO4BAAADREREBAAAAAcAAAA=";
+			}
+			if (this.chipset === "BK7231N" || this.chipset === "BK7231M" || this.chipset === "BK7258") {
+				return "VExWAGIAAAAAERERWgAAAAEREREEAAAATmG8AAIREREGAAAAOB+NOFcOAxEREQQAAABeAQAABBEREQQAAACOFVMBBREREQQAAAAMAAAABhEREQQAAABVAFQDBxEREQgAAACAAAAAgAAAAP////////8=";
+			}
+			if (this.chipset === "BK7238" || this.chipset === "BK7252N") {
+				return "VExWAOABAAAAERERWgAAAAEREREEAAAATmG8AAIREREGAAAAPAtZAAAAAxEREQQAAAACAQAABBEREQQAAACOFVMBBREREQQAAAA0AAAABhEREQQAAAByBOkIBxEREQgAAACAAAAAgAAAAAAiIiKiAAAAASIiIgQAAAAPAAAAAiIiIg4AAABIycnJyspKysrJyclIyAMiIiIOAAAAU9TU1NXVVdXV1NTUU9MFIiIiBAAAAAQAAAAHIiIiKAAAAJ+fn5+foKCgoKCgoKCgoKGhoaEhoaGhoaGhoaGhoaCgoKCgoKCgoJ8IIiIiBAAAAAEAAABaWlpaWlpaWlpaWlpaWlpaWlpaWlpaWlpaWlpaWlpaWlpaADMzM4QAAAABMzMzBAAAAAAAAAACMzMzBAAAAAAAAAADMzMzBAAAAAAAAAAEMzMzBAAAALwHAAAFMzMzBAAAANoHAAAGMzMzBAAAAP8PAAAHMzMzBAAAAI4PAAAIMzMzBAAAAFoAAAAJMzMzBAAAAFgAAAAKMzMzBAAAALsHAAALMzMzBAAAAAEIAAAAREREQAAAAAFEREQgAAAAeIB4gHCIdIRwiGyIWJBQmFCYTJhMmEyYTJhMmEyYTZkCREREBAAAAFcDAAADREREBAAAAAgBAAA=";
+			}
+			if (this.chipset === "BK7236") {
+				return "VExWAPABAAAAERERWgAAAAEREREEAAAATmG8AAIREREGAAAATKkZAAAAAxEREQQAAAAkAgAABBEREQQAAACOFVMBBREREQQAAABHAAAABhEREQQAAAAAAAAABxEREQgAAACUAAAAkwAAAAAiIiKyAAAAASIiIgQAAAAPAAAAAiIiIhIAAAAAAIhBC4uLi4uLCoqKioqKCYkDIiIiEgAAAAAAcEEgoKCfn58enp6dnZ0cnAQiIiISAAAAAABgQZmZmZqbm5uampmXl5eXBSIiIgQAAAAEAAAABiIiIgQAAAAEAAAAByIiIiwAAAAAAMBAra2tra2tra2traysrKysq6urqyqqqqqqqqqqqqqqqampqamoqKiopwgiIiIEAAAAAQAAAAAzMzOEAAAAATMzMwQAAAAEAAAAAjMzMwQAAAAPAAAAAzMzMwQAAAAQAAAABDMzMwQAAAAvCAAABTMzMwQAAAAdCAAABjMzMwQAAADfDwAABzMzMwQAAAD/DwAACDMzMwQAAACSAAAACTMzMwQAAACSAAAACjMzMwQAAAAaCAAACzMzMwQAAAAACAAAAEREREAAAAABREREIAAAAIF8gXyBfIF8hXiFeIdwiHSQbJBsjG2Obo5ujm6Obo5uAkRERAQAAAAAAgAAA0RERAQAAAAAAAAA";
+			}
+			return null;
+		},
+
         restore_rf_internal(cb){
-            this.status += '<br/>Restoring RF configuration...';
             console.log('restore rf ');
-            let url = window.device+'/api/flash/'+this.getRFAddress();
+            let rfRange = this.getRFAddress();
+            let url = window.device+'/api/flash/'+rfRange;
             console.log('Will use URL '+url);
-			let correct_rf_config;
 
-// At this moment, I am not sure if we can use single format for T and N
-// Those are RF configs copied from my devices
-            if(this.chipset === "BK7231T") {
-				correct_rf_config = [0x54,0x4c,0x56,0x00,0xe0,0x01,0x00,0x00,0x00,0x11,0x11,0x11,0x5a,0x00,0x00,0x00,0x01,0x11,0x11,0x11,0x04,0x00,0x00,0x00,0x4e,0x61,0xbc,0x00,0x02,0x11,0x11,0x11,
-0x06,0x00,0x00,0x00,0x84,0xe3,0x42,0xb2,0x61,0xbf,0x03,0x11,0x11,0x11,0x04,0x00,0x00,0x00,0x1d,0x01,0x00,0x00,0x04,0x11,0x11,0x11,0x04,0x00,0x00,0x00,0x8e,0x15,
-0x53,0x01,0x05,0x11,0x11,0x11,0x04,0x00,0x00,0x00,0x1b,0x00,0x00,0x00,0x06,0x11,0x11,0x11,0x04,0x00,0x00,0x00,0x55,0x00,0x54,0x03,0x07,0x11,0x11,0x11,0x08,0x00,
-0x00,0x00,0x10,0x00,0x00,0x00,0x10,0x00,0x00,0x00,0x00,0x22,0x22,0x22,0xa2,0x00,0x00,0x00,0x01,0x22,0x22,0x22,0x04,0x00,0x00,0x00,0x0f,0x00,0x00,0x00,0x02,0x22,
-0x22,0x22,0x0e,0x00,0x00,0x00,0x0f,0x8f,0x8f,0x8e,0x8e,0x8e,0x8d,0x8d,0x8d,0x8c,0x8b,0x8b,0x0a,0x8a,0x03,0x22,0x22,0x22,0x0e,0x00,0x00,0x00,0x11,0x91,0x91,0x90,
-0x8f,0x8f,0x8e,0x8d,0x8d,0x8c,0x8b,0x8a,0x09,0x89,0x04,0x22,0x22,0x22,0x0e,0x00,0x00,0x00,0x0e,0x8e,0x8e,0x8d,0x8c,0x8c,0x8b,0x8a,0x8a,0x89,0x88,0x87,0x06,0x86,
-0x05,0x22,0x22,0x22,0x04,0x00,0x00,0x00,0x02,0x00,0x00,0x00,0x06,0x22,0x22,0x22,0x04,0x00,0x00,0x00,0x03,0x00,0x00,0x00,0x07,0x22,0x22,0x22,0x28,0x00,0x00,0x00,
-0x90,0x90,0x90,0x90,0x90,0x8f,0x8f,0x8f,0x8f,0x8f,0x8e,0x8e,0x8e,0x8e,0x8e,0x8d,0x8d,0x8d,0x8d,0x0c,0x8c,0x8c,0x8c,0x8c,0x8c,0x8c,0x8c,0x8c,0x8c,0x8c,0x8c,0x8c,
-0x8c,0x8c,0x8c,0x8c,0x8c,0x8c,0x8c,0x8c,0x08,0x22,0x22,0x22,0x04,0x00,0x00,0x00,0x01,0x00,0x00,0x00,0x00,0x33,0x33,0x33,0x84,0x00,0x00,0x00,0x01,0x33,0x33,0x33,
-0x04,0x00,0x00,0x00,0x08,0x00,0x00,0x00,0x02,0x33,0x33,0x33,0x04,0x00,0x00,0x00,0x0a,0x00,0x00,0x00,0x03,0x33,0x33,0x33,0x04,0x00,0x00,0x00,0x09,0x00,0x00,0x00,
-0x04,0x33,0x33,0x33,0x04,0x00,0x00,0x00,0x03,0x02,0x00,0x00,0x05,0x33,0x33,0x33,0x04,0x00,0x00,0x00,0xf8,0x01,0x00,0x00,0x06,0x33,0x33,0x33,0x04,0x00,0x00,0x00,
-0xe8,0x03,0x00,0x00,0x07,0x33,0x33,0x33,0x04,0x00,0x00,0x00,0xff,0x03,0x00,0x00,0x08,0x33,0x33,0x33,0x04,0x00,0x00,0x00,0x10,0x00,0x00,0x00,0x09,0x33,0x33,0x33,
-0x04,0x00,0x00,0x00,0x10,0x00,0x00,0x00,0x0a,0x33,0x33,0x33,0x04,0x00,0x00,0x00,0x00,0x02,0x00,0x00,0x0b,0x33,0x33,0x33,0x04,0x00,0x00,0x00,0x00,0x02,0x00,0x00,
-0x00,0x44,0x44,0x44,0x40,0x00,0x00,0x00,0x01,0x44,0x44,0x44,0x20,0x00,0x00,0x00,0x80,0x80,0x80,0x80,0x78,0x80,0x78,0x80,0x70,0x84,0x70,0x84,0x60,0x8c,0x58,0x94,
-0x56,0x94,0x56,0x94,0x54,0x94,0x54,0x94,0x55,0x95,0x54,0x95,0x55,0x95,0x54,0x95,0x02,0x44,0x44,0x44,0x04,0x00,0x00,0x00,0xee,0x01,0x00,0x00,0x03,0x44,0x44,0x44,
-0x04,0x00,0x00,0x00,0x07,0x00,0x00,0x00];
-// NOTE: MAC 84:e3:42:b2:61:bf
-				correct_rf_config[39] = this.getRandomInt(0,255);// replace 0xb2
-				correct_rf_config[40] = this.getRandomInt(0,255);// replace 0x61
-				correct_rf_config[41] = this.getRandomInt(0,255);// replace 0xbf
-			}
-            else if(this.chipset === "BK7231N") {
-				correct_rf_config = [0x54,0x4c,0x56,0x00,0x62,0x00,0x00,0x00,0x00,0x11,0x11,0x11,0x5a,0x00,0x00,0x00,0x01,0x11,0x11,0x11,0x04,0x00,0x00,0x00,0x4e,0x61,0xbc,0x00,0x02,0x11,0x11,0x11
-,0x06,0x00,0x00,0x00,0x38,0x1f,0x8d,0x38,0x57,0x0e,0x03,0x11,0x11,0x11,0x04,0x00,0x00,0x00,0x5e,0x01,0x00,0x00,0x04,0x11,0x11,0x11,0x04,0x00,0x00,0x00,0x8e,0x15
-,0x53,0x01,0x05,0x11,0x11,0x11,0x04,0x00,0x00,0x00,0x0c,0x00,0x00,0x00,0x06,0x11,0x11,0x11,0x04,0x00,0x00,0x00,0x55,0x00,0x54,0x03,0x07,0x11,0x11,0x11,0x08,0x00
-,0x00,0x00,0x80,0x00,0x00,0x00,0x80,0x00,0x00,0x00,0xff,0xff,0xff,0xff,0xff,0xff,0xff];
-// NOTE: MAC 38:1f:8d:38:57:0e
-				correct_rf_config[39] = this.getRandomInt(0,255);// replace 0x38
-				correct_rf_config[40] = this.getRandomInt(0,255);// replace 0x57
-				correct_rf_config[41] = this.getRandomInt(0,255);// replace 0x0e
-			} else {
-				correct_rf_config = [];
-			}
-			
-			let streamData = new Uint8Array(correct_rf_config);
+			// RF templates ported from BK7231Flasher/RFPartitionUtil.cs (generic TLV RF blobs).
+			// We keep the first 3 bytes (OUI) fixed and randomize only the last 3 bytes of the MAC.
+			const tmplB64 = this.getRestoreRFTemplateBase64();
+			const correct_rf_config = tmplB64 ? this.base64ToUint8Array(tmplB64) : null;
+
+
+            if(!correct_rf_config || correct_rf_config.length < 42) {
+                this.status += '<br/>Restore RF is not supported on ' + this.chipset + '.';
+                return;
+            }
+
+            // Status: show matched chipset + RF flash range being written.
+            let rfParts = (rfRange || '').split('-');
+            let rfStart = (rfParts.length > 0) ? rfParts[0] : '';
+            let rfLen = (rfParts.length > 1) ? rfParts[1] : '';
+            let rfStartFmt = rfStart ? ((rfStart.indexOf('0x') === 0) ? rfStart : ('0x'+rfStart)) : '';
+            let rfLenFmt = rfLen ? ((rfLen.indexOf('0x') === 0) ? rfLen : ('0x'+rfLen)) : '';
+            this.status += '<br/>Restoring RF configuration for ' + this.chipset + ' to ' + rfStartFmt + ' (len ' + rfLenFmt + ')...';
+
+            // Pad to full sector so we write deterministic content (device expects 0x1000 RF partition).
+            let streamData = new Uint8Array(0x1000);
+            streamData.fill(0xFF);
+            streamData.set(correct_rf_config, 0);
+
+            // NOTE: MAC starts at offset 36, so last 3 bytes are 39..41
+            streamData[39] = this.getRandomInt(0,255);
+            streamData[40] = this.getRandomInt(0,255);
+            streamData[41] = this.getRandomInt(0,255);
+
             if (streamData){
-                fetch(url, { 
+                fetch(url, {
                         method: 'POST',
                         body: streamData
                     })
                     .then(response => response.text())
                     .then(text => {
                         console.log('received '+text);
-                        this.status += '<br/>RF configuration restored. Reboot the device.';
+                        this.status += '<br/>RF configuration restored for ' + this.chipset + ' at ' + rfStartFmt + ' (len ' + rfLenFmt + '). Reboot the device.';
                     })
                     .catch(err => console.error(err)); // Never forget the final catch!
             }
@@ -624,7 +723,6 @@
 
         this.rfurl = window.device+'/api/flash/'+this.getRFAddress();
         this.configurl = window.device+'/api/flash/'+this.getConfigAddress();
-        this.flashvarsurl = '';
 
         console.log('mounted ota');
         this.getinfo();
@@ -658,8 +756,9 @@
   }
 
 
-  
-            .my-table, 
+
+
+            .my-table,
             .my-table th,
             .my-table td {
                 border: 1px solid black;