Offline readiness panel and Prepare all button

index.html

@@ -16,6 +16,7 @@
   <header class="top">
     <h1>Reader</h1>
     <div class="top-actions">
+      <span id="net" class="pill" aria-live="polite"></span>
       <button id="btn-edit" class="ghost hidden" type="button">Edit</button>
       <button id="btn-settings" class="ghost" type="button" aria-label="Settings">Settings</button>
     </div>
@@ -36,7 +37,15 @@
         <button id="btn-paste" class="ghost" type="button">Paste</button>
         <button id="btn-listen" class="primary" type="button">Listen</button>
       </div>
-      <p class="privacy">Speech is generated on this device. Your text is never uploaded.</p>
+      <div id="ready" class="ready">
+        <div class="ready-title" id="ready-title">Checking what's saved on this device…</div>
+        <ul class="ready-list">
+          <li id="r-app">App</li>
+          <li id="r-model">Speech model</li>
+          <li id="r-voice">Voice</li>
+        </ul>
+        <p class="note" id="ready-note">Speech is generated on this device. Your text is never uploaded.</p>
+      </div>
     </section>
 
     <section id="view-read" class="hidden">
@@ -51,6 +60,9 @@
       <button id="btn-play" class="round big" type="button" aria-label="Play">▶</button>
       <button id="btn-next" class="round" type="button" aria-label="Next sentence">⏭</button>
     </div>
+    <div class="player-extra">
+      <button id="btn-prepare" class="ghost small" type="button">Prepare all audio</button>
+    </div>
   </footer>
 
   <dialog id="settings">