openpalm 0.9.8 → 0.9.9

package/src/setup-wizard/wizard.js

@@ -18,28 +18,35 @@
      Provider Constants & Defaults
      ========================================================================= */
 
-  const PROVIDER_DEFAULTS = {
-    openai:          { baseUrl: "https://api.openai.com",       llmModel: "gpt-4o",                                   embModel: "text-embedding-3-small",  embDims: 1536 },
-    anthropic:       { baseUrl: "https://api.anthropic.com",    llmModel: "claude-sonnet-4-20250514",                  embModel: "",                        embDims: 0 },
-    groq:            { baseUrl: "https://api.groq.com/openai",  llmModel: "llama-3.3-70b-versatile",                   embModel: "",                        embDims: 0 },
-    together:        { baseUrl: "https://api.together.xyz",     llmModel: "meta-llama/Llama-3.3-70B-Instruct-Turbo",   embModel: "",                        embDims: 0 },
-    mistral:         { baseUrl: "https://api.mistral.ai",       llmModel: "mistral-large-latest",                      embModel: "mistral-embed",           embDims: 1024 },
-    deepseek:        { baseUrl: "https://api.deepseek.com",     llmModel: "deepseek-chat",                             embModel: "",                        embDims: 0 },
-    xai:             { baseUrl: "https://api.x.ai",             llmModel: "grok-2",                                    embModel: "",                        embDims: 0 },
-    ollama:          { baseUrl: "http://localhost:11434",        llmModel: "llama3.2",                                  embModel: "nomic-embed-text",        embDims: 768 },
-    "model-runner":  { baseUrl: "http://localhost:12434",        llmModel: "ai/llama3.2",                               embModel: "ai/mxbai-embed-large-v1", embDims: 1024 },
-    lmstudio:        { baseUrl: "http://localhost:1234",         llmModel: "loaded-model",                              embModel: "",                        embDims: 0 },
-  };
-
-  const PROVIDER_LABELS = {
-    openai: "OpenAI", anthropic: "Anthropic", groq: "Groq",
-    together: "Together AI", mistral: "Mistral", deepseek: "DeepSeek",
-    xai: "xAI (Grok)", ollama: "Ollama", "model-runner": "Docker Model Runner",
-    lmstudio: "LM Studio", "ollama-instack": "Ollama (in-stack)",
-  };
-
-  var CLOUD_PROVIDERS = ["openai", "anthropic", "groq", "together", "mistral", "deepseek", "xai"];
-  var LOCAL_PROVIDERS  = ["ollama", "model-runner", "lmstudio"];
+  var PROVIDER_GROUPS = [
+    { id: "recommended", label: "Recommended", desc: "Best options to get started quickly" },
+    { id: "local", label: "Local", desc: "Run models on your own hardware" },
+    { id: "cloud", label: "Cloud", desc: "Hosted inference providers" },
+    { id: "advanced", label: "Advanced", desc: "Additional providers" },
+  ];
+
+  var PROVIDERS = [
+    // Recommended — best first-run experience
+    { id: "ollama", name: "Ollama", kind: "local", group: "recommended", order: 1, icon: "\uD83E\uDD99", desc: "Run open models on your hardware", needsKey: false, placeholder: "", baseUrl: "http://localhost:11434", llmModel: "llama3.2", embModel: "nomic-embed-text", embDims: 768, canDetect: true },
+    { id: "huggingface", name: "Hugging Face", kind: "cloud", group: "recommended", order: 2, icon: "\uD83E\uDD17", desc: "10,000+ open models via Inference Providers", needsKey: true, placeholder: "hf_...", baseUrl: "https://router.huggingface.co/v1", llmModel: "Qwen/Qwen3-32B", embModel: "intfloat/multilingual-e5-large", embDims: 1024, keyPrefix: "hf_" },
+
+    { id: "openai", name: "OpenAI", kind: "cloud", group: "recommended", order: 3, icon: "\u25D0", desc: "GPT and o-series reasoning models", needsKey: true, placeholder: "sk-...", baseUrl: "https://api.openai.com", llmModel: "gpt-4o", embModel: "text-embedding-3-small", embDims: 1536 },
+    { id: "google", name: "Google", kind: "cloud", group: "recommended", order: 4, icon: "\u25C6", desc: "Gemini models with large context", needsKey: true, placeholder: "AIza...", baseUrl: "https://generativelanguage.googleapis.com", llmModel: "gemini-2.5-flash", embModel: "", embDims: 0, keyPrefix: "AI" },
+
+    // Local — self-hosted model runtimes
+    { id: "model-runner", name: "Docker Model Runner", kind: "local", group: "local", order: 1, icon: "\uD83D\uDC33", desc: "Docker-managed model runtime", needsKey: false, placeholder: "", baseUrl: "http://localhost:12434", llmModel: "ai/llama3.2", embModel: "ai/mxbai-embed-large-v1", embDims: 1024, canDetect: true },
+    { id: "lmstudio", name: "LM Studio", kind: "local", group: "local", order: 2, icon: "\uD83D\uDD2C", desc: "Desktop app for local inference", needsKey: false, placeholder: "", baseUrl: "http://localhost:1234", llmModel: "loaded-model", embModel: "", embDims: 0, canDetect: true },
+
+    // Cloud — hosted inference APIs
+    { id: "groq", name: "Groq", kind: "cloud", group: "cloud", order: 1, icon: "\u26A1", desc: "Ultra-fast inference", needsKey: true, placeholder: "gsk_...", baseUrl: "https://api.groq.com/openai", llmModel: "llama-3.3-70b-versatile", embModel: "", embDims: 0 },
+    { id: "mistral", name: "Mistral", kind: "cloud", group: "cloud", order: 2, icon: "\u25C6", desc: "Mistral & Codestral models", needsKey: true, placeholder: "...", baseUrl: "https://api.mistral.ai", llmModel: "mistral-large-latest", embModel: "mistral-embed", embDims: 1024 },
+    { id: "together", name: "Together AI", kind: "cloud", group: "cloud", order: 3, icon: "\u2726", desc: "Open models at scale", needsKey: true, placeholder: "...", baseUrl: "https://api.together.xyz", llmModel: "meta-llama/Llama-3.3-70B-Instruct-Turbo", embModel: "", embDims: 0 },
+
+    // Advanced — niche or specialized providers
+    { id: "deepseek", name: "DeepSeek", kind: "cloud", group: "advanced", order: 1, icon: "\u25CE", desc: "DeepSeek chat & reasoning", needsKey: true, placeholder: "sk-...", baseUrl: "https://api.deepseek.com", llmModel: "deepseek-chat", embModel: "", embDims: 0 },
+    { id: "xai", name: "xAI (Grok)", kind: "cloud", group: "advanced", order: 2, icon: "\u2726", desc: "Grok models", needsKey: true, placeholder: "xai-...", baseUrl: "https://api.x.ai", llmModel: "grok-2", embModel: "", embDims: 0 },
+    { id: "openai-compatible", name: "Custom (OpenAI-compatible)", kind: "cloud", group: "advanced", order: 3, icon: "\uD83D\uDD27", desc: "Any endpoint that speaks the OpenAI API", needsKey: false, needsUrl: true, optionalKey: true, placeholder: "API key (optional)", baseUrl: "", llmModel: "", embModel: "", embDims: 0 },
+  ];
 
   /** Known embedding dimensions for auto-fill */
   var KNOWN_EMB_DIMS = {
@@ -48,15 +55,64 @@
     "mxbai-embed-large": 1024, "mxbai-embed-large-v1": 1024,
     "ai/mxbai-embed-large-v1": 1024, "mistral-embed": 1024,
     "all-minilm": 384, "snowflake-arctic-embed": 1024,
+    "intfloat/multilingual-e5-large": 1024,
   };
 
+  var STEP_LABELS = ["Welcome", "Providers", "Models", "Voice", "Options", "Review"];
+  var TOTAL_STEPS = 6;
+
+  /* =========================================================================
+     Voice / TTS / STT Options
+     ========================================================================= */
+
+  var TTS_OPTIONS = [
+    { id: "kokoro", name: "Kokoro TTS", type: "local", recommended: true, desc: "High-quality local TTS \u2014 runs on CPU" },
+    { id: "piper", name: "Piper TTS", type: "local", desc: "Ultra-lightweight \u2014 great for low-power hardware" },
+    { id: "openai-tts", name: "OpenAI TTS", type: "cloud", desc: "Cloud voices. Uses your OpenAI API key" },
+    { id: "browser-tts", name: "Browser Built-in", type: "builtin", desc: "Native speech synthesis. No setup needed" },
+    { id: "skip-tts", name: "Skip \u2014 text only", type: "skip", desc: "Add TTS later from the dashboard" },
+  ];
+
+  var STT_OPTIONS = [
+    { id: "whisper-local", name: "Whisper (local)", type: "local", recommended: true, desc: "Whisper in Docker. Accurate, private" },
+    { id: "openai-stt", name: "OpenAI Whisper", type: "cloud", desc: "Cloud Whisper API. Uses OpenAI key" },
+    { id: "browser-stt", name: "Browser Built-in", type: "builtin", desc: "Web Speech API. No setup" },
+    { id: "skip-stt", name: "Skip \u2014 text only", type: "skip", desc: "Add STT later from the dashboard" },
+  ];
+
+  /* =========================================================================
+     Channel & Service Constants
+     ========================================================================= */
+
+  var CHANNELS = [
+    { id: "chat", name: "Web Chat", icon: "\uD83D\uDCAC", desc: "Browser-based chat \u2014 always available", locked: true },
+    { id: "api", name: "API", icon: "\uD83D\uDD0C", desc: "OpenAI-compatible REST API endpoint" },
+    {
+      id: "discord", name: "Discord", icon: "\uD83C\uDFAE", desc: "Connect to a Discord server",
+      credentials: [
+        { key: "botToken", label: "Bot Token", placeholder: "Paste Discord bot token", required: true },
+        { key: "applicationId", label: "Application ID", placeholder: "Discord application ID", secret: false },
+      ]
+    },
+    {
+      id: "slack", name: "Slack", icon: "\uD83D\uDCBC", desc: "Access via Slack bot",
+      credentials: [
+        { key: "slackBotToken", label: "Bot Token", placeholder: "xoxb-...", required: true },
+        { key: "slackAppToken", label: "App Token", placeholder: "xapp-...", required: true },
+      ]
+    },
+  ];
+
+  var SERVICES = [
+    { id: "admin", name: "Admin Dashboard", icon: "\u2699\uFE0F", desc: "Web-based admin UI for managing your stack", recommended: true },
+    { id: "openviking", name: "OpenViking", icon: "\u2694\uFE0F", desc: "Agentic task execution engine" },
+  ];
+
   /* =========================================================================
      DOM Helpers
      ========================================================================= */
 
   function $(id) { return document.getElementById(id); }
-  function qs(sel) { return document.querySelector(sel); }
-  function qsa(sel) { return document.querySelectorAll(sel); }
   function show(el) { if (el) el.classList.remove("hidden"); }
   function hide(el) { if (el) el.classList.add("hidden"); }
   function showError(el, msg) { if (el) { el.textContent = msg; show(el); } }
@@ -68,27 +124,32 @@
 
   var currentStep = 0;
   var maxVisitedStep = 0;
+  var welcomeHeroDismissed = false;
 
-  /** @type {Array<{id:string, name:string, provider:string, baseUrl:string, apiKey:string, kind:string, models:string[]}>} */
-  var connections = [];
+  /** Provider selection state: { providerId: { selected, verified, verifying, error, apiKey, baseUrl, models[], ollamaMode } } */
+  var providerState = {};
 
-  /** Provider detection results from /api/setup/detect-providers */
-  var detectedProviders = [];
+  /** Expanded provider card (only one at a time) */
+  var expandedProvider = null;
 
-  /** Model lists fetched per connection id */
-  var modelCache = {};
+  /** Provider detection results */
+  var detectedProviders = [];
 
-  /** Currently editing connection index (-1 = not editing) */
-  var editingIdx = -1;
+  /** Model selection: { llm: {connId, model}, embedding: {connId, model, dims}, small: {connId, model} } */
+  var modelSelection = {};
 
-  /** Sub-view state for step 1: "hub" | "chooser" | "form" */
-  var connView = "hub";
+  /** Voice selection state */
+  var voiceSelection = { tts: null, stt: null };
 
-  /** Draft connection kind while adding: "cloud" | "local" */
-  var draftKind = "cloud";
+  /** Channel selection state (chat always on) */
+  var channelSelection = {
+    chat: true,
+    discord: { enabled: false, botToken: "", applicationId: "" },
+    slack: { enabled: false, slackBotToken: "", slackAppToken: "" },
+  };
 
-  /** Draft connection provider while in form */
-  var draftProvider = "openai";
+  /** Services selection state (admin default on) */
+  var serviceSelection = { admin: true };
 
   /** Deploy polling timer */
   var deployTimer = null;
@@ -96,6 +157,20 @@
   /** Whether install is in progress */
   var installing = false;
 
+  // Initialize provider states
+  PROVIDERS.forEach(function (p) {
+    providerState[p.id] = {
+      selected: false,
+      verified: false,
+      verifying: false,
+      error: false,
+      apiKey: "",
+      baseUrl: p.baseUrl || "",
+      models: [],
+      ollamaMode: null, // null | "running" | "instack"
+    };
+  });
+
   /* =========================================================================
      Token Generation
      ========================================================================= */
@@ -106,15 +181,16 @@
     return Array.from(arr, function (b) { return b.toString(16).padStart(2, "0"); }).join("");
   }
 
+  function generateId() {
+    return Math.random().toString(36).slice(2, 10);
+  }
+
   /* =========================================================================
      Step Navigation
      ========================================================================= */
 
-  var TOTAL_STEPS = 5; // 0..4
-
   function goToStep(n) {
     if (n < 0 || n > TOTAL_STEPS - 1) return;
-    // Hide all step sections
     for (var i = 0; i < TOTAL_STEPS; i++) {
       var sec = $("step-" + i);
       if (sec) { if (i === n) show(sec); else hide(sec); }
@@ -123,13 +199,14 @@
 
     currentStep = n;
     if (n > maxVisitedStep) maxVisitedStep = n;
-    updateStepIndicators();
+    renderProgressBar();
 
-    // Step-specific init
+    if (n === 0) initStep0();
     if (n === 1) initStep1();
     if (n === 2) initStep2();
     if (n === 3) initStep3();
     if (n === 4) initStep4();
+    if (n === 5) initStep5();
   }
 
   function showDeployScreen() {
@@ -138,34 +215,40 @@
     hide($("step-indicators"));
   }
 
-  function updateStepIndicators() {
+  function renderProgressBar() {
     show($("step-indicators"));
-    var dots = qsa(".step-dot");
-    var lines = qsa(".step-line");
-    dots.forEach(function (dot, i) {
-      dot.classList.remove("active", "completed");
-      dot.removeAttribute("aria-current");
-      if (i === currentStep) {
-        dot.classList.add("active");
-        dot.setAttribute("aria-current", "step");
-        dot.innerHTML = String(i + 1);
-      } else if (i < maxVisitedStep || (i <= maxVisitedStep && i < currentStep)) {
-        dot.classList.add("completed");
-        dot.innerHTML = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>';
-        dot.disabled = false;
-      } else {
-        dot.innerHTML = String(i + 1);
-        dot.disabled = (i > maxVisitedStep);
-      }
-    });
-    lines.forEach(function (line, i) {
-      if (i < maxVisitedStep) line.classList.add("active");
-      else line.classList.remove("active");
+    var segHTML = "";
+    var lblHTML = "";
+    for (var i = 0; i < TOTAL_STEPS; i++) {
+      segHTML += '<div class="prog-seg ' + (i <= currentStep ? "on" : "") + '"></div>';
+      var cls = "prog-lbl";
+      if (i <= currentStep) cls += " on";
+      if (i === currentStep) cls += " active";
+      lblHTML += '<span class="' + cls + '" data-prog-step="' + i + '">' + STEP_LABELS[i] + '</span>';
+    }
+    $("prog-segments").innerHTML = segHTML;
+    $("prog-labels").innerHTML = lblHTML;
+
+    // Bind label clicks
+    var labels = document.querySelectorAll("[data-prog-step]");
+    labels.forEach(function (lbl) {
+      lbl.addEventListener("click", function () {
+        var step = parseInt(lbl.dataset.progStep, 10);
+        if (isNaN(step) || step > maxVisitedStep) return;
+        if (step > currentStep) {
+          if (step >= 1 && !validateStep0()) return;
+          if (step >= 2 && getVerifiedCount() === 0) return;
+          if (step >= 3 && !validateStep2()) return;
+          // Step 3 (voice) has no hard validation gate
+          if (step >= 5 && !validateStep4()) return;
+        }
+        goToStep(step);
+      });
     });
   }
 
   /* =========================================================================
-     Step 0: Welcome & Admin Token
+     Step 0: Welcome & Identity
      ========================================================================= */
 
   function initStep0() {
@@ -173,6 +256,14 @@
     if (tokenInput && !tokenInput.value) {
       tokenInput.value = generateToken();
     }
+    // Show hero or form based on state
+    if (!welcomeHeroDismissed) {
+      show($("welcome-hero"));
+      hide($("identity-form"));
+    } else {
+      hide($("welcome-hero"));
+      show($("identity-form"));
+    }
   }
 
   function validateStep0() {
@@ -187,458 +278,653 @@
   }
 
   /* =========================================================================
-     Step 1: Connection Setup
+     Step 1: Provider Card Grid
      ========================================================================= */
 
   function initStep1() {
-    renderConnHub();
-    setConnView("hub");
+    renderProviderGrid();
     // Auto-detect on first visit
-    if (detectedProviders.length === 0 && connections.length === 0) {
+    if (detectedProviders.length === 0 && getVerifiedCount() === 0) {
       detectProviders();
     }
   }
 
-  function setConnView(view) {
-    connView = view;
-    var hubList = $("conn-hub-list");
-    var hubEmpty = $("conn-hub-empty");
-    var chooser = $("conn-type-chooser");
-    var form = $("conn-detail-form");
-    var actions = $("step1-actions");
-
-    hide(hubList); hide(hubEmpty); hide(chooser); hide(form); hide(actions);
-
-    if (view === "hub") {
-      if (connections.length > 0) { show(hubList); } else { show(hubEmpty); }
-      show(actions);
-      $("btn-step1-next").disabled = connections.length === 0;
-    } else if (view === "chooser") {
-      show(chooser);
-    } else if (view === "form") {
-      show(form);
-    }
+  function getVerifiedCount() {
+    var count = 0;
+    PROVIDERS.forEach(function (p) {
+      if (providerState[p.id].verified) count++;
+    });
+    return count;
   }
 
-  function renderConnHub() {
-    var list = $("conn-hub-list");
-    list.innerHTML = "";
-    connections.forEach(function (conn, i) {
-      var li = document.createElement("li");
-      li.className = "hub-row";
-      li.innerHTML =
-        '<div class="hub-row-info">' +
-          '<span class="hub-row-name">' + esc(conn.name || conn.provider) + "</span>" +
-          '<span class="hub-row-badge">' + (conn.kind === "local" ? "Local" : "Cloud") + "</span>" +
-          '<span class="hub-row-url">' + esc(conn.baseUrl) + "</span>" +
-        "</div>" +
-        '<div class="hub-row-actions">' +
-          '<button class="hub-action" data-action="edit" data-idx="' + i + '">Edit</button>' +
-          '<button class="hub-action hub-action--danger" data-action="remove" data-idx="' + i + '">Remove</button>' +
-        "</div>";
-      list.appendChild(li);
+  function renderProviderGrid() {
+    var grid = $("provider-grid");
+    var html = "";
+
+    PROVIDER_GROUPS.forEach(function (g) {
+      var members = PROVIDERS.filter(function (p) { return p.group === g.id; })
+        .sort(function (a, b) { return a.order - b.order; });
+      if (members.length === 0) return;
+
+      html += '<div class="provider-group">';
+      html += '<div class="provider-group-header">';
+      html += '<h3 class="provider-group-label">' + esc(g.label) + '</h3>';
+      html += '<span class="provider-group-desc">' + esc(g.desc) + '</span>';
+      html += '</div>';
+      html += '<div class="provider-group-cards">';
+      members.forEach(function (p) { html += renderProviderCard(p); });
+      html += '</div></div>';
     });
-  }
 
-  function openAddConnection() {
-    editingIdx = -1;
-    setConnView("chooser");
-  }
+    grid.innerHTML = html;
 
-  function openConnectionForm(kind) {
-    draftKind = kind;
-    if (editingIdx >= 0) {
-      var conn = connections[editingIdx];
-      draftProvider = conn.provider;
-      draftKind = conn.kind;
+    // Update nav info
+    var vc = getVerifiedCount();
+    var info = $("provider-count-info");
+    if (vc > 0) {
+      info.innerHTML = '<b>' + vc + '</b> provider' + (vc > 1 ? 's' : '') + ' ready';
     } else {
-      draftProvider = kind === "cloud" ? "openai" : "ollama";
+      info.textContent = 'Connect at least one';
     }
-    renderConnectionForm();
-    setConnView("form");
+    $("btn-step1-next").disabled = vc === 0;
+
+    bindProviderEvents();
   }
 
-  function renderConnectionForm() {
-    var modeCard = $("conn-mode-card");
-    var badge = $("conn-mode-badge");
-    var title = $("conn-mode-title");
-    var cloudPicks = $("cloud-provider-picks");
-    var localList = $("local-provider-list");
-    var apikeyGroup = $("conn-apikey-group");
-
-    // Mode card styling
-    modeCard.className = "connection-mode-card connection-mode-card--" + draftKind;
-    if (draftKind === "cloud") {
-      badge.textContent = "Cloud";
-      title.textContent = "Remote provider";
-      show(cloudPicks);
-      hide(localList);
-      show(apikeyGroup);
-    } else {
-      badge.textContent = "Local";
-      title.textContent = "Local provider";
-      hide(cloudPicks);
-      show(localList);
-      hide(apikeyGroup);
+  function renderProviderCard(p) {
+    var st = providerState[p.id];
+    var isExpanded = expandedProvider === p.id && st.selected;
+    var cls = "pcard";
+    if (st.selected) cls += " selected";
+    if (st.verified) cls += " verified";
+    if (isExpanded) cls += " wide";
+
+    var badgeCls = p.kind === "cloud" ? "badge-cloud" : p.kind === "local" ? "badge-local" : "badge-hybrid";
+    var vi = "";
+    if (st.verified) vi = '<span class="vs vs-ok">\u2713</span>';
+    else if (st.verifying) vi = '<span class="vs vs-wait">\u27F3</span>';
+    else if (st.error) vi = '<span class="vs vs-err">\u2717</span>';
+
+    var html = '<div class="' + cls + '" data-provider="' + p.id + '">';
+    html += '<div class="pcard-header" data-toggle-provider="' + p.id + '">';
+    html += '<div class="pcard-icon">' + esc(p.icon) + '</div>';
+    html += '<div class="pcard-info">';
+    html += '<div class="pcard-name">' + esc(p.name) + ' <span class="badge ' + badgeCls + '">' + p.kind + '</span>' + vi + '</div>';
+    html += '<div class="pcard-desc">' + esc(p.desc) + '</div>';
+    html += '</div>';
+    html += '<div class="pcard-check">' + (st.selected ? '\u2713' : '') + '</div>';
+    html += '</div>';
+
+    if (isExpanded) {
+      html += renderProviderAuth(p);
     }
 
-    // Cloud provider chips
-    cloudPicks.innerHTML = "";
-    CLOUD_PROVIDERS.forEach(function (p) {
-      var chip = document.createElement("button");
-      chip.type = "button";
-      chip.className = "provider-chip" + (p === draftProvider ? " selected" : "");
-      chip.textContent = PROVIDER_LABELS[p] || p;
-      chip.addEventListener("click", function () {
-        draftProvider = p;
-        applyProviderDefaults();
-        renderConnectionForm();
-      });
-      cloudPicks.appendChild(chip);
-    });
+    html += '</div>';
+    return html;
+  }
 
-    // Local detected providers
-    localList.innerHTML = "";
-    var localDetected = detectedProviders.filter(function (d) { return d.available; });
-    if (localDetected.length > 0) {
-      localDetected.forEach(function (dp) {
-        var opt = document.createElement("button");
-        opt.type = "button";
-        opt.className = "provider-option" + (dp.provider === draftProvider ? " selected" : "");
-        opt.innerHTML =
-          '<span class="provider-option-status"><span class="status-dot--ok"></span></span>' +
-          '<span class="provider-option-label">' + esc(PROVIDER_LABELS[dp.provider] || dp.provider) + "</span>" +
-          '<span class="provider-option-hint">Detected at ' + esc(dp.url) + "</span>";
-        opt.addEventListener("click", function () {
-          draftProvider = dp.provider;
-          $("conn-base-url").value = dp.url;
-          $("conn-name").value = PROVIDER_LABELS[dp.provider] || dp.provider;
-          renderConnectionForm();
-        });
-        localList.appendChild(opt);
-      });
+  function renderProviderAuth(p) {
+    var st = providerState[p.id];
+    var html = '<div class="pcard-auth">';
+
+    if (p.id === "ollama") {
+      // Ollama: show mode selector first
+      if (!st.ollamaMode) {
+        html += '<div class="ollama-mode-prompt">';
+        html += '<p>Is Ollama already running on this machine?</p>';
+        html += '<div class="ollama-mode-buttons">';
+        html += '<button class="ollama-mode-btn ollama-mode-btn-detect" data-ollama-mode="running">Yes, detect it</button>';
+        html += '<button class="ollama-mode-btn ollama-mode-btn-stack" data-ollama-mode="instack">No, add to stack</button>';
+        html += '</div></div>';
+      } else if (st.ollamaMode === "running") {
+        html += '<div class="auth-row">';
+        html += '<input type="url" placeholder="' + esc(p.baseUrl) + '" value="' + esc(st.baseUrl || p.baseUrl) + '" data-auth-url="' + p.id + '">';
+        html += '<button class="auth-btn ' + (st.verified ? 'auth-btn-detected' : 'auth-btn-detect') + '" data-auth-verify="' + p.id + '" ' + (st.verifying ? 'disabled' : '') + '>';
+        html += st.verifying ? 'Detecting...' : st.verified ? 'Connected \u2713' : 'Detect';
+        html += '</button></div>';
+      } else {
+        // instack mode
+        if (st.verified) {
+          html += '<div class="auth-feedback auth-feedback-ok">Ollama will be added to your Docker stack with default models.</div>';
+        } else {
+          html += '<div class="ollama-mode-prompt">';
+          html += '<p>Ollama runs as a container in your stack with recommended models pre-configured.</p>';
+          html += '<button class="auth-btn auth-btn-detect" data-auth-verify="' + p.id + '" style="margin-top:4px">Enable Ollama</button>';
+          html += '</div>';
+        }
+      }
+    } else if (p.needsUrl) {
+      // Custom provider: URL (required) + optional API key
+      html += '<div class="auth-row">';
+      html += '<input type="url" placeholder="https://your-server.example/v1" value="' + esc(st.baseUrl || '') + '" data-auth-url="' + p.id + '">';
+      html += '</div>';
+      if (p.optionalKey) {
+        html += '<div class="auth-row" style="margin-top:6px">';
+        html += '<input type="password" placeholder="' + esc(p.placeholder || 'API key (optional)') + '" value="' + esc(st.apiKey) + '" data-auth-key="' + p.id + '">';
+        html += '</div>';
+      }
+      html += '<div class="auth-row" style="margin-top:6px">';
+      html += '<button class="auth-btn ' + (st.verified ? 'auth-btn-verified' : 'auth-btn-verify') + '" data-auth-verify="' + p.id + '" ' + (st.verifying ? 'disabled' : '') + '>';
+      html += st.verifying ? 'Checking...' : st.verified ? 'Connected \u2713' : 'Connect';
+      html += '</button></div>';
+    } else if (p.needsKey) {
+      // Cloud provider: API key + verify
+      html += '<div class="auth-row">';
+      html += '<input type="password" placeholder="' + esc(p.placeholder || 'API key') + '" value="' + esc(st.apiKey) + '" data-auth-key="' + p.id + '">';
+      html += '<button class="auth-btn ' + (st.verified ? 'auth-btn-verified' : 'auth-btn-verify') + '" data-auth-verify="' + p.id + '" ' + (st.verifying ? 'disabled' : '') + '>';
+      html += st.verifying ? 'Checking...' : st.verified ? 'Verified \u2713' : 'Verify';
+      html += '</button></div>';
     } else {
-      // Fallback: let user pick local provider
-      LOCAL_PROVIDERS.forEach(function (p) {
-        var opt = document.createElement("button");
-        opt.type = "button";
-        opt.className = "provider-option" + (p === draftProvider ? " selected" : "");
-        opt.innerHTML =
-          '<span class="provider-option-label">' + esc(PROVIDER_LABELS[p] || p) + "</span>";
-        opt.addEventListener("click", function () {
-          draftProvider = p;
-          applyProviderDefaults();
-          renderConnectionForm();
-        });
-        localList.appendChild(opt);
-      });
+      // Local provider with URL
+      html += '<div class="auth-row">';
+      html += '<input type="url" placeholder="' + esc(p.baseUrl || 'http://localhost:8080') + '" value="' + esc(st.baseUrl || p.baseUrl || '') + '" data-auth-url="' + p.id + '">';
+      html += '<button class="auth-btn ' + (st.verified ? 'auth-btn-detected' : 'auth-btn-detect') + '" data-auth-verify="' + p.id + '" ' + (st.verifying ? 'disabled' : '') + '>';
+      html += st.verifying ? 'Detecting...' : st.verified ? 'Connected \u2713' : 'Detect';
+      html += '</button></div>';
     }
 
-    // Fill defaults if new connection
-    if (editingIdx < 0) {
-      applyProviderDefaults();
-    } else {
-      var c = connections[editingIdx];
-      $("conn-name").value = c.name;
-      $("conn-base-url").value = c.baseUrl;
-      $("conn-api-key").value = c.apiKey;
+    // Feedback messages
+    if (st.verified && p.id !== "ollama") {
+      html += '<div class="auth-feedback auth-feedback-ok">Credentials verified</div>';
+    } else if (st.error) {
+      var errMsg = st.errorMessage ? esc(st.errorMessage) : 'check your ' + (p.needsKey ? 'credentials' : 'endpoint');
+      html += '<div class="auth-feedback auth-feedback-err">Verification failed -- ' + errMsg + '</div>';
     }
 
-    // Reset test status
-    hide($("conn-test-success"));
-    hideError($("conn-detail-error"));
+    html += '</div>';
+    return html;
   }
 
-  function applyProviderDefaults() {
-    var def = PROVIDER_DEFAULTS[draftProvider];
-    if (!def) return;
-    var nameInput = $("conn-name");
-    var urlInput = $("conn-base-url");
-    if (!nameInput.value || isDefaultName(nameInput.value)) {
-      nameInput.value = PROVIDER_LABELS[draftProvider] || draftProvider;
-    }
-    urlInput.value = def.baseUrl;
-    $("conn-api-key").value = "";
-  }
-
-  function isDefaultName(name) {
-    for (var key in PROVIDER_LABELS) {
-      if (PROVIDER_LABELS[key] === name) return true;
-    }
-    return false;
-  }
+  function bindProviderEvents() {
+    // Card header toggle (select/expand)
+    document.querySelectorAll("[data-toggle-provider]").forEach(function (el) {
+      el.addEventListener("click", function (e) {
+        var id = el.dataset.toggleProvider;
+        var st = providerState[id];
+        if (st.selected) {
+          // Already selected: toggle expand
+          expandedProvider = expandedProvider === id ? null : id;
+        } else {
+          // Select and expand
+          st.selected = true;
+          expandedProvider = id;
+          // Auto-fill from detection
+          var detected = detectedProviders.find(function (d) { return d.provider === id && d.available; });
+          if (detected) {
+            st.baseUrl = detected.url;
+          }
+        }
+        renderProviderGrid();
+      });
+    });
 
-  function saveConnection() {
-    var errEl = $("conn-detail-error");
-    hideError(errEl);
+    // Check icon: deselect provider
+    document.querySelectorAll(".pcard-check").forEach(function (el) {
+      el.addEventListener("click", function (e) {
+        e.stopPropagation();
+        var card = el.closest("[data-provider]");
+        if (!card) return;
+        var id = card.dataset.provider;
+        var st = providerState[id];
+        if (st.selected) {
+          st.selected = false;
+          st.verified = false;
+          st.verifying = false;
+          st.error = false;
+          st.apiKey = "";
+          st.models = [];
+          if (id === "ollama") st.ollamaMode = null;
+          if (expandedProvider === id) expandedProvider = null;
+          renderProviderGrid();
+        }
+      });
+    });
 
-    var name = ($("conn-name").value || "").trim();
-    var baseUrl = ($("conn-base-url").value || "").trim();
-    var apiKey = ($("conn-api-key").value || "").trim();
+    // Auth inputs (don't re-render on typing)
+    document.querySelectorAll("[data-auth-key]").forEach(function (el) {
+      el.addEventListener("input", function () {
+        providerState[el.dataset.authKey].apiKey = el.value;
+      });
+      el.addEventListener("click", function (e) { e.stopPropagation(); });
+    });
 
-    if (!name) { showError(errEl, "Connection name is required."); return; }
-    if (!baseUrl) { showError(errEl, "Base URL is required."); return; }
-    if (draftKind === "cloud" && !apiKey && draftProvider !== "anthropic") {
-      showError(errEl, "API key is required for cloud providers.");
-      return;
-    }
+    document.querySelectorAll("[data-auth-url]").forEach(function (el) {
+      el.addEventListener("input", function () {
+        providerState[el.dataset.authUrl].baseUrl = el.value;
+      });
+      el.addEventListener("click", function (e) { e.stopPropagation(); });
+    });
 
-    var conn = {
-      id: editingIdx >= 0 ? connections[editingIdx].id : generateId(),
-      name: name,
-      provider: draftProvider,
-      baseUrl: baseUrl,
-      apiKey: apiKey,
-      kind: draftKind,
-      models: editingIdx >= 0 ? connections[editingIdx].models : [],
-    };
+    // Verify buttons
+    document.querySelectorAll("[data-auth-verify]").forEach(function (el) {
+      el.addEventListener("click", function (e) {
+        e.stopPropagation();
+        verifyProvider(el.dataset.authVerify);
+      });
+    });
 
-    if (editingIdx >= 0) {
-      connections[editingIdx] = conn;
-    } else {
-      connections.push(conn);
-    }
+    // Ollama mode buttons
+    document.querySelectorAll("[data-ollama-mode]").forEach(function (el) {
+      el.addEventListener("click", function (e) {
+        e.stopPropagation();
+        var mode = el.dataset.ollamaMode;
+        providerState.ollama.ollamaMode = mode;
+        renderProviderGrid();
+      });
+    });
 
-    editingIdx = -1;
-    renderConnHub();
-    setConnView("hub");
   }
 
-  function removeConnection(idx) {
-    connections.splice(idx, 1);
-    renderConnHub();
-    setConnView("hub");
-  }
+  /** Monotonic counter to discard stale verification results */
+  var verifyGeneration = {};
 
-  function editConnectionAt(idx) {
-    editingIdx = idx;
-    var conn = connections[idx];
-    draftKind = conn.kind;
-    draftProvider = conn.provider;
-    renderConnectionForm();
-    setConnView("form");
-  }
+  async function verifyProvider(id) {
+    var p = PROVIDERS.find(function (x) { return x.id === id; });
+    if (!p) return;
+    var st = providerState[id];
 
-  /** Test connection by fetching models */
-  async function testConnection() {
-    var errEl = $("conn-detail-error");
-    hideError(errEl);
-    hide($("conn-test-success"));
+    // For ollama instack mode, just mark verified
+    if (id === "ollama" && st.ollamaMode === "instack") {
+      st.verified = true;
+      st.error = false;
+      renderProviderGrid();
+      return;
+    }
 
-    var baseUrl = ($("conn-base-url").value || "").trim();
-    var apiKey = ($("conn-api-key").value || "").trim();
-    if (!baseUrl) { showError(errEl, "Base URL is required."); return; }
+    // Bump generation so any in-flight verify for this provider is ignored
+    var gen = (verifyGeneration[id] || 0) + 1;
+    verifyGeneration[id] = gen;
 
-    var btn = $("btn-conn-test");
-    btn.disabled = true;
-    btn.innerHTML = '<span class="spinner"></span> Testing...';
+    st.verifying = true;
+    st.error = false;
+    renderProviderGrid();
+
+    var baseUrl = st.baseUrl || p.baseUrl;
+    var apiKey = st.apiKey || "";
 
     try {
-      var models = await apiFetchModels(draftProvider, baseUrl, apiKey);
-      if (models && models.length > 0) {
-        show($("conn-test-success"));
-        $("conn-test-msg").textContent = "Connected -- " + models.length + " model" + (models.length !== 1 ? "s" : "") + " found.";
-        // Store models for this draft
-        if (editingIdx >= 0) {
-          connections[editingIdx].models = models;
-        } else {
-          // Will store when saved
-          modelCache["_draft"] = models;
-        }
-      } else {
-        show($("conn-test-success"));
-        $("conn-test-msg").textContent = "Connected (no models listed).";
-      }
+      var result = await apiFetchModels(id, baseUrl, apiKey);
+      // Discard if a newer verify was started while we were waiting
+      if (verifyGeneration[id] !== gen) return;
+      st.verified = true;
+      st.error = false;
+      st.models = result.models || [];
     } catch (e) {
-      showError(errEl, "Connection failed: " + (e.message || "unknown error"));
+      if (verifyGeneration[id] !== gen) return;
+      st.verified = false;
+      st.error = true;
+      st.errorMessage = e.message || "";
+      st.models = [];
     }
 
-    btn.disabled = false;
-    btn.textContent = "Test";
-  }
-
-  function generateId() {
-    return Math.random().toString(36).slice(2, 10);
+    st.verifying = false;
+    renderProviderGrid();
   }
 
   /* =========================================================================
-     Step 2: Model Assignment
+     Step 2: Model Assignment (Radio Options)
      ========================================================================= */
 
   function initStep2() {
-    populateConnectionSelects();
+    buildModelOptions();
+  }
+
+  function getVerifiedProviders() {
+    return PROVIDERS.filter(function (p) { return providerState[p.id].verified; });
   }
 
-  function populateConnectionSelects() {
-    var llmSel = $("llm-connection");
-    var embSel = $("emb-connection");
-    var prevLlm = llmSel.value;
-    var prevEmb = embSel.value;
-
-    // Rebuild options
-    llmSel.innerHTML = '<option value="" disabled>Select a connection</option>';
-    embSel.innerHTML = '<option value="" disabled>Select a connection</option>';
-
-    connections.forEach(function (conn) {
-      var o1 = document.createElement("option");
-      o1.value = conn.id;
-      o1.textContent = conn.name || conn.provider;
-      llmSel.appendChild(o1);
-
-      var o2 = document.createElement("option");
-      o2.value = conn.id;
-      o2.textContent = conn.name || conn.provider;
-      embSel.appendChild(o2);
+  function getAllModels() {
+    var result = [];
+    getVerifiedProviders().forEach(function (p) {
+      var st = providerState[p.id];
+      st.models.forEach(function (m) {
+        result.push({ id: m, provider: p.id, providerName: p.name, baseUrl: st.baseUrl || p.baseUrl, apiKey: st.apiKey });
+      });
     });
+    return result;
+  }
 
-    // Restore or auto-select
-    if (prevLlm && connections.some(function (c) { return c.id === prevLlm; })) {
-      llmSel.value = prevLlm;
-    } else if (connections.length > 0) {
-      llmSel.value = connections[0].id;
-    }
+  var MAX_VISIBLE_MODELS = 6;
+
+  function buildModelOptions() {
+    var allModels = getAllModels();
+    var verifiedProviders = getVerifiedProviders();
+    var groupsEl = $("model-groups");
+
+    // Define model roles
+    var roles = [
+      { id: "llm", label: "Chat Model (LLM)", tag: "required", desc: "Conversations, reasoning, and code" },
+      { id: "embedding", label: "Embedding Model", tag: "optional", desc: "Memory search and recall" },
+      { id: "small", label: "Small Model", tag: "optional", desc: "Lightweight tasks like memory extraction" },
+    ];
+
+    var html = "";
+
+    roles.forEach(function (role) {
+      // Build options for this role from each verified provider's models
+      var options = [];
+      verifiedProviders.forEach(function (p) {
+        var st = providerState[p.id];
+        var defaultModel = role.id === "embedding" ? p.embModel : p.llmModel;
+        var models = st.models.length > 0 ? st.models : [];
+
+        // Add the default model as top pick if in the list
+        if (defaultModel && models.indexOf(defaultModel) >= 0) {
+          options.push({
+            id: defaultModel,
+            connId: p.id,
+            providerName: p.name,
+            baseUrl: st.baseUrl || p.baseUrl,
+            isDefault: true,
+            dims: role.id === "embedding" ? (KNOWN_EMB_DIMS[defaultModel] || KNOWN_EMB_DIMS[defaultModel.replace(/:.*$/, "")] || p.embDims || 0) : 0,
+          });
+        }
 
-    if (prevEmb && connections.some(function (c) { return c.id === prevEmb; })) {
-      embSel.value = prevEmb;
-    } else if (connections.length > 0) {
-      embSel.value = connections[0].id;
-    }
+        // Add other models
+        models.forEach(function (m) {
+          if (m === defaultModel) return; // Already added above
+          var dims = 0;
+          if (role.id === "embedding") {
+            dims = KNOWN_EMB_DIMS[m] || KNOWN_EMB_DIMS[m.replace(/:.*$/, "")] || 0;
+          }
+          options.push({
+            id: m,
+            connId: p.id,
+            providerName: p.name,
+            baseUrl: st.baseUrl || p.baseUrl,
+            isDefault: false,
+            dims: dims,
+          });
+        });
+      });
 
-    // Fetch models for selected connections
-    if (llmSel.value) loadModelsForConnection(llmSel.value, "llm");
-    if (embSel.value) loadModelsForConnection(embSel.value, "emb");
-  }
+      // For embedding role, filter to models with known dims, plus provider defaults
+      if (role.id === "embedding") {
+        var embOptions = options.filter(function (o) {
+          return o.isDefault || o.dims > 0;
+        });
+        if (embOptions.length > 0) options = embOptions;
+      }
 
-  async function loadModelsForConnection(connId, target) {
-    var conn = connections.find(function (c) { return c.id === connId; });
-    if (!conn) return;
-
-    var modelSel = $(target + "-model");
-    var smallSel = target === "llm" ? $("llm-small-model") : null;
-
-    // Try cached models first
-    var models = conn.models && conn.models.length > 0
-      ? conn.models
-      : (modelCache[connId] || null);
-
-    if (!models) {
-      modelSel.innerHTML = '<option value="">Fetching models...</option>';
-      if (smallSel) smallSel.innerHTML = '<option value="">(loading...)</option>';
-      try {
-        models = await apiFetchModels(conn.provider, conn.baseUrl, conn.apiKey);
-        conn.models = models;
-        modelCache[connId] = models;
-      } catch (e) {
-        models = [];
+      // Small model: same as LLM options but with "(same as chat)" default
+      if (role.id === "small" && options.length === 0) {
+        // Use llm options
+        var llmProvider = verifiedProviders[0];
+        if (llmProvider) {
+          providerState[llmProvider.id].models.forEach(function (m) {
+            options.push({
+              id: m,
+              connId: llmProvider.id,
+              providerName: llmProvider.name,
+              baseUrl: providerState[llmProvider.id].baseUrl || llmProvider.baseUrl,
+              isDefault: false,
+              dims: 0,
+            });
+          });
+        }
       }
-    }
 
-    var def = PROVIDER_DEFAULTS[conn.provider] || {};
-    var prevVal = modelSel.value;
+      if (options.length === 0 && role.id !== "small") return;
 
-    if (models.length > 0) {
-      modelSel.innerHTML = "";
-      models.forEach(function (m) {
-        var o = document.createElement("option");
-        o.value = m;
-        o.textContent = m;
-        modelSel.appendChild(o);
-      });
+      // Auto-select default
+      if (!modelSelection[role.id] && options.length > 0) {
+        var defaultOpt = options.find(function (o) { return o.isDefault; }) || options[0];
+        if (defaultOpt) {
+          modelSelection[role.id] = { connId: defaultOpt.connId, model: defaultOpt.id, dims: defaultOpt.dims };
+        }
+      }
 
-      // Select best default
-      var preferred;
-      if (target === "llm") {
-        preferred = def.llmModel;
-      } else {
-        preferred = def.embModel;
+      html += '<div class="model-group">';
+      html += '<div class="model-group-header">';
+      html += '<span class="model-group-title">' + role.label + '</span>';
+      html += '<span class="model-group-tag ' + (role.tag === "required" ? "model-group-tag-required" : "model-group-tag-optional") + '">' + role.tag + '</span>';
+      html += '</div>';
+      html += '<div class="model-group-desc">' + role.desc + '</div>';
+
+      if (role.id === "small") {
+        // Add a "same as chat" option
+        var smallSel = modelSelection.small;
+        var noneOn = !smallSel || !smallSel.model;
+        html += '<div class="model-opt ' + (noneOn ? 'on' : '') + '" data-model-select="small:">';
+        html += '<div class="model-opt-dot"><div class="model-opt-dot-inner"></div></div>';
+        html += '<div style="flex:1"><div class="model-opt-name">(same as chat model)</div>';
+        html += '<div class="model-opt-meta">No separate small model</div></div>';
+        html += '<span class="model-opt-badge model-opt-badge-auto">Default</span>';
+        html += '</div>';
       }
-      if (preferred && models.indexOf(preferred) >= 0) {
-        modelSel.value = preferred;
-      } else if (prevVal && models.indexOf(prevVal) >= 0) {
-        modelSel.value = prevVal;
+
+      var hasOverflow = options.length > MAX_VISIBLE_MODELS;
+      var filterId = "model-filter-" + role.id;
+
+      // Search filter for long model lists
+      if (hasOverflow) {
+        html += '<div class="model-filter-row">';
+        html += '<input type="text" class="model-filter-input" id="' + filterId + '" placeholder="Search ' + options.length + ' models\u2026" autocomplete="off">';
+        html += '</div>';
       }
 
-      // Also fill small model
-      if (smallSel) {
-        smallSel.innerHTML = '<option value="">(same as chat model)</option>';
-        models.forEach(function (m) {
-          var o = document.createElement("option");
-          o.value = m;
-          o.textContent = m;
-          smallSel.appendChild(o);
+      options.forEach(function (opt, idx) {
+        var sel = modelSelection[role.id];
+        var isOn = sel && sel.model === opt.id && sel.connId === opt.connId;
+        var meta = "via " + opt.providerName;
+        if (opt.dims > 0) meta += " \u00B7 " + opt.dims + "d";
+
+        // Hide items beyond MAX_VISIBLE_MODELS unless selected — filter will reveal them
+        var isHidden = hasOverflow && idx >= MAX_VISIBLE_MODELS && !isOn;
+
+        html += '<div class="model-opt ' + (isOn ? 'on' : '') + (isHidden ? ' model-opt-filtered' : '') + '" data-model-select="' + role.id + ':' + opt.connId + ':' + esc(opt.id) + ':' + opt.dims + '" data-model-name="' + esc(opt.id.toLowerCase()) + '">';
+        html += '<div class="model-opt-dot"><div class="model-opt-dot-inner"></div></div>';
+        html += '<div style="flex:1;min-width:0"><div class="model-opt-name">' + esc(opt.id) + '</div>';
+        html += '<div class="model-opt-meta">' + esc(meta) + '</div></div>';
+        if (idx === 0 && opt.isDefault) {
+          html += '<span class="model-opt-badge model-opt-badge-top">Top Pick</span>';
+        }
+        html += '</div>';
+      });
+
+      html += '</div>';
+    });
+
+    groupsEl.innerHTML = html;
+
+    // Sync hidden fields for backward compat
+    syncHiddenModelFields();
+
+    // Bind model filter inputs
+    document.querySelectorAll(".model-filter-input").forEach(function (input) {
+      input.addEventListener("input", function () {
+        var query = input.value.toLowerCase().trim();
+        var group = input.closest(".model-group");
+        if (!group) return;
+        var opts = group.querySelectorAll("[data-model-name]");
+        var shown = 0;
+        opts.forEach(function (el, idx) {
+          var name = el.dataset.modelName || "";
+          if (query) {
+            // When filtering, show all matches
+            var match = name.indexOf(query) >= 0;
+            el.classList.toggle("model-opt-filtered", !match);
+            if (match) shown++;
+          } else {
+            // No query — show top MAX_VISIBLE_MODELS + selected
+            var isOn = el.classList.contains("on");
+            el.classList.toggle("model-opt-filtered", idx >= MAX_VISIBLE_MODELS && !isOn);
+            shown++;
+          }
         });
-      }
+      });
+    });
 
-      // Auto-fill embedding dims
-      if (target === "emb") {
-        autoFillEmbDims(modelSel.value);
-      }
-    } else {
-      // No models found -- allow manual entry
-      modelSel.innerHTML = "";
-      var manualOpt = document.createElement("option");
-      manualOpt.value = "";
-      manualOpt.textContent = "(enter model name below)";
-      modelSel.appendChild(manualOpt);
-
-      // Replace with text input if needed
-      replaceWithTextInput(modelSel, target + "-model", target === "emb" ? (def.embModel || "") : (def.llmModel || ""));
-      if (smallSel && target === "llm") {
-        replaceWithTextInput(smallSel, "llm-small-model", "");
-      }
-    }
+    // Bind model option clicks
+    document.querySelectorAll("[data-model-select]").forEach(function (el) {
+      el.addEventListener("click", function () {
+        var parts = el.dataset.modelSelect.split(":");
+        var role = parts[0];
+        if (parts.length < 2 || !parts[1]) {
+          // "same as chat" for small model
+          delete modelSelection[role];
+        } else {
+          var connId = parts[1];
+          var modelId = parts.slice(2, -1).join(":"); // Model id may contain colons
+          var dims = parseInt(parts[parts.length - 1], 10) || 0;
+          modelSelection[role] = { connId: connId, model: modelId, dims: dims };
+        }
+        buildModelOptions();
+      });
+    });
   }
 
-  function replaceWithTextInput(selectEl, id, defaultVal) {
-    var parent = selectEl.parentNode;
-    var input = document.createElement("input");
-    input.type = "text";
-    input.id = id;
-    input.value = defaultVal;
-    input.placeholder = "Enter model name";
-    parent.replaceChild(input, selectEl);
-
-    if (id === "emb-model") {
-      input.addEventListener("input", function () { autoFillEmbDims(input.value); });
-    }
-  }
+  function syncHiddenModelFields() {
+    var llm = modelSelection.llm;
+    var emb = modelSelection.embedding;
+    var small = modelSelection.small;
 
-  function autoFillEmbDims(modelName) {
-    if (!modelName) return;
-    var name = modelName.replace(/:.*$/, ""); // strip tag
-    var dims = KNOWN_EMB_DIMS[modelName] || KNOWN_EMB_DIMS[name];
-    if (dims) {
-      $("emb-dims").value = dims;
+    if (llm) {
+      $("llm-connection").value = llm.connId;
+      $("llm-model").value = llm.model;
     }
+    if (emb) {
+      $("emb-connection").value = emb.connId;
+      $("emb-model").value = emb.model;
+      $("emb-dims").value = emb.dims || 1536;
+    }
+    $("llm-small-model").value = small ? small.model : "";
   }
 
   function validateStep2() {
     var errEl = $("step2-error");
     hideError(errEl);
 
-    var llmConn = $("llm-connection").value;
-    var llmModel = ($("llm-model").value || "").trim();
-    var embConn = $("emb-connection").value;
-    var embModel = ($("emb-model").value || "").trim();
+    var llm = modelSelection.llm;
+    var emb = modelSelection.embedding;
 
-    if (!llmConn) { showError(errEl, "Select a chat connection."); return false; }
-    if (!llmModel) { showError(errEl, "Chat model is required."); return false; }
-    if (!embConn) { showError(errEl, "Select an embedding connection."); return false; }
-    if (!embModel) { showError(errEl, "Embedding model is required."); return false; }
+    if (!llm || !llm.model) {
+      showError(errEl, "Select a chat model.");
+      return false;
+    }
+    if (!emb || !emb.model) {
+      showError(errEl, "Select an embedding model.");
+      return false;
+    }
     return true;
   }
 
   /* =========================================================================
-     Step 3: Options
+     Step 3: Voice (TTS / STT)
      ========================================================================= */
 
+  function getVoiceDefaults() {
+    var hasOpenAI = PROVIDERS.some(function (p) {
+      return p.id === "openai" && providerState[p.id].verified;
+    });
+    if (hasOpenAI) return { tts: "openai-tts", stt: "openai-stt" };
+    return { tts: "browser-tts", stt: "browser-stt" };
+  }
+
+  function activeTts() { return voiceSelection.tts || getVoiceDefaults().tts; }
+  function activeStt() { return voiceSelection.stt || getVoiceDefaults().stt; }
+
   function initStep3() {
-    // Show Ollama toggle if any connection uses Ollama
-    var hasOllama = connections.some(function (c) {
-      return c.provider === "ollama" || c.provider === "ollama-instack";
+    renderVoiceStep();
+  }
+
+  function renderVoiceStep() {
+    var container = $("voice-groups");
+    var curTts = activeTts();
+    var curStt = activeStt();
+    var hasOpenAI = PROVIDERS.some(function (p) {
+      return p.id === "openai" && providerState[p.id].verified;
+    });
+
+    var hint = hasOpenAI
+      ? "OpenAI selected as voice defaults. Kokoro and Whisper recommended for better quality."
+      : "Browser voice works out of the box. Kokoro and Whisper recommended for higher quality.";
+
+    var html = '<p class="voice-hint">' + esc(hint) + '</p>';
+
+    // TTS group
+    html += '<div class="model-group">';
+    html += '<div class="model-group-header">';
+    html += '<span class="model-group-title">Text-to-Speech</span>';
+    html += '<span class="model-group-tag model-group-tag-optional">Optional</span>';
+    html += '</div>';
+    html += '<div class="model-group-desc">How your assistant speaks</div>';
+
+    TTS_OPTIONS.forEach(function (o) {
+      var isOn = curTts === o.id;
+      var defs = getVoiceDefaults();
+      var badge = "";
+      if (o.recommended) badge = '<span class="model-opt-badge model-opt-badge-top">Recommended</span>';
+      else if (defs.tts === o.id && !voiceSelection.tts) badge = '<span class="model-opt-badge model-opt-badge-auto">Auto</span>';
+
+      html += '<div class="model-opt ' + (isOn ? "on" : "") + '" data-voice-select="tts:' + o.id + '">';
+      html += '<div class="model-opt-dot"><div class="model-opt-dot-inner"></div></div>';
+      html += '<div style="flex:1;min-width:0"><div class="model-opt-name">' + esc(o.name) + '</div>';
+      html += '<div class="model-opt-meta">' + esc(o.desc) + '</div></div>';
+      html += badge;
+      html += '</div>';
+    });
+    html += '</div>';
+
+    // STT group
+    html += '<div class="model-group">';
+    html += '<div class="model-group-header">';
+    html += '<span class="model-group-title">Speech-to-Text</span>';
+    html += '<span class="model-group-tag model-group-tag-optional">Optional</span>';
+    html += '</div>';
+    html += '<div class="model-group-desc">How your assistant hears you</div>';
+
+    STT_OPTIONS.forEach(function (o) {
+      var isOn = curStt === o.id;
+      var defs = getVoiceDefaults();
+      var badge = "";
+      if (o.recommended) badge = '<span class="model-opt-badge model-opt-badge-top">Recommended</span>';
+      else if (defs.stt === o.id && !voiceSelection.stt) badge = '<span class="model-opt-badge model-opt-badge-auto">Auto</span>';
+
+      html += '<div class="model-opt ' + (isOn ? "on" : "") + '" data-voice-select="stt:' + o.id + '">';
+      html += '<div class="model-opt-dot"><div class="model-opt-dot-inner"></div></div>';
+      html += '<div style="flex:1;min-width:0"><div class="model-opt-name">' + esc(o.name) + '</div>';
+      html += '<div class="model-opt-meta">' + esc(o.desc) + '</div></div>';
+      html += badge;
+      html += '</div>';
+    });
+    html += '</div>';
+
+    container.innerHTML = html;
+
+    // Bind voice option clicks
+    document.querySelectorAll("[data-voice-select]").forEach(function (el) {
+      el.addEventListener("click", function () {
+        var parts = el.dataset.voiceSelect.split(":");
+        var kind = parts[0]; // "tts" or "stt"
+        var id = parts[1];
+        if (kind === "tts") voiceSelection.tts = id;
+        if (kind === "stt") voiceSelection.stt = id;
+        renderVoiceStep();
+      });
+    });
+  }
+
+  /* =========================================================================
+     Step 4: Options (Channels + Services + Memory)
+     ========================================================================= */
+
+  function initStep4() {
+    // Show Ollama toggle if any verified provider is Ollama
+    var hasOllama = PROVIDERS.some(function (p) {
+      return p.id === "ollama" && providerState[p.id].verified;
     });
     var addon = $("ollama-addon");
-    if (hasOllama) show(addon); else hide(addon);
+    if (hasOllama) {
+      show(addon);
+      // Pre-check if ollamaMode is instack
+      var ollamaCb = $("ollama-enabled");
+      if (providerState.ollama.ollamaMode === "instack") {
+        ollamaCb.checked = true;
+      }
+    } else {
+      hide(addon);
+    }
 
     // Memory user ID default
     var memInput = $("memory-user-id");
@@ -646,21 +932,291 @@
       var email = ($("owner-email").value || "").trim();
       memInput.value = email || "default_user";
     }
+
+    // Render channels and services
+    renderChannels();
+    renderServices();
+  }
+
+  /** Helper: check if a channel is enabled (handles both boolean and object state) */
+  function isChannelEnabled(ch) {
+    if (ch.locked) return true;
+    var sel = channelSelection[ch.id];
+    if (typeof sel === "object" && sel !== null) return sel.enabled;
+    return !!sel;
+  }
+
+  function renderChannels() {
+    var container = $("channels-grid");
+    var html = "";
+
+    CHANNELS.forEach(function (ch) {
+      var isOn = isChannelEnabled(ch);
+      var cls = "toggle-card" + (isOn ? " on" : "") + (ch.locked ? " locked" : "");
+      if (ch.credentials && isOn) cls += " wide";
+
+      html += '<div class="' + cls + '" data-channel="' + ch.id + '">';
+      html += '<div class="toggle-card-header" data-channel-toggle="' + ch.id + '">';
+      html += '<div class="toggle-card-icon">' + esc(ch.icon) + '</div>';
+      html += '<div class="toggle-card-info">';
+      html += '<div class="toggle-card-name">' + esc(ch.name) + (ch.locked ? ' <span class="badge badge-local">Always on</span>' : '') + '</div>';
+      html += '<div class="toggle-card-desc">' + esc(ch.desc) + '</div>';
+      html += '</div>';
+      html += '<div class="toggle-card-switch">';
+      if (ch.locked) {
+        html += '<div class="toggle-track on locked"><div class="toggle-thumb"></div></div>';
+      } else {
+        html += '<div class="toggle-track ' + (isOn ? "on" : "") + '"><div class="toggle-thumb"></div></div>';
+      }
+      html += '</div>';
+      html += '</div>';
+
+      // Credential fields (expanded when channel with credentials is toggled ON)
+      if (ch.credentials && isOn) {
+        html += renderChannelCredentials(ch);
+      }
+
+      html += '</div>';
+    });
+
+    container.innerHTML = html;
+
+    // Bind toggle clicks on header
+    document.querySelectorAll("[data-channel-toggle]").forEach(function (el) {
+      el.addEventListener("click", function () {
+        var id = el.dataset.channelToggle;
+        var ch = CHANNELS.find(function (c) { return c.id === id; });
+        if (ch && ch.locked) return; // Cannot toggle locked channels
+        var sel = channelSelection[id];
+        if (typeof sel === "object" && sel !== null) {
+          sel.enabled = !sel.enabled;
+        } else {
+          channelSelection[id] = !sel;
+        }
+        renderChannels();
+      });
+    });
+
+    // Bind credential inputs (don't re-render on typing)
+    document.querySelectorAll("[data-channel-cred]").forEach(function (el) {
+      el.addEventListener("input", function () {
+        var sep = el.dataset.channelCred.indexOf(":");
+        var chId = el.dataset.channelCred.slice(0, sep);
+        var credKey = el.dataset.channelCred.slice(sep + 1);
+        var sel = channelSelection[chId];
+        if (typeof sel === "object" && sel !== null) {
+          sel[credKey] = el.value;
+        }
+      });
+      el.addEventListener("click", function (e) { e.stopPropagation(); });
+    });
+  }
+
+  function renderChannelCredentials(ch) {
+    var sel = channelSelection[ch.id];
+    var html = '<div class="pcard-auth">';
+
+    ch.credentials.forEach(function (cred) {
+      var val = (typeof sel === "object" && sel !== null) ? (sel[cred.key] || "") : "";
+      var inputType = cred.secret === false ? "text" : "password";
+      html += '<div class="auth-row">';
+      html += '<label class="channel-cred-label">' + esc(cred.label) + (cred.required ? ' <span class="channel-cred-required">*</span>' : '') + '</label>';
+      html += '<input type="' + inputType + '" placeholder="' + esc(cred.placeholder || '') + '" value="' + esc(val) + '" data-channel-cred="' + ch.id + ':' + cred.key + '">';
+      html += '</div>';
+    });
+
+    html += '</div>';
+    return html;
+  }
+
+  function renderServices() {
+    var container = $("services-grid");
+    var html = "";
+
+    SERVICES.forEach(function (svc) {
+      var isOn = serviceSelection[svc.id];
+      var cls = "toggle-card" + (isOn ? " on" : "");
+
+      html += '<div class="' + cls + '" data-service="' + svc.id + '">';
+      html += '<div class="toggle-card-header">';
+      html += '<div class="toggle-card-icon">' + esc(svc.icon) + '</div>';
+      html += '<div class="toggle-card-info">';
+      html += '<div class="toggle-card-name">' + esc(svc.name) + (svc.recommended ? ' <span class="badge badge-cloud">Recommended</span>' : '') + '</div>';
+      html += '<div class="toggle-card-desc">' + esc(svc.desc) + '</div>';
+      html += '</div>';
+      html += '<div class="toggle-card-switch">';
+      html += '<div class="toggle-track ' + (isOn ? "on" : "") + '"><div class="toggle-thumb"></div></div>';
+      html += '</div>';
+      html += '</div>';
+      html += '</div>';
+    });
+
+    container.innerHTML = html;
+
+    // Bind toggle clicks
+    document.querySelectorAll("[data-service]").forEach(function (el) {
+      el.addEventListener("click", function () {
+        var id = el.dataset.service;
+        serviceSelection[id] = !serviceSelection[id];
+        renderServices();
+      });
+    });
+  }
+
+  function validateStep4() {
+    var errEl = $("step4-error");
+    hideError(errEl);
+
+    var errors = [];
+    CHANNELS.forEach(function (ch) {
+      if (!ch.credentials) return;
+      if (!isChannelEnabled(ch)) return;
+      var sel = channelSelection[ch.id];
+      if (typeof sel !== "object" || sel === null) return;
+      ch.credentials.forEach(function (cred) {
+        if (cred.required && !(sel[cred.key] || "").trim()) {
+          errors.push(ch.name + ": " + cred.label + " is required.");
+        }
+      });
+    });
+
+    if (errors.length > 0) {
+      showError(errEl, errors.join(" "));
+      return false;
+    }
+    return true;
   }
 
   /* =========================================================================
-     Step 4: Review & Install
+     Step 5: Review & Install
      ========================================================================= */
 
-  function initStep4() {
+  function initStep5() {
     renderReview();
+    // TODO: Remove renderReviewLegacy() once e2e tests (setup-wizard.test.ts)
+    // are updated to use the new #review-summary selectors instead of #review-grid.
+    renderReviewLegacy();
   }
 
   function renderReview() {
+    var container = $("review-summary");
+    var html = "";
+
+    // Account section
+    var adminToken = ($("admin-token").value || "").trim();
+    var ownerName = ($("owner-name").value || "").trim();
+    var ownerEmail = ($("owner-email").value || "").trim();
+
+    html += '<div class="review-card">';
+    html += '<div class="review-card-title"><span>Account</span><button class="review-edit-btn" type="button" data-review-edit="0">Edit</button></div>';
+    html += '<div class="review-row"><span class="review-row-label">Admin Token</span><span class="review-row-value">' + maskToken(adminToken) + '</span></div>';
+    if (ownerName) html += '<div class="review-row"><span class="review-row-label">Name</span><span class="review-row-value">' + esc(ownerName) + '</span></div>';
+    if (ownerEmail) html += '<div class="review-row"><span class="review-row-label">Email</span><span class="review-row-value">' + esc(ownerEmail) + '</span></div>';
+    html += '</div>';
+
+    // Providers section
+    var vp = getVerifiedProviders();
+    html += '<div class="review-card">';
+    html += '<div class="review-card-title"><span>Providers</span><button class="review-edit-btn" type="button" data-review-edit="1">Edit</button></div>';
+    vp.forEach(function (p) {
+      html += '<div class="review-row"><span class="review-row-label">' + esc(p.icon) + ' ' + esc(p.name) + '</span><span class="review-row-value review-row-value-ok">Connected \u2713</span></div>';
+    });
+    html += '</div>';
+
+    // Models section
+    html += '<div class="review-card">';
+    html += '<div class="review-card-title"><span>Models</span><button class="review-edit-btn" type="button" data-review-edit="2">Edit</button></div>';
+    var llm = modelSelection.llm;
+    var emb = modelSelection.embedding;
+    var small = modelSelection.small;
+    if (llm) {
+      var llmProv = PROVIDERS.find(function (p) { return p.id === llm.connId; });
+      html += '<div class="review-row"><span class="review-row-label">Chat Model</span><span class="review-row-value">' + esc(llm.model) + (llmProv ? ' (' + esc(llmProv.name) + ')' : '') + '</span></div>';
+    }
+    if (small && small.model) {
+      var smallProv = PROVIDERS.find(function (p) { return p.id === small.connId; });
+      html += '<div class="review-row"><span class="review-row-label">Small Model</span><span class="review-row-value">' + esc(small.model) + (smallProv ? ' (' + esc(smallProv.name) + ')' : '') + '</span></div>';
+    }
+    if (emb) {
+      var embProv = PROVIDERS.find(function (p) { return p.id === emb.connId; });
+      html += '<div class="review-row"><span class="review-row-label">Embedding Model</span><span class="review-row-value">' + esc(emb.model) + (embProv ? ' (' + esc(embProv.name) + ')' : '') + '</span></div>';
+      html += '<div class="review-row"><span class="review-row-label">Embedding Dims</span><span class="review-row-value">' + (emb.dims || 1536) + '</span></div>';
+    }
+    html += '</div>';
+
+    // Voice section
+    var ttsOpt = TTS_OPTIONS.find(function (o) { return o.id === activeTts(); });
+    var sttOpt = STT_OPTIONS.find(function (o) { return o.id === activeStt(); });
+    html += '<div class="review-card">';
+    html += '<div class="review-card-title"><span>Voice</span><button class="review-edit-btn" type="button" data-review-edit="3">Edit</button></div>';
+    html += '<div class="review-row"><span class="review-row-label">Text-to-Speech</span><span class="review-row-value">' + (ttsOpt ? esc(ttsOpt.name) : "Disabled") + '</span></div>';
+    html += '<div class="review-row"><span class="review-row-label">Speech-to-Text</span><span class="review-row-value">' + (sttOpt ? esc(sttOpt.name) : "Disabled") + '</span></div>';
+    html += '</div>';
+
+    // Channels section
+    var activeChannels = CHANNELS.filter(function (ch) { return isChannelEnabled(ch); });
+    html += '<div class="review-card">';
+    html += '<div class="review-card-title"><span>Channels</span><button class="review-edit-btn" type="button" data-review-edit="4">Edit</button></div>';
+    activeChannels.forEach(function (ch) {
+      html += '<div class="review-row"><span class="review-row-label">' + esc(ch.icon) + ' ' + esc(ch.name) + '</span><span class="review-row-value review-row-value-ok">Enabled \u2713</span></div>';
+      // Show masked credentials if present
+      if (ch.credentials) {
+        var sel = channelSelection[ch.id];
+        if (typeof sel === "object" && sel !== null && sel.enabled) {
+          ch.credentials.forEach(function (cred) {
+            var val = sel[cred.key] || "";
+            if (val) {
+              html += '<div class="review-row"><span class="review-row-label" style="padding-left:24px">' + esc(cred.label) + '</span><span class="review-row-value">' + maskToken(val) + '</span></div>';
+            }
+          });
+        }
+      }
+    });
+    html += '</div>';
+
+    // Services section
+    var activeServices = SERVICES.filter(function (svc) { return serviceSelection[svc.id]; });
+    html += '<div class="review-card">';
+    html += '<div class="review-card-title"><span>Services</span><button class="review-edit-btn" type="button" data-review-edit="4">Edit</button></div>';
+    if (activeServices.length > 0) {
+      activeServices.forEach(function (svc) {
+        html += '<div class="review-row"><span class="review-row-label">' + esc(svc.icon) + ' ' + esc(svc.name) + '</span><span class="review-row-value review-row-value-ok">Enabled \u2713</span></div>';
+      });
+    } else {
+      html += '<div class="review-row"><span class="review-row-label">No extra services</span><span class="review-row-value">Core only</span></div>';
+    }
+    html += '</div>';
+
+    // Options section
+    var ollamaEnabled = $("ollama-enabled") && $("ollama-enabled").checked;
+    var memUserId = ($("memory-user-id").value || "").trim() || "default_user";
+    html += '<div class="review-card">';
+    html += '<div class="review-card-title"><span>Options</span><button class="review-edit-btn" type="button" data-review-edit="4">Edit</button></div>';
+    if (ollamaEnabled) {
+      html += '<div class="review-row"><span class="review-row-label">Ollama In-Stack</span><span class="review-row-value">Enabled</span></div>';
+    }
+    html += '<div class="review-row"><span class="review-row-label">Memory User ID</span><span class="review-row-value">' + esc(memUserId) + '</span></div>';
+    html += '</div>';
+
+    container.innerHTML = html;
+
+    // Build JSON for review
+    var jsonObj = buildPayload();
+    $("review-json-pre").textContent = JSON.stringify(jsonObj, null, 2);
+
+    // Bind edit buttons
+    document.querySelectorAll("[data-review-edit]").forEach(function (btn) {
+      btn.addEventListener("click", function () {
+        goToStep(parseInt(btn.dataset.reviewEdit, 10));
+      });
+    });
+  }
+
+  function renderReviewLegacy() {
+    // Keep the old review-grid populated for test backward compat
     var grid = $("review-grid");
     grid.innerHTML = "";
 
-    // Account section
     grid.appendChild(reviewHeader("Account", 0));
     grid.appendChild(reviewItem("Admin Token", maskToken($("admin-token").value)));
     var ownerName = ($("owner-name").value || "").trim();
@@ -668,36 +1224,60 @@
     var ownerEmail = ($("owner-email").value || "").trim();
     if (ownerEmail) grid.appendChild(reviewItem("Email", ownerEmail));
 
-    // Connections section
     grid.appendChild(reviewHeader("Connections", 1));
-    connections.forEach(function (conn) {
-      grid.appendChild(reviewItem(conn.name || conn.provider, conn.kind + " -- " + conn.baseUrl, true));
+    getVerifiedProviders().forEach(function (p) {
+      var st = providerState[p.id];
+      grid.appendChild(reviewItem(p.name, p.kind + " -- " + (st.baseUrl || p.baseUrl), true));
     });
 
-    // Models section
     grid.appendChild(reviewHeader("Models", 2));
-    var llmConnId = $("llm-connection").value;
-    var llmConn = connections.find(function (c) { return c.id === llmConnId; });
-    var llmModel = ($("llm-model").value || "").trim();
-    var smallModel = ($("llm-small-model").value || "").trim();
-    var embConnId = $("emb-connection").value;
-    var embConn = connections.find(function (c) { return c.id === embConnId; });
-    var embModel = ($("emb-model").value || "").trim();
-    var embDims = ($("emb-dims").value || "1536").trim();
-
-    grid.appendChild(reviewItem("Chat Model", llmModel + " (" + (llmConn ? llmConn.name : "?") + ")", true));
-    if (smallModel) {
-      grid.appendChild(reviewItem("Small Model", smallModel + " (" + (llmConn ? llmConn.name : "?") + ")", true));
+    var llm = modelSelection.llm;
+    var small = modelSelection.small;
+    var emb = modelSelection.embedding;
+    var llmProv = llm ? PROVIDERS.find(function (pp) { return pp.id === llm.connId; }) : null;
+    var embProv = emb ? PROVIDERS.find(function (pp) { return pp.id === emb.connId; }) : null;
+    if (llm) grid.appendChild(reviewItem("Chat Model", llm.model + " (" + (llmProv ? llmProv.name : "?") + ")", true));
+    if (small && small.model) grid.appendChild(reviewItem("Small Model", small.model + " (" + (llmProv ? llmProv.name : "?") + ")", true));
+    if (emb) {
+      grid.appendChild(reviewItem("Embedding Model", emb.model + " (" + (embProv ? embProv.name : "?") + ")", true));
+      grid.appendChild(reviewItem("Embedding Dims", String(emb.dims || 1536), true));
     }
-    grid.appendChild(reviewItem("Embedding Model", embModel + " (" + (embConn ? embConn.name : "?") + ")", true));
-    grid.appendChild(reviewItem("Embedding Dims", embDims, true));
 
-    // Options section
-    grid.appendChild(reviewHeader("Options", 3));
+    grid.appendChild(reviewHeader("Voice", 3));
+    var ttsOpt = TTS_OPTIONS.find(function (o) { return o.id === activeTts(); });
+    var sttOpt = STT_OPTIONS.find(function (o) { return o.id === activeStt(); });
+    grid.appendChild(reviewItem("TTS", ttsOpt ? ttsOpt.name : "Disabled"));
+    grid.appendChild(reviewItem("STT", sttOpt ? sttOpt.name : "Disabled"));
+
+    grid.appendChild(reviewHeader("Channels", 4));
+    CHANNELS.forEach(function (ch) {
+      if (isChannelEnabled(ch)) {
+        grid.appendChild(reviewItem(ch.name, "Enabled"));
+        // Show masked credentials in legacy review
+        if (ch.credentials) {
+          var sel = channelSelection[ch.id];
+          if (typeof sel === "object" && sel !== null && sel.enabled) {
+            ch.credentials.forEach(function (cred) {
+              var val = sel[cred.key] || "";
+              if (val) {
+                grid.appendChild(reviewItem("  " + cred.label, maskToken(val)));
+              }
+            });
+          }
+        }
+      }
+    });
+
+    grid.appendChild(reviewHeader("Services", 4));
+    SERVICES.forEach(function (svc) {
+      if (serviceSelection[svc.id]) {
+        grid.appendChild(reviewItem(svc.name, "Enabled"));
+      }
+    });
+
+    grid.appendChild(reviewHeader("Options", 4));
     var ollamaEnabled = $("ollama-enabled") && $("ollama-enabled").checked;
-    if (ollamaEnabled) {
-      grid.appendChild(reviewItem("Ollama In-Stack", "Enabled"));
-    }
+    if (ollamaEnabled) grid.appendChild(reviewItem("Ollama In-Stack", "Enabled"));
     grid.appendChild(reviewItem("Memory User ID", $("memory-user-id").value || "default_user"));
   }
 
@@ -739,53 +1319,92 @@
      Install & Deploy
      ========================================================================= */
 
-  async function handleInstall() {
-    if (installing) return;
-
-    var errEl = $("install-error");
-    hideError(errEl);
+  function buildChannelsConfig() {
+    var result = {};
+    CHANNELS.forEach(function (ch) {
+      var sel = channelSelection[ch.id];
+      if (ch.locked) {
+        result[ch.id] = true;
+      } else if (typeof sel === "object" && sel !== null) {
+        if (sel.enabled) {
+          // Include credentials (copy enabled + credential fields)
+          var entry = { enabled: true };
+          if (ch.credentials) {
+            ch.credentials.forEach(function (cred) {
+              if (sel[cred.key]) entry[cred.key] = sel[cred.key];
+            });
+          }
+          result[ch.id] = entry;
+        }
+      } else if (sel) {
+        result[ch.id] = true;
+      }
+    });
+    return result;
+  }
 
+  function buildPayload() {
     var adminToken = ($("admin-token").value || "").trim();
     var ownerName = ($("owner-name").value || "").trim();
     var ownerEmail = ($("owner-email").value || "").trim();
-    var memoryUserId = ($("memory-user-id").value || "").trim() || ownerEmail || "default_user";
+    var memoryUserId = ($("memory-user-id").value || "").trim() || (ownerName ? ownerName.toLowerCase().replace(/\s+/g, "_").replace(/[^a-z0-9_]/g, "") : "") || "default_user";
     var ollamaEnabled = $("ollama-enabled") ? $("ollama-enabled").checked : false;
 
-    var llmConnId = $("llm-connection").value;
-    var llmModel = ($("llm-model").value || "").trim();
-    var smallModel = ($("llm-small-model").value || "").trim();
-    var embConnId = $("emb-connection").value;
-    var embModel = ($("emb-model").value || "").trim();
-    var embDims = parseInt($("emb-dims").value, 10) || 1536;
-
-    var payload = {
-      adminToken: adminToken,
-      ownerName: ownerName || undefined,
-      ownerEmail: ownerEmail || undefined,
-      memoryUserId: memoryUserId,
-      ollamaEnabled: ollamaEnabled,
-      connections: connections.map(function (c) {
-        return {
-          id: c.id,
-          name: c.name,
-          provider: c.provider,
-          baseUrl: c.baseUrl,
-          apiKey: c.apiKey,
-        };
-      }),
+    var llm = modelSelection.llm;
+    var emb = modelSelection.embedding;
+    var small = modelSelection.small;
+
+    // Build connections from verified providers
+    var connections = getVerifiedProviders().map(function (p) {
+      var st = providerState[p.id];
+      return {
+        id: p.id,
+        name: p.name,
+        provider: p.id,
+        baseUrl: st.baseUrl || p.baseUrl,
+        apiKey: st.apiKey || "",
+      };
+    });
+
+    var ttsVal = activeTts() !== "skip-tts" ? activeTts() : null;
+    var sttVal = activeStt() !== "skip-stt" ? activeStt() : null;
+
+    return {
+      version: 1,
+      owner: (ownerName || ownerEmail) ? { name: ownerName || undefined, email: ownerEmail || undefined } : undefined,
+      security: { adminToken: adminToken },
+      connections: connections,
       assignments: {
         llm: {
-          connectionId: llmConnId,
-          model: llmModel,
-          smallModel: smallModel || undefined,
+          connectionId: llm ? llm.connId : "",
+          model: llm ? llm.model : "",
+          smallModel: (small && small.model) ? small.model : undefined,
         },
         embeddings: {
-          connectionId: embConnId,
-          model: embModel,
-          embeddingDims: embDims,
+          connectionId: emb ? emb.connId : "",
+          model: emb ? emb.model : "",
+          embeddingDims: emb ? (emb.dims || 1536) : 1536,
         },
+        tts: ttsVal,
+        stt: sttVal,
+      },
+      memory: { userId: memoryUserId },
+      channels: buildChannelsConfig(),
+      services: {
+        admin: serviceSelection.admin || false,
+        openviking: serviceSelection.openviking || false,
+        ollama: ollamaEnabled,
       },
     };
+  }
+
+  async function handleInstall() {
+    if (installing) return;
+
+    var errEl = $("install-error");
+    hideError(errEl);
+
+    var payload = buildPayload();
 
     installing = true;
     var installBtn = $("btn-install");
@@ -808,7 +1427,6 @@
         return;
       }
 
-      // Success -- go to deploy screen
       showDeployScreen();
       startDeployPolling();
     } catch (e) {
@@ -837,12 +1455,15 @@
 
       updateDeployUI(data);
 
-      if (data.setupComplete && !data.deployError) {
-        stopDeployPolling();
-        showDeployDone(data);
-      } else if (data.deployError) {
+      if (data.deployError) {
         stopDeployPolling();
         showDeployError(data.deployError);
+      } else if (data.setupComplete && data.deployStatus && data.deployStatus.length > 0) {
+        var allRunning = data.deployStatus.every(function (s) { return s.status === "running"; });
+        if (allRunning) {
+          stopDeployPolling();
+          showDeployDone(data);
+        }
       }
     } catch (e) {
       // silently retry
@@ -865,7 +1486,6 @@
       var row = document.createElement("div");
       row.className = "deploy-service-row";
 
-      // Indicator
       var indicator = document.createElement("div");
       indicator.className = "deploy-service-indicator";
       if (svc.status === "running") {
@@ -877,7 +1497,6 @@
       }
       row.appendChild(indicator);
 
-      // Info
       var info = document.createElement("div");
       info.className = "deploy-service-info";
       info.innerHTML =
@@ -885,7 +1504,6 @@
         '<span class="deploy-service-status">' + esc(svc.label || svc.status) + "</span>";
       row.appendChild(info);
 
-      // Bar
       var bar = document.createElement("div");
       bar.className = "deploy-service-bar";
       var fill = document.createElement("div");
@@ -900,7 +1518,6 @@
       container.appendChild(row);
     });
 
-    // Progress
     var pct = total > 0 ? Math.round((running / total) * 100) : 0;
     $("deploy-progress-value").textContent = pct + "%";
     $("deploy-progress-fill").style.width = pct + "%";
@@ -925,7 +1542,6 @@
     $("deploy-progress-value").textContent = "100%";
     $("deploy-progress-fill").style.width = "100%";
 
-    // Service list
     var list = $("deploy-service-list");
     list.innerHTML = "";
     (data.deployStatus || []).forEach(function (svc) {
@@ -946,8 +1562,6 @@
     $("deploy-failure-summary").textContent = typeof error === "string" ? error : "Deployment failed.";
     $("deploy-error-pre").textContent = typeof error === "string" ? error : JSON.stringify(error, null, 2);
 
-    var bar = $("deploy-progress-bar");
-    if (bar) bar.parentElement.querySelector(".deploy-progress-bar").classList.add("deploy-progress-bar--error");
     $("deploy-progress-value").textContent = "Error";
     $("deploy-progress-value").classList.add("deploy-progress-value--error");
   }
@@ -963,11 +1577,30 @@
       if (res.ok) {
         var data = await res.json();
         detectedProviders = data.providers || [];
+
+        // Auto-select and pre-verify detected providers
+        detectedProviders.forEach(function (dp) {
+          if (!dp.available) return;
+          var st = providerState[dp.provider];
+          if (st) {
+            st.baseUrl = dp.url;
+            // Auto-select detected providers
+            if (!st.selected) {
+              st.selected = true;
+              if (dp.provider === "ollama") {
+                st.ollamaMode = "running";
+              }
+            }
+            // Auto-verify by fetching models
+            verifyProvider(dp.provider);
+          }
+        });
       }
     } catch (e) {
       detectedProviders = [];
     }
     hide($("conn-detecting"));
+    renderProviderGrid();
   }
 
   async function apiFetchModels(provider, baseUrl, apiKey) {
@@ -977,9 +1610,11 @@
       headers: { "Content-Type": "application/json" },
       body: JSON.stringify({ apiKey: apiKey || "", baseUrl: baseUrl || "" }),
     });
-    if (!res.ok) throw new Error("Failed to fetch models (HTTP " + res.status + ")");
     var data = await res.json();
-    return data.models || [];
+    if (!res.ok || data.status === "recoverable_error") {
+      throw new Error(data.error || "Failed to fetch models (HTTP " + res.status + ")");
+    }
+    return data;
   }
 
   /* =========================================================================
@@ -1005,54 +1640,26 @@
       .then(function (r) { return r.json(); })
       .then(function (data) {
         if (data.setupComplete) {
-          // Already set up -- redirect
           window.location.href = "/";
         }
       })
       .catch(function () { /* ignore */ });
 
-    // ── Step indicator clicks ──
-    qsa(".step-dot").forEach(function (dot) {
-      dot.addEventListener("click", function () {
-        var step = parseInt(dot.dataset.step, 10);
-        if (!isNaN(step) && step <= maxVisitedStep) {
-          goToStep(step);
-        }
-      });
+    // ── Step 0: Welcome ──
+    $("btn-get-started").addEventListener("click", function () {
+      welcomeHeroDismissed = true;
+      hide($("welcome-hero"));
+      show($("identity-form"));
     });
 
-    // ── Step 0: Welcome ──
     $("btn-step0-next").addEventListener("click", function () {
       if (validateStep0()) goToStep(1);
     });
 
-    // ── Step 1: Connections ──
+    // ── Step 1: Providers ──
     $("btn-step1-back").addEventListener("click", function () { goToStep(0); });
-    $("btn-step1-add").addEventListener("click", function () { openAddConnection(); });
     $("btn-step1-next").addEventListener("click", function () {
-      if (connections.length > 0) goToStep(2);
-    });
-
-    // Connection type chooser
-    $("btn-add-cloud").addEventListener("click", function () { openConnectionForm("cloud"); });
-    $("btn-add-local").addEventListener("click", function () { openConnectionForm("local"); });
-
-    // Connection detail form
-    $("btn-conn-cancel").addEventListener("click", function () {
-      editingIdx = -1;
-      renderConnHub();
-      setConnView("hub");
-    });
-    $("btn-conn-test").addEventListener("click", function () { testConnection(); });
-    $("btn-conn-save").addEventListener("click", function () { saveConnection(); });
-
-    // Hub list delegation (edit/remove)
-    $("conn-hub-list").addEventListener("click", function (e) {
-      var btn = e.target.closest("[data-action]");
-      if (!btn) return;
-      var idx = parseInt(btn.dataset.idx, 10);
-      if (btn.dataset.action === "edit") editConnectionAt(idx);
-      if (btn.dataset.action === "remove") removeConnection(idx);
+      if (getVerifiedCount() > 0) goToStep(2);
     });
 
     // ── Step 2: Models ──
@@ -1060,35 +1667,41 @@
     $("btn-step2-next").addEventListener("click", function () {
       if (validateStep2()) goToStep(3);
     });
-    $("btn-models-add-conn").addEventListener("click", function () {
-      goToStep(1);
-      openAddConnection();
-    });
-
-    $("llm-connection").addEventListener("change", function () {
-      loadModelsForConnection(this.value, "llm");
-    });
-    $("emb-connection").addEventListener("change", function () {
-      loadModelsForConnection(this.value, "emb");
-    });
-    $("emb-model").addEventListener("change", function () {
-      autoFillEmbDims(this.value);
-    });
 
-    // ── Step 3: Options ──
+    // ── Step 3: Voice ──
     $("btn-step3-back").addEventListener("click", function () { goToStep(2); });
     $("btn-step3-next").addEventListener("click", function () { goToStep(4); });
 
-    // ── Step 4: Review ──
+    // ── Step 4: Options ──
     $("btn-step4-back").addEventListener("click", function () { goToStep(3); });
+    $("btn-step4-next").addEventListener("click", function () {
+      if (validateStep4()) goToStep(5);
+    });
+
+    // ── Step 5: Review ──
+    $("btn-step5-back").addEventListener("click", function () { goToStep(4); });
     $("btn-install").addEventListener("click", function () { handleInstall(); });
 
+    // ── JSON toggle ──
+    $("btn-toggle-json").addEventListener("click", function () {
+      var jsonEl = $("review-json");
+      var btn = $("btn-toggle-json");
+      if (jsonEl.classList.contains("hidden")) {
+        show(jsonEl);
+        btn.textContent = "Hide Setup JSON";
+      } else {
+        hide(jsonEl);
+        btn.textContent = "Show Setup JSON";
+      }
+    });
+
     // ── Deploy error actions ──
     $("btn-deploy-back").addEventListener("click", function () {
       installing = false;
-      goToStep(4);
+      goToStep(5);
     });
     $("btn-deploy-retry").addEventListener("click", function () {
+      installing = false;
       hide($("deploy-failure"));
       hide($("deploy-error-actions"));
       show($("deploy-tips"));
@@ -1099,6 +1712,6 @@
     });
 
     // Start on step 0
-    updateStepIndicators();
+    renderProgressBar();
   });
 })();