feat: first-run wizard pulls models with a real progress bar

New pull_model command streams Ollama /api/pull NDJSON over a Channel
(status lines + completed/total bytes). The wizard's model step gains a
'type any tag to pull' input: uninstalled models download in-app with
a progress bar instead of the old 'run ollama pull yourself' dead end.
The NDJSON line-loop is factored out of the chat streaming path and
shared.

src/components/FirstRunWizard.tsx

@@ -1,13 +1,26 @@
 import { useEffect, useState } from "react";
-import { invoke } from "@tauri-apps/api/core";
+import { invoke, Channel } from "@tauri-apps/api/core";
 import { useToast } from "./Toast";
 
+// ponytail: mirrors the Rust PullEvent enum (adjacently tagged, camelCase).
+type PullEvent =
+  | { type: "progress"; data: { completed: number | null; total: number | null } }
+  | { type: "status"; data: string }
+  | { type: "done" }
+  | { type: "error"; data: string };
+
 export function FirstRunWizard({ onComplete }: { onComplete: () => void }) {
   const [step, setStep] = useState("welcome");
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState("");
   const [models, setModels] = useState<string[]>([]);
   const [selectedModel, setSelectedModel] = useState<string>("");
+  // ponytail: custom tag not in the installed list — pulled in-wizard with a
+  // progress bar instead of the old "run ollama pull yourself" dead end.
+  const [customModel, setCustomModel] = useState("");
+  const [pulling, setPulling] = useState(false);
+  const [pullPct, setPullPct] = useState<number | null>(null);
+  const [pullStatus, setPullStatus] = useState("");
   // ponytail: wizard defaults to local Ollama; no API-key UI here (Settings covers remote).
   const apiUrl = "http://localhost:11434";
   const apiKey = "";
@@ -42,20 +55,18 @@ export function FirstRunWizard({ onComplete }: { onComplete: () => void }) {
     setLoading(false);
   }
 
-  async function pullModel(model: string) {
+  // ponytail: save the chosen model and finish — no pull needed when it's
+  // already installed.
+  async function saveModelAndFinish(model: string) {
     setLoading(true);
     setError("");
     try {
-      // We don't have a direct pull command, but we can suggest the user to run `ollama pull` in terminal.
-      // For now, we'll just set the model in config and hope it exists.
-      // Alternatively, we could invoke a generate command to trigger a pull? Not sure.
-      // We'll just set the config and complete.
       await invoke("set_llm_config", {
         config: {
           provider: "ollama",
           api_url: apiUrl,
           api_key: apiKey,
-          model: model,
+          model,
           temperature: 0.7,
           max_tokens: 512,
           top_p: 0.9,
@@ -63,7 +74,6 @@ export function FirstRunWizard({ onComplete }: { onComplete: () => void }) {
           embed_model: "nomic-embed-text",
         }
       });
-      addToast(`Model ${model} selected. You may need to run 'ollama pull ${model}' if not already downloaded.`, "success");
       setStep("done");
     } catch (e) {
       setError(String(e));
@@ -72,6 +82,42 @@ export function FirstRunWizard({ onComplete }: { onComplete: () => void }) {
     setLoading(false);
   }
 
+  // Real `ollama pull` over the Channel — progress bar driven by the
+  // completed/total bytes Ollama streams; falls back to the status line.
+  async function pullAndFinish(model: string) {
+    setPulling(true);
+    setError("");
+    setPullPct(null);
+    setPullStatus("starting pull…");
+    const channel = new Channel<PullEvent>();
+    let failed = false;
+    channel.onmessage = (ev) => {
+      if (ev.type === "progress") {
+        setPullStatus("");
+        setPullPct(ev.data.completed != null && ev.data.total ? ev.data.completed / ev.data.total : null);
+      } else if (ev.type === "status") {
+        setPullStatus(ev.data);
+        setPullPct(null);
+      } else if (ev.type === "done") {
+        addToast(`Model ${model} pulled`, "success");
+        saveModelAndFinish(model);
+        setPulling(false);
+      } else if (ev.type === "error") {
+        failed = true;
+        setError(`Pull failed: ${ev.data}`);
+        setPulling(false);
+      }
+    };
+    try {
+      await invoke("pull_model", { req: { model }, channel });
+    } catch (e) {
+      if (!failed) {
+        setError(`Pull failed: ${e}`);
+        setPulling(false);
+      }
+    }
+  }
+
   function skip() {
     // Skip wizard and go to settings
     onComplete();
@@ -93,11 +139,17 @@ export function FirstRunWizard({ onComplete }: { onComplete: () => void }) {
       return;
     }
     if (step === "model") {
-      if (!selectedModel) {
-        setError("Please select a model");
+      const model = customModel.trim() || selectedModel;
+      if (!model) {
+        setError("Choose a model or type a tag to pull");
         return;
       }
-      await pullModel(selectedModel);
+      // Installed → save directly; anything else gets pulled first.
+      if (models.includes(model)) {
+        await saveModelAndFinish(model);
+      } else {
+        await pullAndFinish(model);
+      }
       return;
     }
     if (step === "done") {
@@ -193,7 +245,7 @@ export function FirstRunWizard({ onComplete }: { onComplete: () => void }) {
             <label className="text-[var(--color-text-secondary)] text-xs font-medium">Model</label>
             <select
               value={selectedModel}
-              onChange={(e) => setSelectedModel(e.target.value)}
+              onChange={(e) => { setSelectedModel(e.target.value); setCustomModel(""); }}
               className="rounded-lg bg-[var(--color-bg-surface)] border border-[var(--color-border-glass)] px-3 py-2 text-[var(--color-text-primary)] focus:outline-none focus:border-[var(--color-gold-bright)] text-xs cursor-pointer"
             >
               {models.map((m) => (
@@ -204,13 +256,37 @@ export function FirstRunWizard({ onComplete }: { onComplete: () => void }) {
               ))}
             </select>
           </div>
-          <div className="flex flex-col gap-3">
+          <div className="flex flex-col gap-1">
+            <label className="text-[var(--color-text-secondary)] text-xs font-medium">Or type any Ollama tag to pull</label>
+            <input
+              value={customModel}
+              onChange={(e) => { setCustomModel(e.target.value); setSelectedModel(""); }}
+              placeholder="e.g. llama3.2"
+              className="rounded-lg bg-[var(--color-bg-surface)] border border-[var(--color-border-glass)] px-3 py-2 text-[var(--color-text-primary)] placeholder-[var(--color-text-dim)] focus:outline-none focus:border-[var(--color-gold-bright)] text-xs"
+            />
+          </div>
+        </div>
+        {pulling ? (
+          <div className="flex flex-col gap-2 mt-4">
+            <p className="text-[var(--color-text-secondary)] text-xs">Pulling {customModel.trim() || selectedModel} …</p>
+            <div className="w-full h-2 rounded-full bg-[var(--color-bg-surface)] overflow-hidden">
+              <div
+                className="h-full bg-[var(--color-gold-bright)] transition-all duration-300"
+                style={{ width: pullPct != null ? `${Math.round(pullPct * 100)}%` : "100%" }}
+              />
+            </div>
+            <p className="text-[var(--color-text-dim)] text-xs">
+              {pullPct != null ? `${Math.round(pullPct * 100)}%` : pullStatus}
+            </p>
+          </div>
+        ) : (
+          <div className="flex flex-col gap-3 mt-4">
             <button
               onClick={handleSubmit}
-              disabled={loading || !selectedModel}
+              disabled={loading || (!customModel.trim() && !selectedModel)}
               className="rounded-lg bg-[var(--color-gold-bright)] text-[var(--color-bg-deep)] px-4 py-2 text-sm font-semibold hover:bg-[var(--color-gold-muted)] transition-colors cursor-pointer disabled:opacity-50"
             >
-              {loading ? "Setting model…" : "Set Model"}
+              {loading ? "Setting model…" : "Use Model"}
             </button>
             <button
               onClick={back}
@@ -225,14 +301,18 @@ export function FirstRunWizard({ onComplete }: { onComplete: () => void }) {
               Skip for now (go to Settings)
             </button>
           </div>
-        </div>
+        )}
         {error && (
           <p className="text-[var(--color-danger)] text-sm mt-4">{error}</p>
         )}
-        <p className="text-[var(--color-text-dim)] text-sm mt-4">
-          If you don't see your model, you may need to download it first. In a terminal, run:{' '}
-          <code className="font-mono text-[var(--color-gold-bright)]">ollama pull llama3.2</code>
-        </p>
+        {!pulling && (
+          <p className="text-[var(--color-text-dim)] text-xs mt-4">
+            Models not in the list are pulled automatically — type any Ollama tag
+            (e.g. <code className="font-mono text-[var(--color-gold-bright)]">llama3.2</code>, or
+            <code className="font-mono text-[var(--color-gold-bright)]">nomic-embed-text</code> for
+            lore search) and DM-Pal downloads it with a progress bar.
+          </p>
+        )}
       </div>
     );
   }