Better model download management

src/components/ModelPicker.tsx

@@ -19,6 +19,10 @@ interface ModelPickerProps {
   offlineReady: boolean;
   /** True while a transcription is running — switching is disabled then. */
   disabled?: boolean;
+  /** Explicitly download the selected model's weights (D-020). */
+  onDownloadSelected: () => void;
+  /** True while a model load/download is in flight. */
+  downloading: boolean;
 }
 
 const DEVICE_OPTIONS: readonly { value: DevicePreference; label: string }[] = [
@@ -50,6 +54,8 @@ export function ModelPicker({
   downloaded,
   offlineReady,
   disabled = false,
+  onDownloadSelected,
+  downloading,
 }: ModelPickerProps) {
   // Size estimates depend on the dtype the worker will pick, which depends on
   // the device. Until the worker has reported one, assume WASM unless the
@@ -116,7 +122,7 @@ export function ModelPicker({
         {offlineReady
           ? downloaded.size > 0
             ? "Offline ready — the app and the models marked “available offline” work without a network connection."
-            : "The app is cached for offline use. Load a model once to make it available offline too."
+            : "The app is cached for offline use. Download a model (or run one on-device transcription) to make it available offline too."
           : "Offline support is not active yet (the service worker is still installing, or this browser does not support it)."}
       </p>
       {groups.map((group) => (
@@ -153,6 +159,17 @@ export function ModelPicker({
                         </span>
                       )}
                       <span className="model-option-size">~{size}</span>
+                      {isSelected && !isDownloaded && (
+                        <button
+                          type="button"
+                          className="model-download-button"
+                          disabled={disabled || downloading}
+                          title="Download this model now so it is available offline. Otherwise it downloads automatically when an on-device transcription starts."
+                          onClick={onDownloadSelected}
+                        >
+                          {downloading ? "Downloading…" : "Download"}
+                        </button>
+                      )}
                     </span>
                   </label>
                 </li>