openspeechapi 0.1.0__py3-none-any.whl

openspeech/server/webui/app.js

@@ -0,0 +1,2649 @@
+const $ = (id) => document.getElementById(id);
+
+// ---- Lab Interaction Log ----
+const _labLogMax = 200; // max lines kept
+function labLog(level, msg) {
+  const el = $("lab-log");
+  if (!el) return;
+  const ts = new Date().toLocaleTimeString("en-GB", { hour12: false, hour: "2-digit", minute: "2-digit", second: "2-digit", fractionalSecondDigits: 3 });
+  const cls = level === "error" ? "log-err" : level === "warn" ? "log-warn" : level === "data" ? "log-data" : "log-info";
+  const line = document.createElement("span");
+  line.innerHTML = `<span class="log-ts">[${ts}]</span> <span class="${cls}">${_escHtml(msg)}</span>\n`;
+  el.appendChild(line);
+  // Trim old lines
+  while (el.childElementCount > _labLogMax) el.removeChild(el.firstElementChild);
+  el.scrollTop = el.scrollHeight;
+}
+function labLogV(level, msg) {
+  const cb = $("lab-log-verbose");
+  if (cb && cb.checked) labLog(level, msg);
+}
+function labLogClear() {
+  const el = $("lab-log");
+  if (el) el.innerHTML = "";
+}
+function _escHtml(s) {
+  return String(s).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+
+// Shared group ordering for engines/config/dashboard
+const ENGINE_GROUPS = [
+  { label: 'STT — Cloud', filter: e => e.type === 'stt' && e.category === 'cloud' },
+  { label: 'STT — Local / Native', filter: e => e.type === 'stt' && (e.category === 'local' || e.category === 'native') },
+  { label: 'TTS — Cloud', filter: e => e.type === 'tts' && e.category === 'cloud' },
+  { label: 'TTS — Local / Native', filter: e => e.type === 'tts' && (e.category === 'local' || e.category === 'native') },
+];
+
+const state = {
+  engines: [],
+  eventSource: null,
+  ttsTimer: null,
+  sttLive: null,
+  sttLiveText: "",
+  sttLiveMetricsTimer: null,
+  // Last TTS result for download
+  ttsAudioData: null,       // Uint8Array of raw audio bytes
+  ttsAudioFormat: null,     // "mp3", "wav", etc.
+  ttsSampleRate: 16000,
+  ttsChannels: 1,
+};
+
+function execModeDesc(mode) {
+  const m = String(mode || "").toLowerCase();
+  if (m === "subprocess") return "Worker subprocess + IPC";
+  if (m === "local") return "Local engine service + HTTP(S)";
+  if (m === "remote") return "Cloud/remote API over network";
+  if (m === "in_process") return "In-process model execution";
+  return "Unknown";
+}
+
+function nowLabel() {
+  const d = new Date();
+  return d.toLocaleTimeString();
+}
+
+async function fetchJson(url, init = {}) {
+  const res = await fetch(url, init);
+  if (!res.ok) {
+    let detail = `HTTP ${res.status}`;
+    const raw = await res.text();
+    if (raw) {
+      try {
+        const data = JSON.parse(raw);
+        detail = data.detail || JSON.stringify(data);
+      } catch (_) {
+        detail = raw;
+      }
+    }
+    throw new Error(detail || `HTTP ${res.status}`);
+  }
+  return res.json();
+}
+
+function setText(id, text) {
+  $(id).textContent = String(text);
+}
+
+function setOutput(text) {
+  const out = $("engine-output-detail") || $("engine-output");
+  if (out) out.textContent = `[${nowLabel()}] ${text}\n` + out.textContent;
+}
+
+function stopTTSTimer() {
+  if (state.ttsTimer) {
+    clearInterval(state.ttsTimer);
+    state.ttsTimer = null;
+  }
+}
+
+function sttMode() {
+  return $("stt-mode").value;
+}
+
+function updateSTTModeUI() {
+  const mode = sttMode();
+  const filePanel = $("stt-file-panel");
+  const livePanel = $("stt-live-panel");
+  const fileInput = $("stt-file");
+  const metricsEl = $("stt-live-metrics");
+  if (mode === "live") {
+    filePanel.classList.add("hidden");
+    livePanel.classList.remove("hidden");
+    if (metricsEl) metricsEl.style.display = "";
+    fileInput.required = false;
+  } else {
+    if (state.sttLive) {
+      stopLiveSTT().catch(() => {});
+    }
+    filePanel.classList.remove("hidden");
+    livePanel.classList.add("hidden");
+    if (metricsEl) metricsEl.style.display = "none";
+    fileInput.required = true;
+  }
+}
+
+function isLocalEngine(p) {
+  return ["subprocess", "local", "in_process"].includes(p.exec_mode) && p.exec_mode !== "remote";
+}
+
+function providerDisplayName(p) {
+  const info = p.display_info || {};
+  const parts = [];
+  if (info.model || info.model_size || info.model_name) parts.push(info.model || info.model_size || info.model_name);
+  if (info.voice || info.voice_id || info.voice_name || info.voice_type) parts.push(info.voice || info.voice_id || info.voice_name || info.voice_type);
+  if (info.language || info.engine_type) parts.push(info.language || info.engine_type);
+  if (info.region) parts.push(info.region);
+  return parts.length ? parts.join(' / ') : '';
+}
+
+function renderProviderRow(p) {
+  const detail = providerDisplayName(p);
+  const healthDot = p.healthy ? '<span class="dot dot-green"></span>' : '<span class="dot dot-red"></span>';
+  const local = isLocalEngine(p);
+  let actions = '';
+  if (local) {
+    actions = `
+      <button class="btn btn-xs" onclick="engineAction('${p.name}','start')" title="Start">Start</button>
+      <button class="btn btn-xs" onclick="engineAction('${p.name}','stop')" title="Stop">Stop</button>
+    `;
+  }
+  const label = p.display_name || p.name;
+  return `<div class="provider-row">
+    <div class="provider-info">
+      ${healthDot}
+      <strong>${label}</strong>
+      <span class="provider-engine">${p.name}</span>
+      ${detail ? `<span class="provider-detail">${detail}</span>` : ''}
+    </div>
+    <div class="provider-actions">${actions}</div>
+  </div>`;
+}
+
+function renderEngines(engines) {
+  const container = $("provider-groups");
+  container.innerHTML = "";
+
+  const groups = [
+    { label: "STT — Cloud", filter: p => p.type === "stt" && !isLocalEngine(p) },
+    { label: "STT — Local / Native", filter: p => p.type === "stt" && isLocalEngine(p) },
+    { label: "TTS — Cloud", filter: p => p.type === "tts" && !isLocalEngine(p) },
+    { label: "TTS — Local / Native", filter: p => p.type === "tts" && isLocalEngine(p) },
+  ];
+
+  for (const g of groups) {
+    const items = engines.filter(g.filter);
+    if (items.length === 0) continue;
+    const section = document.createElement("div");
+    section.className = "provider-group";
+    section.innerHTML = `<h3 class="provider-group-title">${g.label} <span class="provider-count">${items.filter(p=>p.healthy).length}/${items.length}</span></h3>`;
+    for (const p of items) {
+      section.innerHTML += renderProviderRow(p);
+    }
+    container.appendChild(section);
+  }
+
+  const sttSelect = $("stt-provider");
+  const ttsSelect = $("tts-provider");
+  const prevStt = sttSelect.value;
+  const prevTts = ttsSelect.value;
+  sttSelect.innerHTML = "";
+  ttsSelect.innerHTML = "";
+
+  const sttEngines = engines.filter((p) => p.type === "stt");
+  const ttsEngines = engines.filter((p) => p.type === "tts");
+
+  for (const p of sttEngines) {
+    const option = document.createElement("option");
+    option.value = p.name;
+    const label = p.display_name || p.name;
+    option.textContent = p.healthy ? label : `${label} (unhealthy)`;
+    option.disabled = !p.healthy;
+    sttSelect.appendChild(option);
+  }
+  for (const p of ttsEngines) {
+    const option = document.createElement("option");
+    option.value = p.name;
+    const label = p.display_name || p.name;
+    option.textContent = p.healthy ? label : `${label} (unhealthy)`;
+    option.disabled = !p.healthy;
+    ttsSelect.appendChild(option);
+  }
+
+  const pickDefault = (select, list, prev) => {
+    if (prev && list.some((p) => p.name === prev && p.healthy)) {
+      select.value = prev;
+      return;
+    }
+    const firstHealthy = list.find((p) => p.healthy);
+    if (firstHealthy) {
+      select.value = firstHealthy.name;
+      return;
+    }
+    if (list.length > 0) {
+      select.value = list[0].name;
+    }
+  };
+  pickDefault(sttSelect, sttEngines, prevStt);
+  pickDefault(ttsSelect, ttsEngines, prevTts);
+  loadTTSVoices(ttsSelect.value);
+  loadTTSFieldOptions(ttsSelect.value);
+  loadSTTFieldOptions(sttSelect.value);
+}
+
+// Backward compatibility alias
+function renderProviders(providers) { return renderEngines(providers); }
+
+async function loadTTSVoices(provider) {
+  const voiceLabel = $("tts-voice-label");
+  const voiceSelect = $("tts-voice");
+  voiceSelect.innerHTML = "";
+  const pushVoiceOption = (value, label, title = "") => {
+    if (!value) return;
+    const existing = Array.from(voiceSelect.options).some((o) => o.value === value);
+    if (existing) return;
+    const opt = document.createElement("option");
+    opt.value = value;
+    opt.textContent = label || value;
+    if (title) opt.title = title;
+    voiceSelect.appendChild(opt);
+  };
+  if (!provider) {
+    voiceLabel.classList.add("hidden");
+    return;
+  }
+  const engineInfo = (state.engines || []).find((e) => e.name === provider) || {};
+  const configuredVoice =
+    (engineInfo.display_info && (
+      engineInfo.display_info.voice_id ||
+      engineInfo.display_info.voice ||
+      engineInfo.display_info.voice_name ||
+      engineInfo.display_info.voice_type
+    )) || "";
+  const providerKey = engineInfo.provider || provider;
+  const ensureTemplateCache = async () => {
+    if (providerTemplates.length > 0) return;
+    try {
+      const res = await fetch('/v1/admin/provider-templates');
+      providerTemplates = (await res.json()).templates || [];
+    } catch (_) {}
+  };
+  const addFallbackVoices = async () => {
+    if (configuredVoice) {
+      pushVoiceOption(String(configuredVoice), `Configured (${configuredVoice})`);
+    }
+    await ensureTemplateCache();
+    const tpl = providerTemplates.find((t) => t.provider === providerKey);
+    if (tpl && tpl.defaults) {
+      const defaultVoice = tpl.defaults.voice_id || tpl.defaults.voice || "";
+      if (defaultVoice) {
+        pushVoiceOption(String(defaultVoice), `Default (${defaultVoice})`);
+      }
+    }
+    if (voiceSelect.options.length > 0) {
+      voiceLabel.classList.remove("hidden");
+    } else {
+      voiceLabel.classList.add("hidden");
+    }
+  };
+  try {
+    const data = await fetchJson(`/v1/tts/${provider}/voices`);
+    const voices = data.voices || [];
+    if (voices.length === 0) {
+      await addFallbackVoices();
+      return;
+    }
+    voiceLabel.classList.remove("hidden");
+    const groups = {};
+    for (const v of voices) {
+      const g = v.group || "";
+      if (!groups[g]) groups[g] = [];
+      groups[g].push(v);
+    }
+    const sortedKeys = Object.keys(groups).sort((a, b) => {
+      if (a === "中文") return -1;
+      if (b === "中文") return 1;
+      if (a === "English") return -1;
+      if (b === "English") return 1;
+      return a.localeCompare(b);
+    });
+    for (const key of sortedKeys) {
+      const optgroup = document.createElement("optgroup");
+      optgroup.label = key || "Default";
+      for (const v of groups[key]) {
+        const opt = document.createElement("option");
+        opt.value = v.id || v.name;
+        opt.textContent = v.name || v.id;
+        if (v.description) opt.title = v.description;
+        optgroup.appendChild(opt);
+      }
+      voiceSelect.appendChild(optgroup);
+    }
+  } catch (_) {
+    await addFallbackVoices();
+  }
+}
+
+function maybeAutoAdjustTTSTransportByModel() {
+  const providerAlias = $("tts-provider").value;
+  const modelSel = $("tts-model");
+  const transportSel = $("tts-transport");
+  if (!providerAlias || !modelSel || !transportSel) return;
+  const engineInfo = (state.engines || []).find((e) => e.name === providerAlias) || {};
+  const providerKey = (engineInfo.provider || providerAlias || "").toLowerCase();
+  if (providerKey !== "elevenlabs") return;
+  const model = String(modelSel.value || "").trim();
+  if (!model) return;
+
+  const values = new Set(Array.from(transportSel.options).map((o) => String(o.value)));
+  if (model === "eleven_v3") {
+    if (values.has("http")) transportSel.value = "http";
+  } else if (model.startsWith("eleven_")) {
+    if (values.has("ws")) transportSel.value = "ws";
+  }
+}
+
+async function loadTTSFieldOptions(engineAlias) {
+  const fields = {
+    model: $("tts-model"),
+    stream_transport: $("tts-transport"),
+  };
+  const keyAliases = {
+    model_id: "model",
+    model: "model",
+    stream_transport: "stream_transport",
+  };
+  for (const sel of Object.values(fields)) {
+    if (!sel) continue;
+    sel.innerHTML = '<option value="">(auto)</option>';
+  }
+  if (!engineAlias) return;
+  try {
+    if (providerTemplates.length === 0) {
+      const res = await fetch('/v1/admin/provider-templates');
+      providerTemplates = (await res.json()).templates || [];
+    }
+    const engineInfo = (state.engines || []).find(e => e.name === engineAlias);
+    const providerKey = (engineInfo && engineInfo.provider) || engineAlias;
+    const configuredModel = String((engineInfo && engineInfo.display_info && engineInfo.display_info.model) || "");
+    const configuredTransport = String((engineInfo && engineInfo.display_info && engineInfo.display_info.stream_transport) || "");
+    const tpl = providerTemplates.find(t => t.provider === providerKey);
+    if (!tpl || !tpl.field_options) return;
+
+    for (const [key, opts] of Object.entries(tpl.field_options)) {
+      const mapped = keyAliases[key] || key;
+      const sel = fields[mapped];
+      if (!sel || !opts || opts.length === 0) continue;
+      const existing = new Set(Array.from(sel.options).map(o => String(o.value)));
+      for (const o of opts) {
+        const v = String(o);
+        if (existing.has(v)) continue;
+        const opt = document.createElement("option");
+        opt.value = v;
+        opt.textContent = v;
+        sel.appendChild(opt);
+        existing.add(v);
+      }
+    }
+    if (configuredModel && fields.model) {
+      const has = Array.from(fields.model.options).some((o) => o.value === configuredModel);
+      if (has) fields.model.value = configuredModel;
+    }
+    if (configuredTransport && fields.stream_transport) {
+      const has = Array.from(fields.stream_transport.options).some((o) => o.value === configuredTransport);
+      if (has) fields.stream_transport.value = configuredTransport;
+    }
+    maybeAutoAdjustTTSTransportByModel();
+  } catch (_) {}
+}
+
+async function loadSTTFieldOptions(engineAlias) {
+  const fields = { language: $("stt-language"), model: $("stt-model"), device: $("stt-device") };
+  // Normalize provider-specific option keys to Lab's generic STT controls.
+  // Example: elevenlabs-stt exposes language_code/model_id, while Lab uses language/model.
+  const keyAliases = {
+    language: "language",
+    language_code: "language",
+    model: "model",
+    model_id: "model",
+    model_name: "model",
+    device: "device",
+    compute_type: "device",
+  };
+  // Reset all to just (auto)
+  for (const sel of Object.values(fields)) {
+    sel.innerHTML = '<option value="">(auto)</option>';
+  }
+  if (!engineAlias) return;
+  try {
+    // Ensure providerTemplates are loaded
+    if (providerTemplates.length === 0) {
+      const res = await fetch('/v1/admin/provider-templates');
+      providerTemplates = (await res.json()).templates || [];
+    }
+    // Look up provider key from cached engine list (set by fetchEngineStatus)
+    const engineInfo = (state.engines || []).find(e => e.name === engineAlias);
+    const providerKey = (engineInfo && engineInfo.provider) || engineAlias;
+    const tpl = providerTemplates.find(t => t.provider === providerKey);
+    if (!tpl || !tpl.field_options) return;
+    for (const [key, opts] of Object.entries(tpl.field_options)) {
+      const normalizedKey = keyAliases[key] || key;
+      const sel = fields[normalizedKey];
+      if (!sel || !opts || opts.length === 0) continue;
+      const existing = new Set(Array.from(sel.options).map(o => String(o.value)));
+      for (const o of opts) {
+        const v = String(o);
+        if (existing.has(v)) continue;
+        const opt = document.createElement('option');
+        opt.value = v;
+        opt.textContent = v;
+        sel.appendChild(opt);
+        existing.add(v);
+      }
+    }
+  } catch (_) {}
+}
+
+function renderTasks(tasks) {
+  const body = $("tasks-table");
+  if (!body) return;
+  body.innerHTML = "";
+  for (const t of tasks) {
+    const tr = document.createElement("tr");
+    tr.innerHTML = `<td>${t.task_id.slice(0, 12)}</td><td>${t.action}</td><td>${t.status}</td><td>${t.phase}</td><td>${t.message}</td>`;
+    tr.addEventListener("click", () => {
+      $("task-id-input").value = t.task_id;
+    });
+    body.appendChild(tr);
+  }
+}
+
+async function refreshDashboard() {
+  $("dashboard-status").textContent = "syncing";
+  const [enginesData, healthData, tasksData] = await Promise.all([
+    fetchJson("/v1/engines"),
+    fetchJson("/v1/health"),
+    fetchJson("/v1/engines/tasks?limit=20"),
+  ]);
+
+  const engines = enginesData.engines || [];
+  state.engines = engines;
+  renderEngines(engines);
+
+  const healthMap = healthData.engines || {};
+  const healthyCount = Object.values(healthMap).filter(Boolean).length;
+  const runningTasks = (tasksData.tasks || []).filter((t) => t.status === "running").length;
+
+  setText("stat-providers", engines.length);
+  setText("stat-healthy", `${healthyCount}/${engines.length}`);
+  setText("stat-running-tasks", runningTasks);
+  setText("stat-updated-at", nowLabel());
+  renderTasks(tasksData.tasks || []);
+
+  $("dashboard-status").textContent = "ready";
+}
+
+async function runSTT(e) {
+  e.preventDefault();
+  if (sttMode() !== "file") return;
+  const file = $("stt-file").files[0];
+  const provider = $("stt-provider").value;
+  if (!file || !provider) return;
+  const language = $("stt-language").value.trim();
+  const model = $("stt-model").value.trim();
+  const device = $("stt-device").value.trim();
+  const beamSizeRaw = $("stt-beam-size").value.trim();
+
+  const form = new FormData();
+  form.append("provider", provider);
+  form.append("audio", file, file.name);
+  if (language) form.append("language", language);
+  if (model) form.append("model", model);
+  if (device) form.append("device", device);
+  if (beamSizeRaw) form.append("beam_size", beamSizeRaw);
+  setText("stt-stream-text", "");
+  setText("stt-result", "Running STT...");
+
+  const sttT0 = performance.now();
+  labLog("info", `[STT] Start file transcription — provider=${provider}, file=${file.name} (${(file.size/1024).toFixed(1)} KB)`);
+  labLogV("data", `[STT]   language=${language || "(auto)"}, model=${model || "(auto)"}, device=${device || "(auto)"}, beam_size=${beamSizeRaw || "(default)"}`);
+  labLogV("data", `[STT]   POST /v1/stt/transcribe`);
+
+  try {
+    const data = await fetchJson("/v1/stt/transcribe", { method: "POST", body: form });
+    const elapsed = Math.round(performance.now() - sttT0);
+    setText("stt-stream-text", String(data.text || ""));
+    setText("stt-result", JSON.stringify(data, null, 2));
+    labLog("info", `[STT] Completed in ${elapsed}ms — ${(data.text || "").length} chars, lang=${data.language || "?"}`);
+    labLogV("data", `[STT]   confidence=${data.confidence ?? "N/A"}, duration=${data.duration_ms ?? "N/A"}ms`);
+    labLogV("data", `[STT]   text: "${(data.text || "").slice(0, 200)}${(data.text || "").length > 200 ? "..." : ""}"`);
+    if (data.words && data.words.length > 0) {
+      labLogV("data", `[STT]   words: ${data.words.length} items`);
+    }
+  } catch (err) {
+    const elapsed = Math.round(performance.now() - sttT0);
+    setText("stt-result", `Error: ${err.message}`);
+    labLog("error", `[STT] Failed after ${elapsed}ms — ${err.message}`);
+  }
+}
+
+function streamTextMerge(prev, incoming) {
+  const p = (prev || "").trim();
+  const n = (incoming || "").trim();
+  if (!n) return p;
+  if (!p) return n;
+  if (n === p) return p;
+  if (n.startsWith(p)) return n;
+  if (p.startsWith(n)) return p;
+  if (p.includes(n)) return p;
+  return `${p} ${n}`.replace(/\s+/g, " ").trim();
+}
+
+function streamTextSnapshot(prev, incoming) {
+  const p = (prev || "").trim();
+  const n = (incoming || "").trim();
+  if (!n) return p;
+  if (!p) return n;
+  if (n === p) return p;
+  // For snapshot-style streaming, incoming text is the latest full hypothesis.
+  // Replacing avoids duplicate growth when decoder revises earlier tokens.
+  return n;
+}
+
+function setSTTLiveStatus(text) {
+  $("stt-live-status").textContent = text;
+}
+
+function stopSTTLiveMetricsTimer() {
+  if (state.sttLiveMetricsTimer) {
+    clearInterval(state.sttLiveMetricsTimer);
+    state.sttLiveMetricsTimer = null;
+  }
+}
+
+function formatRate(bytesPerSec) {
+  const v = Number(bytesPerSec || 0);
+  if (v <= 0) return "0 B/s";
+  if (v >= 1024 * 1024) return `${(v / (1024 * 1024)).toFixed(2)} MB/s`;
+  if (v >= 1024) return `${(v / 1024).toFixed(1)} KB/s`;
+  return `${Math.round(v)} B/s`;
+}
+
+function renderLiveMetrics(ctx, extras = {}) {
+  const now = performance.now();
+  const startedAt = Number(ctx?.startedAt || now);
+  const elapsedMs = Math.max(0, Math.round(now - startedAt));
+  const sentBytes = Number(ctx?.sentBytes || 0);
+  const sentChunks = Number(ctx?.sentChunks || 0);
+  const bps = elapsedMs > 0 ? (sentBytes * 1000) / elapsedMs : 0;
+  const firstTokenLatencyMs = ctx?.firstTokenAt ? Math.max(0, Math.round(ctx.firstTokenAt - startedAt)) : null;
+
+  setText("stt-live-metrics", JSON.stringify({
+    provider: ctx?.provider || null,
+    transport: ctx?.transport || null,
+    status: ctx?.status || null,
+    elapsed_ms: elapsedMs,
+    sent_bytes: sentBytes,
+    sent_chunks: sentChunks,
+    upload_rate: formatRate(bps),
+    first_token_latency_ms: firstTokenLatencyMs,
+    ...extras,
+  }, null, 2));
+}
+
+function startSTTLiveMetricsTimer(ctx, extrasFactory = () => ({})) {
+  stopSTTLiveMetricsTimer();
+  state.sttLiveMetricsTimer = setInterval(() => {
+    if (state.sttLive !== ctx) {
+      stopSTTLiveMetricsTimer();
+      return;
+    }
+    renderLiveMetrics(ctx, extrasFactory());
+  }, 250);
+}
+
+function wsUrl(path, params = {}) {
+  const proto = window.location.protocol === "https:" ? "wss:" : "ws:";
+  const u = new URL(`${proto}//${window.location.host}${path}`);
+  Object.entries(params).forEach(([k, v]) => {
+    if (v != null && String(v).trim() !== "") u.searchParams.set(k, String(v));
+  });
+  return u.toString();
+}
+
+function downsampleFloat32(input, inputRate, outputRate) {
+  if (!input || input.length === 0) return new Float32Array(0);
+  if (outputRate >= inputRate) return input;
+  const ratio = inputRate / outputRate;
+  const outLen = Math.max(1, Math.round(input.length / ratio));
+  const out = new Float32Array(outLen);
+  let inOffset = 0;
+  for (let i = 0; i < outLen; i += 1) {
+    const nextInOffset = Math.min(input.length, Math.round((i + 1) * ratio));
+    let acc = 0;
+    let count = 0;
+    for (let j = inOffset; j < nextInOffset; j += 1) {
+      acc += input[j];
+      count += 1;
+    }
+    out[i] = count > 0 ? acc / count : 0;
+    inOffset = nextInOffset;
+  }
+  return out;
+}
+
+function float32ToPCM16Buffer(input) {
+  const ab = new ArrayBuffer(input.length * 2);
+  const view = new DataView(ab);
+  for (let i = 0; i < input.length; i += 1) {
+    let s = Math.max(-1, Math.min(1, input[i]));
+    s = s < 0 ? s * 0x8000 : s * 0x7fff;
+    view.setInt16(i * 2, s | 0, true);
+  }
+  return ab;
+}
+
+function pickRecorderMimeType() {
+  const candidates = [
+    "audio/webm;codecs=opus",
+    "audio/webm",
+    "audio/mp4",
+  ];
+  for (const t of candidates) {
+    if (window.MediaRecorder && MediaRecorder.isTypeSupported && MediaRecorder.isTypeSupported(t)) {
+      return t;
+    }
+  }
+  return "";
+}
+
+async function transcribeLiveSnapshot(ctx, phase = "streaming") {
+  if (!ctx || ctx.transcribing) return;
+  if (!ctx.chunks || ctx.chunks.length === 0) return;
+  ctx.transcribing = true;
+  const elapsedMs = Math.max(0, Math.round(performance.now() - ctx.startedAt));
+  try {
+    const blob = new Blob(ctx.chunks, { type: ctx.mimeType || "audio/webm" });
+    if (blob.size === 0) return;
+    labLogV("data", `[STT]   HTTP snapshot (${phase}) — ${ctx.chunks.length} chunks, ${(blob.size/1024).toFixed(1)} KB`);
+    const form = new FormData();
+    form.append("provider", ctx.provider);
+    form.append("audio", blob, "live.webm");
+    if (ctx.language) form.append("language", ctx.language);
+    if (ctx.model) form.append("model", ctx.model);
+    if (ctx.device) form.append("device", ctx.device);
+    if (ctx.beamSizeRaw) form.append("beam_size", ctx.beamSizeRaw);
+    const data = await fetchJson("/v1/stt/transcribe", { method: "POST", body: form });
+    ctx.lastDurationMs = data.duration_ms ?? null;
+    ctx.lastLanguage = data.language ?? null;
+    const text = String((data && data.text) || "").trim();
+    if (text) {
+      if (!ctx.firstTokenAt) {
+        ctx.firstTokenAt = performance.now();
+        labLog("info", `[STT] First token received — latency=${Math.round(ctx.firstTokenAt - ctx.startedAt)}ms`);
+      }
+      state.sttLiveText = streamTextSnapshot(state.sttLiveText, text);
+      setText("stt-stream-text", state.sttLiveText);
+      labLogV("data", `[STT]   Snapshot result: "${text.slice(0, 100)}${text.length > 100 ? "..." : ""}" (lang=${data.language ?? "?"})`);
+    }
+    setText("stt-result", JSON.stringify({
+      provider: ctx.provider,
+      mode: "live",
+      status: phase,
+      elapsed_ms: elapsedMs,
+      chunks: ctx.chunks.length,
+      last_duration_ms: data.duration_ms ?? null,
+      language: data.language ?? null,
+    }, null, 2));
+  } catch (err) {
+    setSTTLiveStatus("error");
+    setText("stt-result", `Error: ${err.message}`);
+  } finally {
+    ctx.transcribing = false;
+  }
+}
+
+function cleanupLiveContext(ctx) {
+  if (!ctx) return;
+  try {
+    if (ctx.noTokenFallbackTimer) {
+      clearTimeout(ctx.noTokenFallbackTimer);
+      ctx.noTokenFallbackTimer = null;
+    }
+  } catch (_) {}
+  try {
+    if (ctx.stream) ctx.stream.getTracks().forEach((t) => t.stop());
+  } catch (_) {}
+  try {
+    if (ctx.processor) ctx.processor.disconnect();
+  } catch (_) {}
+  try {
+    if (ctx.source) ctx.source.disconnect();
+  } catch (_) {}
+  try {
+    if (ctx.gain) ctx.gain.disconnect();
+  } catch (_) {}
+  try {
+    if (ctx.audioContext && ctx.audioContext.state !== "closed") {
+      ctx.audioContext.close().catch(() => {});
+    }
+  } catch (_) {}
+  try {
+    if (ctx.ws && (ctx.ws.readyState === WebSocket.OPEN || ctx.ws.readyState === WebSocket.CONNECTING)) {
+      ctx.ws.close();
+    }
+  } catch (_) {}
+}
+
+async function startLiveSTTFallback(provider, language, model, device, beamSizeRaw) {
+  if (!window.MediaRecorder) {
+    throw new Error("MediaRecorder is not supported in this browser");
+  }
+  let stream;
+  stream = await navigator.mediaDevices.getUserMedia({
+    audio: {
+      channelCount: 1,
+      echoCancellation: true,
+      noiseSuppression: true,
+    },
+  });
+  const mimeType = pickRecorderMimeType();
+  const recorder = mimeType
+    ? new MediaRecorder(stream, { mimeType })
+    : new MediaRecorder(stream);
+  const startedAt = performance.now();
+  const ctx = {
+    provider,
+    language,
+    model,
+    device,
+    beamSizeRaw,
+    stream,
+    recorder,
+    mimeType,
+    chunks: [],
+    transcribing: false,
+    startedAt,
+    transport: "http-chunk",
+    sentBytes: 0,
+    sentChunks: 0,
+    firstTokenAt: null,
+    status: "recording",
+  };
+  state.sttLive = ctx;
+  startSTTLiveMetricsTimer(ctx, () => ({
+    mode: "live",
+    chunks_buffered: ctx.chunks.length,
+    text_chars: state.sttLiveText.length,
+    last_duration_ms: ctx.lastDurationMs ?? null,
+    language: ctx.lastLanguage ?? ctx.language ?? null,
+  }));
+
+  recorder.onstart = () => {
+    setSTTLiveStatus("recording");
+    setText("stt-result", JSON.stringify({
+      provider,
+      mode: "live",
+      status: "recording",
+      transport: "http-chunk",
+    }, null, 2));
+  };
+
+  recorder.ondataavailable = async (event) => {
+    if (!event.data || event.data.size <= 0) return;
+    if (state.sttLive !== ctx) return;
+    ctx.sentBytes += Number(event.data.size || 0);
+    ctx.sentChunks += 1;
+    ctx.chunks.push(event.data);
+    await transcribeLiveSnapshot(ctx, "streaming");
+  };
+
+  recorder.onerror = (event) => {
+    const err = event && event.error ? event.error.message || String(event.error) : "recorder error";
+    setSTTLiveStatus("error");
+    setText("stt-result", `Error: ${err}`);
+  };
+
+  recorder.onstop = async () => {
+    if (state.sttLive === ctx) {
+      ctx.status = "closing";
+      await transcribeLiveSnapshot(ctx, "closed");
+      const elapsedMs = Math.max(0, Math.round(performance.now() - startedAt));
+      setText("stt-result", JSON.stringify({
+        provider,
+        mode: "live",
+        status: "closed",
+        transport: "http-chunk",
+        elapsed_ms: elapsedMs,
+        text: state.sttLiveText,
+      }, null, 2));
+      setSTTLiveStatus("stopped");
+      ctx.status = "stopped";
+      renderLiveMetrics(ctx, {
+        mode: "live",
+        chunks_buffered: ctx.chunks.length,
+        text_chars: state.sttLiveText.length,
+        last_duration_ms: ctx.lastDurationMs ?? null,
+        language: ctx.lastLanguage ?? ctx.language ?? null,
+      });
+      stopSTTLiveMetricsTimer();
+      state.sttLive = null;
+    }
+    cleanupLiveContext(ctx);
+  };
+
+  recorder.start(1200);
+}
+
+async function startLiveSTTWebSocket(provider, language, model, device, beamSizeRaw) {
+  const targetRate = 16000;
+  const startedAt = performance.now();
+
+  // Create WebSocket immediately — handshake runs in parallel with getUserMedia
+  const ws = new WebSocket(
+    wsUrl("/v1/stt/stream", { provider, language: language || "", sample_rate: targetRate }),
+  );
+  ws.binaryType = "arraybuffer";
+
+  // Buffer early messages (e.g. "meta") that arrive before onmessage handler is set
+  const earlyMessages = [];
+  ws.onmessage = (event) => { earlyMessages.push(event); };
+
+  const wsOpenPromise = new Promise((resolve, reject) => {
+    let timer = window.setTimeout(() => reject(new Error("WebSocket connect timeout")), 6000);
+    ws.onopen = () => { clearTimeout(timer); timer = 0; resolve(); };
+    ws.onerror = () => {
+      if (timer) { clearTimeout(timer); timer = 0; reject(new Error("WebSocket connection failed")); }
+    };
+    ws.onclose = () => {
+      if (timer) { clearTimeout(timer); timer = 0; reject(new Error("WebSocket closed during setup")); }
+    };
+  });
+
+  // Run getUserMedia and WebSocket handshake in parallel to overlap
+  // mic permission prompt with server-side WS setup + provider eager-start
+  const micPromise = navigator.mediaDevices.getUserMedia({
+    audio: { channelCount: 1, echoCancellation: true, noiseSuppression: true },
+  });
+  let stream;
+  try {
+    [stream] = await Promise.all([micPromise, wsOpenPromise]);
+  } catch (err) {
+    // Clean up mic stream if getUserMedia already resolved
+    micPromise.then(s => s.getTracks().forEach(t => t.stop())).catch(() => {});
+    try { ws.close(); } catch (_) {}
+    throw err;
+  }
+
+  const audioContext = new (window.AudioContext || window.webkitAudioContext)();
+  await audioContext.resume();
+  const source = audioContext.createMediaStreamSource(stream);
+  // bufferSize=2048 → ~42ms per frame at 48kHz, ~1280 bytes after
+  // downsampling to 16kHz PCM16 — matches iFlytek's recommended 40ms frame.
+  const processor = audioContext.createScriptProcessor(2048, 1, 1);
+  const gain = audioContext.createGain();
+  gain.gain.value = 0.0;
+
+  setSTTLiveStatus("recording");
+  labLogV("data", `[STT]   WS opened — audioContext.sampleRate=${audioContext.sampleRate}, targetRate=${targetRate}`);
+  setText("stt-result", JSON.stringify({
+    provider,
+    mode: "live",
+    status: "recording",
+    transport: "ws",
+    audio_context_rate: audioContext.sampleRate,
+    target_rate: targetRate,
+  }, null, 2));
+
+  const ctx = {
+    provider,
+    language,
+    stream,
+    audioContext,
+    source,
+    processor,
+    gain,
+    ws,
+    startedAt,
+    transport: "ws",
+    stopping: false,
+    sentBytes: 0,
+    sentChunks: 0,
+    firstTokenAt: null,
+    status: "recording",
+    noTokenFallbackTimer: null,
+    isBatchMode: false,
+    closedPromiseResolve: null,
+  };
+  state.sttLive = ctx;
+  startSTTLiveMetricsTimer(ctx, () => ({
+    mode: "live",
+    text_chars: state.sttLiveText.length,
+    last_event: ctx.lastEventType || null,
+    ws_ready_state: Number(ctx.ws?.readyState ?? -1),
+  }));
+
+  processor.onaudioprocess = (event) => {
+    if (state.sttLive !== ctx) return;
+    if (ws.readyState !== WebSocket.OPEN) return;
+    const input = event.inputBuffer.getChannelData(0);
+    const mono = downsampleFloat32(input, audioContext.sampleRate, targetRate);
+    if (!mono || mono.length === 0) return;
+    const pcm = float32ToPCM16Buffer(mono);
+    ws.send(pcm);
+    ctx.sentBytes += Number(pcm.byteLength || 0);
+    ctx.sentChunks += 1;
+    if (ctx.sentChunks % 50 === 0) {
+      labLogV("data", `[STT]   Sent ${ctx.sentChunks} chunks, ${(ctx.sentBytes/1024).toFixed(1)} KB`);
+    }
+  };
+
+  source.connect(processor);
+  processor.connect(gain);
+  gain.connect(audioContext.destination);
+
+  // Only set fallback timer for streaming providers; batch providers
+  // are expected to return results only after "stop" — no partials during recording.
+  ctx.noTokenFallbackTimer = window.setTimeout(async () => {
+    if (state.sttLive !== ctx) return;
+    if (ctx.firstTokenAt) return;
+    if ((ctx.sentChunks || 0) <= 0) return;
+    // Batch providers never send partials — don't fall back
+    if (ctx.isBatchMode) return;
+    ctx.stopping = true;
+    setSTTLiveStatus("fallback");
+    setText("stt-result", "WS has no transcript yet, falling back to chunk HTTP...");
+    try {
+      if (ctx.ws && ctx.ws.readyState === WebSocket.OPEN) {
+        ctx.ws.send(JSON.stringify({ type: "stop" }));
+      }
+    } catch (_) {}
+    try {
+      if (ctx.ws) ctx.ws.close();
+    } catch (_) {}
+    cleanupLiveContext(ctx);
+    if (state.sttLive === ctx) state.sttLive = null;
+    try {
+      await startLiveSTTFallback(provider, language, model, device, beamSizeRaw);
+    } catch (err) {
+      setSTTLiveStatus("error");
+      setText("stt-result", `Fallback failed: ${err && err.message ? err.message : err}`);
+    }
+  }, 7000);
+
+  const handleMessage = (event) => {
+    if (state.sttLive !== ctx) return;
+    let msg;
+    try {
+      msg = JSON.parse(String(event.data || "{}"));
+    } catch (_) {
+      return;
+    }
+    if (msg.type === "meta") {
+      ctx.isBatchMode = !msg.streaming;
+      labLogV("data", `[STT]   Meta received — streaming=${msg.streaming}, batch_mode=${ctx.isBatchMode}`);
+      return;
+    }
+    if (msg.type === "error") {
+      ctx.lastEventType = "error";
+      ctx.status = "error";
+      setSTTLiveStatus("error");
+      setText("stt-result", `Error: ${msg.detail || "stream error"}`);
+      labLog("error", `[STT] Stream error: ${msg.detail || "unknown"}`);
+      return;
+    }
+    if (msg.type === "partial" || msg.type === "final") {
+      ctx.lastEventType = msg.type;
+      if (!ctx.firstTokenAt) {
+        ctx.firstTokenAt = performance.now();
+        labLog("info", `[STT] First token received — latency=${Math.round(ctx.firstTokenAt - startedAt)}ms`);
+      }
+      if (ctx.noTokenFallbackTimer) {
+        clearTimeout(ctx.noTokenFallbackTimer);
+        ctx.noTokenFallbackTimer = null;
+      }
+      const text = String(msg.text || "").trim();
+      if (text) {
+        state.sttLiveText = streamTextSnapshot(state.sttLiveText, text);
+        setText("stt-stream-text", state.sttLiveText);
+        if (msg.type === "final") {
+          labLog("data", `[STT] Final: "${text.slice(0, 120)}${text.length > 120 ? "..." : ""}"`);
+        } else {
+          labLogV("data", `[STT]   Partial: "${text.slice(0, 80)}${text.length > 80 ? "..." : ""}" (conf=${msg.confidence ?? "N/A"})`);
+        }
+      }
+      const elapsedMs = Math.max(0, Math.round(performance.now() - startedAt));
+      setText("stt-result", JSON.stringify({
+        provider,
+        mode: "live",
+        status: msg.type === "final" ? "final" : "streaming",
+        transport: "ws",
+        elapsed_ms: elapsedMs,
+        language: msg.language ?? language ?? null,
+        confidence: msg.confidence ?? null,
+      }, null, 2));
+
+      // When we receive a "final" result (e.g. iFlytek VAD triggered),
+      // auto-stop recording: release mic & audio resources immediately,
+      // then let the WS "closed" message handle the rest naturally.
+      if (msg.type === "final" && state.sttLive === ctx) {
+        labLog("info", `[STT] VAD end-of-speech detected — auto-stopping recording`);
+        ctx.stopping = true;
+        // Stop mic & audio pipeline (but keep WS open for "closed" msg)
+        try { if (ctx.stream) ctx.stream.getTracks().forEach((t) => t.stop()); } catch (_) {}
+        try { if (ctx.processor) ctx.processor.disconnect(); } catch (_) {}
+        try { if (ctx.source) ctx.source.disconnect(); } catch (_) {}
+        try { if (ctx.gain) ctx.gain.disconnect(); } catch (_) {}
+        try {
+          if (ctx.audioContext && ctx.audioContext.state !== "closed") {
+            ctx.audioContext.close().catch(() => {});
+          }
+        } catch (_) {}
+        setSTTLiveStatus("stopped");
+      }
+
+      return;
+    }
+    if (msg.type === "closed") {
+      ctx.lastEventType = "closed";
+      const elapsedMs = Math.max(0, Math.round(performance.now() - startedAt));
+      labLog("info", `[STT] Session closed — elapsed=${elapsedMs}ms, result=${state.sttLiveText.length} chars`);
+      setSTTLiveStatus("stopped");
+      ctx.status = "stopped";
+      setText("stt-result", JSON.stringify({
+        provider,
+        mode: "live",
+        status: "closed",
+        transport: "ws",
+        elapsed_ms: elapsedMs,
+        text: state.sttLiveText,
+      }, null, 2));
+      if (state.sttLive === ctx) {
+        renderLiveMetrics(ctx, {
+          mode: "live",
+          text_chars: state.sttLiveText.length,
+          last_event: ctx.lastEventType || null,
+          ws_ready_state: Number(ctx.ws?.readyState ?? -1),
+        });
+        stopSTTLiveMetricsTimer();
+        state.sttLive = null;
+      }
+      if (ctx.closedPromiseResolve) {
+        ctx.closedPromiseResolve();
+        ctx.closedPromiseResolve = null;
+      }
+      cleanupLiveContext(ctx);
+    }
+  };
+  ws.onmessage = handleMessage;
+  // Replay any messages that arrived before the handler was set (e.g. "meta")
+  for (const ev of earlyMessages) handleMessage(ev);
+
+  ws.onerror = () => {
+    if (state.sttLive !== ctx) return;
+    ctx.lastEventType = "error";
+    ctx.status = "error";
+    if (ctx.noTokenFallbackTimer) {
+      clearTimeout(ctx.noTokenFallbackTimer);
+      ctx.noTokenFallbackTimer = null;
+    }
+    setSTTLiveStatus("error");
+    setText("stt-result", "Error: live WS stream failed");
+  };
+
+  ws.onclose = () => {
+    // Resolve the stop promise in case WS closed without a "closed" message
+    if (ctx.closedPromiseResolve) {
+      ctx.closedPromiseResolve();
+      ctx.closedPromiseResolve = null;
+    }
+    if (state.sttLive !== ctx) return;
+    if (!ctx.stopping) {
+      if (ctx.noTokenFallbackTimer) {
+        clearTimeout(ctx.noTokenFallbackTimer);
+        ctx.noTokenFallbackTimer = null;
+      }
+      ctx.lastEventType = "closed";
+      ctx.status = "stopped";
+      setSTTLiveStatus("stopped");
+      const elapsedMs = Math.max(0, Math.round(performance.now() - startedAt));
+      setText("stt-result", JSON.stringify({
+        provider,
+        mode: "live",
+        status: "closed",
+        transport: "ws",
+        elapsed_ms: elapsedMs,
+        text: state.sttLiveText,
+      }, null, 2));
+      renderLiveMetrics(ctx, {
+        mode: "live",
+        text_chars: state.sttLiveText.length,
+        last_event: ctx.lastEventType || null,
+        ws_ready_state: Number(ctx.ws?.readyState ?? -1),
+      });
+      stopSTTLiveMetricsTimer();
+      state.sttLive = null;
+      cleanupLiveContext(ctx);
+    }
+  };
+}
+
+async function startLiveSTT() {
+  await stopLiveSTT();
+  const provider = $("stt-provider").value;
+  if (!provider) {
+    setText("stt-result", "Error: provider is required");
+    return;
+  }
+  const language = $("stt-language").value.trim();
+  const model = $("stt-model").value.trim();
+  const device = $("stt-device").value.trim();
+  const beamSizeRaw = $("stt-beam-size").value.trim();
+  state.sttLiveText = "";
+  setText("stt-stream-text", "");
+  setText("stt-result", "Starting live STT...");
+  setText("stt-live-metrics", JSON.stringify({ status: "initializing" }, null, 2));
+  setSTTLiveStatus("initializing");
+  labLog("info", `[STT] Start live recording — provider=${provider}, lang=${language || "auto"}`);
+  labLogV("data", `[STT]   model=${model || "(auto)"}, device=${device || "(auto)"}, beam_size=${beamSizeRaw || "(default)"}`);
+  try {
+    labLogV("data", `[STT]   Connecting WebSocket /v1/stt/stream ...`);
+    await startLiveSTTWebSocket(provider, language, model, device, beamSizeRaw);
+    labLog("info", `[STT] WebSocket connected — transport=ws`);
+  } catch (err) {
+    labLog("warn", `[STT] WebSocket failed: ${err.message || err}, falling back to HTTP chunk`);
+    cleanupLiveContext(state.sttLive);
+    state.sttLive = null;
+    setSTTLiveStatus("fallback");
+    setText("stt-result", `WS init failed, fallback to chunk HTTP: ${err.message || err}`);
+    await startLiveSTTFallback(provider, language, model, device, beamSizeRaw);
+    labLog("info", `[STT] Fallback recording started — transport=http-chunk`);
+  }
+}
+
+async function stopLiveSTT() {
+  const ctx = state.sttLive;
+  if (!ctx) return;
+  labLog("info", `[STT] Stopping live recording...`);
+  labLogV("data", `[STT]   transport=${ctx.transport || "?"}, sent=${ctx.sentChunks} chunks / ${(ctx.sentBytes/1024).toFixed(1)} KB, text=${state.sttLiveText.length} chars`);
+  setSTTLiveStatus("stopping");
+  ctx.status = "stopping";
+  if (ctx.ws) {
+    ctx.stopping = true;
+    try {
+      if (ctx.ws.readyState === WebSocket.OPEN) {
+        ctx.ws.send(JSON.stringify({ type: "stop" }));
+      }
+    } catch (_) {}
+
+    // Wait for backend to send "final" + "closed" before closing WS.
+    // This is critical for batch providers (e.g. native_stt) which only
+    // transcribe after receiving "stop".
+    if (ctx.ws.readyState === WebSocket.OPEN || ctx.ws.readyState === WebSocket.CONNECTING) {
+      if (ctx.isBatchMode) {
+        setSTTLiveStatus("transcribing");
+        setText("stt-result", JSON.stringify({
+          provider: ctx.provider,
+          mode: "live",
+          status: "transcribing",
+          transport: "ws",
+          info: "Waiting for batch recognition result...",
+        }, null, 2));
+      }
+      try {
+        await Promise.race([
+          new Promise((resolve) => { ctx.closedPromiseResolve = resolve; }),
+          new Promise((resolve) => setTimeout(resolve, 20000)),  // 20s safety timeout
+        ]);
+      } catch (_) {}
+    }
+
+    try {
+      if (ctx.ws.readyState !== WebSocket.CLOSED) ctx.ws.close();
+    } catch (_) {}
+    // Only clean up if the "closed" handler didn't already do it
+    if (state.sttLive === ctx) {
+      cleanupLiveContext(ctx);
+      renderLiveMetrics(ctx, {
+        mode: "live",
+        text_chars: state.sttLiveText.length,
+        last_event: ctx.lastEventType || null,
+        ws_ready_state: Number(ctx.ws?.readyState ?? -1),
+      });
+      stopSTTLiveMetricsTimer();
+      state.sttLive = null;
+    }
+    setSTTLiveStatus("stopped");
+    return;
+  }
+  try {
+    if (ctx.recorder && ctx.recorder.state !== "inactive") {
+      try {
+        ctx.recorder.requestData();
+      } catch (_) {}
+      ctx.recorder.stop();
+      return;
+    }
+  } catch (_) {}
+  cleanupLiveContext(ctx);
+  renderLiveMetrics(ctx, {
+    mode: "live",
+    chunks_buffered: ctx.chunks ? ctx.chunks.length : 0,
+    text_chars: state.sttLiveText.length,
+    last_duration_ms: ctx.lastDurationMs ?? null,
+    language: ctx.lastLanguage ?? ctx.language ?? null,
+  });
+  stopSTTLiveMetricsTimer();
+  state.sttLive = null;
+  setSTTLiveStatus("stopped");
+}
+
+async function runTTS(e) {
+  e.preventDefault();
+  const provider = $("tts-provider").value;
+  const text = $("tts-text").value.trim();
+  const model = $("tts-model").value.trim();
+  const streamTransport = $("tts-transport").value.trim();
+  if (!provider || !text) return;
+
+  stopTTSTimer();
+  hideTTSDownload();
+  const startedAt = performance.now();
+  const audioChunks = [];
+  let receivedBytes = 0;
+  let meta = {};
+  let firstChunkAt = 0;
+
+  labLog("info", `[TTS] Start synthesis — provider=${provider}, text=${text.length} chars, voice=${$("tts-voice").value || "(default)"}`);
+  labLogV("data", `[TTS]   speed=${parseFloat($("tts-speed").value) || 1.0}, model=${model || "(auto)"}, transport=${streamTransport || "(auto)"}`);
+  labLogV("data", `[TTS]   text="${text.slice(0, 80)}${text.length > 80 ? "..." : ""}"`);
+
+  const renderStreaming = () => {
+    const elapsed = Math.max(0, Math.round(performance.now() - startedAt));
+    setText("tts-result", JSON.stringify({
+      provider,
+      status: "streaming",
+      received_bytes: receivedBytes,
+      chunks: audioChunks.length,
+      elapsed_ms: elapsed,
+      first_chunk_ms: firstChunkAt ? Math.round(firstChunkAt - startedAt) : null,
+      text_chars: text.length,
+    }, null, 2));
+  };
+  renderStreaming();
+  // Show download panel immediately in streaming mode, but keep button disabled
+  // until we have a complete audio buffer.
+  showTTSDownload(meta.audio_format || "streaming", false);
+  state.ttsTimer = setInterval(renderStreaming, 120);
+
+  const wsProto = location.protocol === "https:" ? "wss:" : "ws:";
+  const wsUrl = `${wsProto}//${location.host}/v1/tts/stream`;
+
+  // Streaming playback state
+  let streamPlayer = null;
+
+  try {
+    await new Promise((resolve, reject) => {
+      const ws = new WebSocket(wsUrl);
+      ws.binaryType = "arraybuffer";
+
+      ws.onopen = () => {
+        labLog("info", `[TTS] WebSocket connected, sending request...`);
+        const payload = {
+          provider,
+          text,
+          voice: $("tts-voice").value || null,
+          speed: parseFloat($("tts-speed").value) || 1.0,
+          model: model || null,
+          stream_transport: streamTransport || null,
+        };
+        labLogV("data", `[TTS]   WS send: ${JSON.stringify(payload).slice(0, 200)}`);
+        ws.send(JSON.stringify(payload));
+      };
+
+      ws.onmessage = (event) => {
+        if (event.data instanceof ArrayBuffer) {
+          if (!firstChunkAt) {
+            firstChunkAt = performance.now();
+            labLog("info", `[TTS] First audio chunk — latency=${Math.round(firstChunkAt - startedAt)}ms, size=${event.data.byteLength}B`);
+          }
+          audioChunks.push(event.data);
+          receivedBytes += event.data.byteLength;
+          if (audioChunks.length % 20 === 0) {
+            labLogV("data", `[TTS]   Received ${audioChunks.length} chunks, ${(receivedBytes/1024).toFixed(1)} KB`);
+          }
+
+          // Feed chunk to streaming player
+          if (streamPlayer) {
+            streamPlayer.feed(new Uint8Array(event.data));
+          }
+        } else {
+          try {
+            const msg = JSON.parse(event.data);
+            if (msg.type === "meta") {
+              meta = msg;
+              labLog("info", `[TTS] Stream meta received — format=${msg.audio_format || "?"}, rate=${msg.sample_rate || "?"}, streaming=${msg.streaming}`);
+              // Initialize streaming player based on audio format
+              const audioFormat = msg.audio_format || "wav";
+              streamPlayer = createStreamPlayer(audioFormat);
+              streamPlayer.start();
+            } else if (msg.type === "done") {
+              meta = { ...meta, ...msg };
+              if (streamPlayer) streamPlayer.end();
+              ws.close();
+              resolve();
+            } else if (msg.type === "error") {
+              labLog("error", `[TTS] Stream error: ${msg.detail || "unknown"}`);
+              ws.close();
+              reject(new Error(msg.detail || "TTS streaming error"));
+            }
+          } catch (_) {}
+        }
+      };
+
+      ws.onerror = () => {
+        labLogV("error", `[TTS]   WS onerror event`);
+        reject(new Error("WebSocket connection failed"));
+      };
+
+      ws.onclose = (ev) => {
+        labLogV("data", `[TTS]   WS closed — code=${ev.code}, reason=${ev.reason || "(none)"}`);
+        if (ev.code !== 1000 && ev.code !== 1005 && audioChunks.length === 0) {
+          reject(new Error(`WebSocket closed: ${ev.reason || ev.code}`));
+        } else {
+          resolve();
+        }
+      };
+    });
+
+    const totalSize = audioChunks.reduce((s, c) => s + c.byteLength, 0);
+    const clientElapsedMs = Math.max(0, Math.round(performance.now() - startedAt));
+
+    // Combine all chunks into a single buffer
+    const combined = new Uint8Array(totalSize);
+    let offset = 0;
+    for (const chunk of audioChunks) {
+      combined.set(new Uint8Array(chunk), offset);
+      offset += chunk.byteLength;
+    }
+
+    // If streamPlayer was not used (no meta message), fallback to full-buffer playback
+    if (!streamPlayer) {
+      const blob = new Blob([combined], { type: "audio/wav" });
+      const audio = $("tts-audio");
+      audio.src = URL.createObjectURL(blob);
+      audio.play().catch(() => {});
+    }
+
+    // Store audio data for download
+    const audioFormat = meta.audio_format || "wav";
+    state.ttsAudioData = combined;
+    state.ttsAudioFormat = audioFormat;
+    state.ttsSampleRate = meta.sample_rate || 16000;
+    state.ttsChannels = meta.channels || 1;
+    showTTSDownload(audioFormat, true);
+
+    setText("tts-result", JSON.stringify({
+      provider,
+      status: "done",
+      mode: meta.streaming ? "streaming" : "batch",
+      format: audioFormat,
+      bytes: totalSize,
+      chunks: audioChunks.length,
+      sample_rate: meta.sample_rate || null,
+      duration_ms: meta.duration_ms || 0,
+      elapsed_ms: clientElapsedMs,
+      first_chunk_ms: firstChunkAt ? Math.round(firstChunkAt - startedAt) : null,
+    }, null, 2));
+    labLog("info", `[TTS] Completed in ${clientElapsedMs}ms — ${totalSize} bytes, ${audioChunks.length} chunks, format=${audioFormat}`);
+    labLogV("data", `[TTS]   mode=${meta.streaming ? "streaming" : "batch"}, sample_rate=${meta.sample_rate || "?"}, duration=${meta.duration_ms || "?"}ms, first_chunk=${firstChunkAt ? Math.round(firstChunkAt - startedAt) + "ms" : "N/A"}`);
+  } catch (err) {
+    if (streamPlayer) streamPlayer.destroy();
+    const clientElapsedMs = Math.max(0, Math.round(performance.now() - startedAt));
+    setText("tts-result", JSON.stringify({
+      provider,
+      status: "error",
+      elapsed_ms: clientElapsedMs,
+      error: String(err && err.message ? err.message : err),
+    }, null, 2));
+    labLog("error", `[TTS] Failed after ${clientElapsedMs}ms — ${err && err.message ? err.message : err}`);
+  } finally {
+    stopTTSTimer();
+  }
+}
+
+// --- TTS Download ---
+
+function showTTSDownload(originalFormat, ready = true) {
+  const area = $("tts-download-area");
+  const select = $("tts-download-format");
+  const btn = $("tts-download-btn");
+  const status = $("tts-download-status");
+  if (!area || !select) return;
+
+  // Update the "Original" option label
+  const origOpt = select.querySelector('option[value="__original__"]');
+  if (origOpt) origOpt.textContent = "Original (" + (originalFormat || "raw").toUpperCase() + ")";
+
+  // Load available formats from server
+  fetchJson("/v1/tts/formats").then(data => {
+    const formats = data.formats || [];
+    // Enable/disable options based on ffmpeg availability
+    for (const opt of select.options) {
+      if (opt.value === "__original__") continue;
+      const fmt = formats.find(f => f.id === opt.value);
+      if (fmt) {
+        opt.disabled = !fmt.available;
+        opt.textContent = fmt.label + (fmt.available ? "" : " (needs ffmpeg)");
+      }
+    }
+  }).catch(() => {});
+
+  area.classList.remove("hidden");
+  if (btn) btn.disabled = !ready;
+  if (status) {
+    status.textContent = ready ? "" : "Available after synthesis completes";
+  }
+}
+
+function hideTTSDownload() {
+  const area = $("tts-download-area");
+  const btn = $("tts-download-btn");
+  const status = $("tts-download-status");
+  if (area) area.classList.add("hidden");
+  if (btn) btn.disabled = false;
+  if (status) status.textContent = "";
+  state.ttsAudioData = null;
+  state.ttsAudioFormat = null;
+}
+
+window.downloadTTSAudio = async function(event) {
+  if (event && typeof event.preventDefault === "function") event.preventDefault();
+  if (event && typeof event.stopPropagation === "function") event.stopPropagation();
+  if (!state.ttsAudioData) return;
+
+  const select = $("tts-download-format");
+  const statusEl = $("tts-download-status");
+  const targetFormat = select.value;
+
+  // Direct download if original format or same format
+  if (targetFormat === "__original__" || targetFormat === state.ttsAudioFormat) {
+    const ext = { mp3: ".mp3", wav: ".wav", ogg: ".ogg", flac: ".flac", opus: ".opus" };
+    const mimes = { mp3: "audio/mpeg", wav: "audio/wav", ogg: "audio/ogg", flac: "audio/flac", opus: "audio/opus" };
+    const fmt = state.ttsAudioFormat || "wav";
+    const blob = new Blob([state.ttsAudioData], { type: mimes[fmt] || "application/octet-stream" });
+    triggerDownload(blob, "speech" + (ext[fmt] || ".bin"));
+    statusEl.textContent = "Downloaded";
+    return;
+  }
+
+  // Convert via server
+  statusEl.textContent = "Converting...";
+  try {
+    const formData = new FormData();
+    const srcFmt = state.ttsAudioFormat || "wav";
+    const mimes = { mp3: "audio/mpeg", wav: "audio/wav", ogg: "audio/ogg", flac: "audio/flac" };
+    const blob = new Blob([state.ttsAudioData], { type: mimes[srcFmt] || "application/octet-stream" });
+    formData.append("audio", blob, "audio." + srcFmt);
+    formData.append("source_format", srcFmt);
+    formData.append("target_format", targetFormat);
+    formData.append("sample_rate", String(state.ttsSampleRate));
+    formData.append("channels", String(state.ttsChannels));
+
+    const resp = await fetch("/v1/tts/convert", { method: "POST", body: formData });
+    if (!resp.ok) {
+      const err = await resp.json().catch(() => ({ detail: resp.statusText }));
+      throw new Error(err.detail || "Conversion failed");
+    }
+    const resultBlob = await resp.blob();
+    const ext = { wav: ".wav", mp3: ".mp3", ogg: ".ogg", flac: ".flac", opus: ".opus" };
+    triggerDownload(resultBlob, "speech" + (ext[targetFormat] || ".bin"));
+    statusEl.textContent = "Downloaded (" + targetFormat.toUpperCase() + ")";
+  } catch (e) {
+    statusEl.textContent = "Error: " + e.message;
+  }
+};
+
+function triggerDownload(blob, filename) {
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = filename;
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+  setTimeout(() => URL.revokeObjectURL(url), 5000);
+}
+
+/**
+ * Create a streaming audio player that plays chunks as they arrive.
+ * Strategy:
+ *   1. MSE (MediaSource Extensions) for MP3 — true chunk-by-chunk playback
+ *   2. Progressive Blob — grow a Blob URL as chunks arrive, good enough for MP3
+ *   3. Full-buffer fallback for WAV/PCM
+ */
+function createStreamPlayer(audioFormat) {
+  const mseType = audioFormat === "mp3" ? 'audio/mpeg' : 'audio/wav';
+  const mseSupported = window.MediaSource && MediaSource.isTypeSupported(mseType);
+  console.log('[StreamPlayer] format=' + audioFormat + ' MSE(' + mseType + ')=' + mseSupported);
+
+  if (mseSupported) {
+    return createMSEPlayer(mseType);
+  }
+  // Fallback: progressive blob for MP3, full-buffer for others
+  if (audioFormat === "mp3") {
+    return createProgressiveBlobPlayer("audio/mpeg");
+  }
+  return createFullBufferPlayer();
+}
+
+/** MSE-based streaming player — true low-latency chunk playback */
+function createMSEPlayer(mimeType) {
+  const audio = $("tts-audio");
+  let mediaSource = null;
+  let sourceBuffer = null;
+  let queue = [];
+  let ended = false;
+  let sourceOpen = false;
+  let chunkIdx = 0;
+
+  function appendNext() {
+    if (!sourceBuffer || sourceBuffer.updating || queue.length === 0) return;
+    const chunk = queue.shift();
+    try {
+      sourceBuffer.appendBuffer(chunk);
+      console.log('[MSE] appended chunk #' + (chunkIdx++) + ', ' + chunk.byteLength + ' bytes, buffered=' + (sourceBuffer.buffered.length > 0 ? sourceBuffer.buffered.end(0).toFixed(2) + 's' : '0s'));
+    } catch (e) {
+      console.warn("[MSE] appendBuffer error:", e);
+    }
+  }
+
+  return {
+    start() {
+      mediaSource = new MediaSource();
+      audio.src = URL.createObjectURL(mediaSource);
+
+      mediaSource.addEventListener('sourceopen', () => {
+        sourceOpen = true;
+        console.log('[MSE] sourceopen fired');
+        try {
+          sourceBuffer = mediaSource.addSourceBuffer(mimeType);
+          sourceBuffer.addEventListener('updateend', () => {
+            if (queue.length > 0) {
+              appendNext();
+            } else if (ended && mediaSource.readyState === 'open') {
+              try { mediaSource.endOfStream(); console.log('[MSE] endOfStream called'); } catch (_) {}
+            }
+          });
+          // Flush any queued data that arrived before sourceopen
+          if (queue.length > 0) appendNext();
+        } catch (e) {
+          console.error("[MSE] addSourceBuffer error:", e);
+        }
+      });
+
+      audio.play().catch(e => console.log('[MSE] play() rejected:', e.message));
+    },
+    feed(data) {
+      const buf = (data.buffer && data.buffer instanceof ArrayBuffer) ? data.buffer : data;
+      queue.push(buf);
+      if (sourceOpen && sourceBuffer && !sourceBuffer.updating) {
+        appendNext();
+      }
+    },
+    end() {
+      ended = true;
+      console.log('[MSE] end() called, queue=' + queue.length + ', updating=' + (sourceBuffer ? sourceBuffer.updating : 'N/A'));
+      if (sourceBuffer && !sourceBuffer.updating && queue.length === 0 && mediaSource.readyState === 'open') {
+        try { mediaSource.endOfStream(); } catch (_) {}
+      }
+    },
+    destroy() {
+      try {
+        if (mediaSource && mediaSource.readyState === 'open') mediaSource.endOfStream();
+      } catch (_) {}
+    },
+  };
+}
+
+/**
+ * Progressive Blob player for MP3 — rebuilds Blob URL on each chunk.
+ * Less efficient than MSE but works universally.
+ * Starts playback after the first chunk arrives.
+ */
+function createProgressiveBlobPlayer(mimeType) {
+  const audio = $("tts-audio");
+  const chunks = [];
+  let playing = false;
+
+  return {
+    start() {},
+    feed(data) {
+      chunks.push(new Uint8Array(data));
+      console.log('[ProgressiveBlob] chunk #' + chunks.length + ', ' + data.byteLength + ' bytes');
+      // Start playback after the first chunk
+      if (!playing && chunks.length >= 1) {
+        playing = true;
+        const blob = new Blob(chunks, { type: mimeType });
+        audio.src = URL.createObjectURL(blob);
+        audio.play().catch(e => console.log('[ProgressiveBlob] play rejected:', e.message));
+      }
+    },
+    end() {
+      // Rebuild final Blob with all chunks for full playback + seeking
+      console.log('[ProgressiveBlob] end(), total chunks=' + chunks.length);
+      const blob = new Blob(chunks, { type: mimeType });
+      const url = URL.createObjectURL(blob);
+      const currentTime = audio.currentTime;
+      audio.src = url;
+      audio.currentTime = currentTime;
+      if (audio.paused) audio.play().catch(() => {});
+    },
+    destroy() {},
+  };
+}
+
+/** Full-buffer player — collects all chunks, plays once at the end */
+function createFullBufferPlayer() {
+  const chunks = [];
+  const audio = $("tts-audio");
+
+  return {
+    start() {},
+    feed(data) {
+      chunks.push(new Uint8Array(data));
+    },
+    end() {
+      const totalSize = chunks.reduce((s, c) => s + c.byteLength, 0);
+      const combined = new Uint8Array(totalSize);
+      let offset = 0;
+      for (const c of chunks) { combined.set(c, offset); offset += c.byteLength; }
+      const blob = new Blob([combined], { type: "audio/wav" });
+      audio.src = URL.createObjectURL(blob);
+      audio.play().catch(() => {});
+    },
+    destroy() {},
+  };
+}
+
+function enginePayload(action) {
+  const dockerImage = $("engine-docker-image").value.trim();
+  const modelRepo = $("engine-model-repo").value.trim();
+  const pullOnStart = Boolean($("engine-pull-on-start").checked);
+  const simulateDownload = Boolean($("engine-simulate-download").checked);
+  const installDir = $("engine-install-dir").value.trim() || "~/AI/services";
+  const options = {};
+  if (dockerImage) {
+    options.docker_image = dockerImage;
+  }
+  if (modelRepo) {
+    options.native_model_repo = modelRepo;
+  }
+  options.native_simulate_download = simulateDownload;
+  options.pull_on_start = pullOnStart;
+  return {
+    engine: ($("engine-name") || {}).value?.trim() || "fish-speech",
+    action,
+    runtime: ($("engine-runtime") || {}).value || "native",
+    api_url: ($("engine-api-url") || {}).value?.trim() || "http://127.0.0.1:8080",
+    install_dir: installDir,
+    options,
+  };
+}
+
+function subscribeTask(taskId) {
+  if (!taskId) return;
+  if (state.eventSource) {
+    state.eventSource.close();
+  }
+  if ($("task-id-input")) $("task-id-input").value = taskId;
+  const es = new EventSource(`/v1/engines/tasks/${taskId}/events`);
+  state.eventSource = es;
+
+  es.addEventListener("snapshot", (ev) => {
+    const task = JSON.parse(ev.data);
+    ($("engine-state")||{}).textContent = task.status;
+    setOutput(`${task.action} ${task.phase} (${task.status}) :: ${task.message}`);
+    refreshTasksOnly();
+  });
+
+  es.addEventListener("progress", (ev) => {
+    const p = JSON.parse(ev.data);
+    const percent = p.progress == null ? "--" : `${Number(p.progress).toFixed(1)}%`;
+    const eta = p.eta_seconds == null ? "--:--" : formatEta(p.eta_seconds);
+    setOutput(`${p.action} ${p.phase} ${percent} ETA ${eta} :: ${p.message}`);
+  });
+
+  es.addEventListener("done", (ev) => {
+    const task = JSON.parse(ev.data);
+    setOutput(`DONE ${task.status}: ${task.message}`);
+    ($("engine-state")||{}).textContent = task.status;
+    es.close();
+    state.eventSource = null;
+    refreshTasksOnly();
+  });
+
+  es.onerror = () => {
+    setOutput("SSE disconnected.");
+    es.close();
+    if (state.eventSource === es) state.eventSource = null;
+  };
+}
+
+async function triggerEngineAction(action) {
+  try {
+    const data = await fetchJson("/v1/engines/actions", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(enginePayload(action)),
+    });
+    const task = data.task;
+    setOutput(`Task created: ${task.task_id} (${action})`);
+    subscribeTask(task.task_id);
+  } catch (err) {
+    setOutput(`Action failed: ${err.message}`);
+  }
+}
+
+// Quick engine action from dashboard (uses provider alias to guess engine name)
+window.engineAction = async function(providerAlias, action) {
+  const engineMap = {
+    "tts": "fish-speech", "stt_fw": "faster-whisper", "stt_whisper": "whisper",
+    "stt_wlk": "whisperlivekit", "stt_sherpa": "sherpa-onnx",
+  };
+  const engine = engineMap[providerAlias] || providerAlias;
+  addLog(engine, action, 'running', `${action}ing...`);
+  try {
+    const data = await fetchJson("/v1/engines/actions", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        engine: engine, action: action, runtime: "native",
+        api_url: "http://127.0.0.1:8080", install_dir: "~/AI/services",
+      }),
+    });
+    addLog(engine, action, 'ok', `Task: ${data.task.task_id}`);
+    setTimeout(() => { refreshDashboard(); loadCatalog(); }, 3000);
+  } catch (err) {
+    addLog(engine, action, 'failed', err.message);
+  }
+};
+
+async function refreshTasksOnly() {
+  try {
+    const tasksData = await fetchJson("/v1/engines/tasks?limit=20");
+    renderTasks(tasksData.tasks || []);
+  } catch (err) {
+    setOutput(`Task refresh failed: ${err.message}`);
+  }
+}
+
+async function fetchEngineStatus() {
+  try {
+    const params = new URLSearchParams({
+      engine: $("engine-name").value.trim() || "fish-speech",
+      runtime: $("engine-runtime").value,
+      api_url: $("engine-api-url").value.trim() || "http://127.0.0.1:8080",
+      install_dir: $("engine-install-dir").value.trim() || "~/AI/services",
+    });
+    const data = await fetchJson(`/v1/engines/status?${params.toString()}`);
+    ($("engine-state")||{}).textContent = data.running ? (data.healthy ? "healthy" : "degraded") : "stopped";
+    setOutput(`Status: running=${data.running}, healthy=${data.healthy}, detail=${data.detail}`);
+  } catch (err) {
+    setOutput(`Status failed: ${err.message}`);
+  }
+}
+
+async function fetchEngineLogs() {
+  try {
+    const params = new URLSearchParams({
+      engine: $("engine-name").value.trim() || "fish-speech",
+      runtime: $("engine-runtime").value,
+      api_url: $("engine-api-url").value.trim() || "http://127.0.0.1:8080",
+      install_dir: $("engine-install-dir").value.trim() || "~/AI/services",
+      lines: "120",
+    });
+    const data = await fetchJson(`/v1/engines/logs?${params.toString()}`);
+    setOutput(`Logs:\n${data.logs || "(empty)"}`);
+  } catch (err) {
+    setOutput(`Logs failed: ${err.message}`);
+  }
+}
+
+async function followTaskFromInput() {
+  const taskId = $("task-id-input").value.trim();
+  if (!taskId) return;
+  subscribeTask(taskId);
+}
+
+async function cancelTaskFromInput() {
+  const taskId = $("task-id-input").value.trim();
+  if (!taskId) return;
+  try {
+    const data = await fetchJson(`/v1/engines/tasks/${taskId}/cancel`, { method: "POST" });
+    setOutput(`Cancel requested: ${data.task.task_id}`);
+    subscribeTask(taskId);
+  } catch (err) {
+    setOutput(`Cancel failed: ${err.message}`);
+  }
+}
+
+function bindEvents() {
+  $("refresh-all").addEventListener("click", () => {
+    refreshDashboard().catch((err) => setOutput(`Refresh failed: ${err.message}`));
+  });
+
+  $("stt-form").addEventListener("submit", runSTT);
+  $("stt-mode").addEventListener("change", updateSTTModeUI);
+  $("stt-live-start").addEventListener("click", (e) => {
+    e.preventDefault();
+    startLiveSTT().catch((err) => {
+      setSTTLiveStatus("error");
+      setText("stt-result", `Error: ${err.message}`);
+    });
+  });
+  $("stt-live-stop").addEventListener("click", (e) => {
+    e.preventDefault();
+    stopLiveSTT().catch((err) => {
+      setSTTLiveStatus("error");
+      setText("stt-result", `Error: ${err.message}`);
+    });
+  });
+  $("stt-provider").addEventListener("change", () => {
+    loadSTTFieldOptions($("stt-provider").value);
+  });
+  $("tts-provider").addEventListener("change", () => {
+    loadTTSVoices($("tts-provider").value);
+    loadTTSFieldOptions($("tts-provider").value);
+  });
+  $("tts-model").addEventListener("change", () => {
+    maybeAutoAdjustTTSTransportByModel();
+  });
+  $("tts-form").addEventListener("submit", runTTS);
+
+  document.querySelectorAll("button[data-action]").forEach((btn) => {
+    btn.addEventListener("click", (e) => {
+      e.preventDefault();
+      const action = btn.dataset.action;
+      triggerEngineAction(action);
+    });
+  });
+
+  if ($("engine-status-btn")) $("engine-status-btn").addEventListener("click", (e) => {
+    e.preventDefault();
+    fetchEngineStatus();
+  });
+  if ($("engine-logs-btn")) $("engine-logs-btn").addEventListener("click", (e) => {
+    e.preventDefault();
+    fetchEngineLogs();
+  });
+
+  if ($("task-follow-btn")) $("task-follow-btn").addEventListener("click", (e) => {
+    e.preventDefault();
+    followTaskFromInput();
+  });
+  if ($("task-cancel-btn")) $("task-cancel-btn").addEventListener("click", (e) => {
+    e.preventDefault();
+    cancelTaskFromInput();
+  });
+}
+
+function formatEta(sec) {
+  const v = Math.max(0, Number(sec || 0));
+  const h = Math.floor(v / 3600);
+  const m = Math.floor((v % 3600) / 60);
+  const s = Math.floor(v % 60);
+  if (h > 0) return `${String(h).padStart(2, "0")}:${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}`;
+  return `${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}`;
+}
+
+// --- Engine Catalog ---
+async function loadCatalog() {
+  try {
+    const [catalogData, healthData] = await Promise.all([
+      fetchJson('/v1/engine-catalog'),
+      fetchJson('/v1/health'),
+    ]);
+    renderCatalog(catalogData.engines || [], healthData.engines || {});
+  } catch (e) {
+    const el = document.getElementById('catalog-list');
+    if (el) el.innerHTML = '<p>Failed to load catalog: ' + e.message + '</p>';
+  }
+}
+
+function renderCatalog(engines, healthMap) {
+  const container = document.getElementById('catalog-list');
+  container.innerHTML = '';
+
+  // Batch action toolbar
+  const toolbar = document.createElement('div');
+  toolbar.className = 'catalog-toolbar';
+  toolbar.innerHTML =
+    '<label class="catalog-select-all"><input type="checkbox" id="catalog-select-all-cb"> Select all compatible</label>' +
+    '<button class="btn btn-xs btn-install" id="catalog-install-selected" disabled>Install Selected</button>' +
+    '<button class="btn btn-xs btn-install" id="catalog-install-all">Install All Compatible</button>';
+  container.appendChild(toolbar);
+
+  const groups = ENGINE_GROUPS;
+
+  for (const g of groups) {
+    const items = engines.filter(g.filter);
+    if (items.length === 0) continue;
+
+    const section = document.createElement('div');
+    section.className = 'catalog-group';
+    section.innerHTML = '<h3 class="provider-group-title">' + g.label + '</h3>';
+
+    for (const e of items) {
+      // Determine health from actual health API (by alias)
+      const healthy = e.installed && healthMap[e.default_alias];
+      const isLocal = e.category === 'local' || e.category === 'native';
+      const compatible = e.compatible !== false;
+
+      let statusClass, statusLabel;
+      if (!compatible) {
+        statusClass = 'dot-gray';
+        statusLabel = 'Not compatible';
+      } else if (!e.installed) {
+        statusClass = 'dot-gray';
+        statusLabel = 'Not installed';
+      } else if (healthy) {
+        statusClass = 'dot-green';
+        statusLabel = 'Healthy';
+      } else {
+        statusClass = 'dot-yellow';
+        statusLabel = 'Installed (not configured)';
+      }
+
+      // Build action buttons based on state
+      let actions = '';
+      if (!compatible) {
+        actions = '<span class="badge-incompatible">Not compatible</span>';
+      } else if (!e.installed) {
+        actions = '<button class="btn btn-xs btn-install" onclick="catalogInstall(\'' + e.name + '\')">Install</button>';
+      } else {
+        if (isLocal) {
+          actions += '<button class="btn btn-xs" onclick="engineAction(\'' + e.default_alias + '\',\'start\')">Start</button>';
+          actions += '<button class="btn btn-xs" onclick="engineAction(\'' + e.default_alias + '\',\'stop\')">Stop</button>';
+        }
+        actions += '<button class="btn btn-xs btn-danger" onclick="catalogUninstall(\'' + e.name + '\')">Uninstall</button>';
+      }
+
+      // Checkbox for batch select (only for compatible, not-installed engines)
+      const canSelect = compatible && !e.installed;
+      const checkbox = canSelect
+        ? '<input type="checkbox" class="catalog-cb" data-engine="' + e.name + '">'
+        : '<input type="checkbox" class="catalog-cb" disabled>';
+
+      const row = document.createElement('div');
+      row.className = 'provider-row' + (!compatible ? ' incompatible' : '');
+      const displayName = e.display_name || e.name;
+      const nameLink = e.installed
+        ? '<a href="#" class="engine-name-link" data-alias="' + e.default_alias + '">' + displayName + '</a>'
+        : displayName;
+      row.innerHTML =
+        '<div class="provider-info">' +
+          checkbox +
+          '<span class="dot ' + statusClass + '" title="' + statusLabel + '"></span>' +
+          '<strong>' + nameLink + '</strong>' +
+          '<span class="provider-engine">' + e.name + '</span>' +
+          '<span class="provider-detail">' + e.description + '</span>' +
+        '</div>' +
+        '<div class="provider-actions">' + actions + '</div>';
+      // Click engine name → jump to Config
+      const link = row.querySelector('.engine-name-link');
+      if (link) {
+        link.addEventListener('click', (ev) => {
+          ev.preventDefault();
+          navigateToConfig(link.dataset.alias);
+        });
+      }
+      section.appendChild(row);
+    }
+    container.appendChild(section);
+  }
+
+  // Wire up batch controls
+  const selectAllCb = document.getElementById('catalog-select-all-cb');
+  const installSelectedBtn = document.getElementById('catalog-install-selected');
+  const installAllBtn = document.getElementById('catalog-install-all');
+
+  function updateInstallSelectedBtn() {
+    const checked = container.querySelectorAll('.catalog-cb:checked');
+    installSelectedBtn.disabled = checked.length === 0;
+    installSelectedBtn.textContent = checked.length > 0
+      ? 'Install Selected (' + checked.length + ')'
+      : 'Install Selected';
+  }
+
+  container.addEventListener('change', function(ev) {
+    if (ev.target.classList.contains('catalog-cb')) {
+      updateInstallSelectedBtn();
+      // Update select-all state
+      const allCbs = container.querySelectorAll('.catalog-cb:not(:disabled)');
+      const checkedCbs = container.querySelectorAll('.catalog-cb:checked');
+      selectAllCb.checked = allCbs.length > 0 && allCbs.length === checkedCbs.length;
+      selectAllCb.indeterminate = checkedCbs.length > 0 && checkedCbs.length < allCbs.length;
+    }
+  });
+
+  if (selectAllCb) {
+    selectAllCb.addEventListener('change', function() {
+      const cbs = container.querySelectorAll('.catalog-cb:not(:disabled)');
+      cbs.forEach(cb => { cb.checked = selectAllCb.checked; });
+      updateInstallSelectedBtn();
+    });
+  }
+
+  if (installSelectedBtn) {
+    installSelectedBtn.addEventListener('click', async function() {
+      const checked = container.querySelectorAll('.catalog-cb:checked');
+      const names = Array.from(checked).map(cb => cb.dataset.engine);
+      if (names.length === 0) return;
+      await catalogBatchInstall(names);
+    });
+  }
+
+  if (installAllBtn) {
+    installAllBtn.addEventListener('click', async function() {
+      if (!confirm('Install all compatible engines?')) return;
+      await catalogBatchInstall(['all']);
+    });
+  }
+}
+
+window.catalogInstall = async function(name) {
+  try {
+    addLog(name, 'install', 'running', 'Installing...');
+    const data = await fetchJson('/v1/engine-catalog/' + name + '/install', { method: 'POST' });
+    addLog(name, 'install', 'ok', 'Installed as ' + (data.alias || name));
+    await loadCatalog();
+    await refreshDashboard();
+  } catch (e) {
+    addLog(name, 'install', 'failed', e.message);
+    alert('Install failed: ' + e.message);
+  }
+};
+
+window.catalogUninstall = async function(name) {
+  if (!confirm('Uninstall ' + name + '? This will remove it from the config.')) return;
+  try {
+    addLog(name, 'uninstall', 'running', 'Uninstalling...');
+    const data = await fetchJson('/v1/engine-catalog/' + name + '/uninstall', { method: 'POST' });
+    addLog(name, 'uninstall', 'ok', 'Removed: ' + (data.removed || []).join(', '));
+    await loadCatalog();
+    await refreshDashboard();
+  } catch (e) {
+    addLog(name, 'uninstall', 'failed', e.message);
+    alert('Uninstall failed: ' + e.message);
+  }
+};
+
+window.catalogBatchInstall = async function(names) {
+  try {
+    addLog('batch', 'install', 'running', 'Installing ' + (names[0] === 'all' ? 'all compatible engines' : names.length + ' engines') + '...');
+    const data = await fetchJson('/v1/engine-catalog/batch-install', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ engines: names }),
+    });
+    const installed = (data.results || []).map(r => r.alias).join(', ');
+    addLog('batch', 'install', 'ok', 'Installed: ' + (installed || 'none'));
+    await loadCatalog();
+    await refreshDashboard();
+  } catch (e) {
+    addLog('batch', 'install', 'failed', e.message);
+    alert('Batch install failed: ' + e.message);
+  }
+};
+
+// Navigate from Engines → Config tab with alias selected
+function navigateToConfig(alias) {
+  // Switch to config tab
+  document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
+  document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
+  document.querySelector('.tab-btn[data-tab="config"]').classList.add('active');
+  document.getElementById('tab-config').classList.add('active');
+  // Load config and select the alias
+  selectedConfigAlias = alias;
+  loadConfig();
+}
+
+// --- Logs ---
+const activityLogs = [];
+
+function addLog(engine, action, status, message) {
+  activityLogs.unshift({
+    time: new Date().toLocaleTimeString(),
+    engine, action, status, message,
+  });
+  if (activityLogs.length > 200) activityLogs.length = 200;
+  renderLogs();
+}
+
+function renderLogs() {
+  const tbody = document.getElementById('logs-table');
+  if (!tbody) return;
+  tbody.innerHTML = '';
+  for (const log of activityLogs) {
+    const statusCls = log.status === 'ok' ? 'color:var(--accent)' :
+                      log.status === 'failed' ? 'color:var(--danger)' : '';
+    const tr = document.createElement('tr');
+    tr.innerHTML = '<td>' + log.time + '</td><td>' + log.engine + '</td><td>' + log.action +
+      '</td><td style="' + statusCls + '">' + log.status + '</td><td>' + log.message + '</td>';
+    tbody.appendChild(tr);
+  }
+}
+
+function loadLogs() {
+  renderLogs();
+  // Also load engine tasks
+  fetchJson('/v1/engines/tasks?limit=50').then(data => {
+    const detail = document.getElementById('logs-detail');
+    if (detail && data.tasks && data.tasks.length) {
+      detail.textContent = data.tasks.map(t =>
+        `[${t.status}] ${t.engine || ''} ${t.action} — ${t.message || ''}`
+      ).join('\n');
+    }
+  }).catch(() => {});
+}
+
+// --- Config page (split layout) ---
+let configData = {};
+let configProvidersData = {};  // Shared credential providers
+let configHealthData = {};
+let providerTemplates = [];
+let vendorTemplates = {};
+let selectedConfigAlias = null;
+let selectedProviderName = null;  // Currently selected provider in sidebar
+
+async function loadConfig() {
+  try {
+    const [cfgRes, tplRes, healthRes, vendorRes, provRes] = await Promise.all([
+      fetch('/v1/admin/config'),
+      fetch('/v1/admin/provider-templates'),
+      fetch('/v1/health'),
+      fetch('/v1/admin/vendor-templates'),
+      fetch('/v1/admin/providers'),
+    ]);
+    const cfgJson = await cfgRes.json();
+    configData = cfgJson.engines || {};
+    configProvidersData = cfgJson.providers || {};
+    providerTemplates = (await tplRes.json()).templates || [];
+    configHealthData = (await healthRes.json()).engines || {};
+    vendorTemplates = (await vendorRes.json()).vendors || {};
+    // Merge providers from dedicated endpoint (may have more detail)
+    const provJson = await provRes.json();
+    if (provJson.providers) {
+      configProvidersData = { ...configProvidersData, ...provJson.providers };
+    }
+    renderConfigSidebar();
+    if (selectedProviderName && configProvidersData[selectedProviderName]) {
+      renderProviderDetail(selectedProviderName);
+    } else if (selectedConfigAlias && configData[selectedConfigAlias]) {
+      renderConfigDetail(selectedConfigAlias);
+    } else {
+      document.getElementById('config-detail-content').innerHTML =
+        '<p class="config-placeholder">Select a vendor or engine from the left to edit its settings.</p>';
+    }
+  } catch (e) {
+    showConfigStatus('Failed to load config: ' + e.message, true);
+  }
+}
+
+function configGroupLabel(alias, cfg) {
+  const ptype = cfg.type || 'unknown';
+  const isCloud = cfg.category === 'cloud';
+  if (ptype === 'stt') return isCloud ? 'STT — Cloud' : 'STT — Local / Native';
+  if (ptype === 'tts') return isCloud ? 'TTS — Cloud' : 'TTS — Local / Native';
+  return 'Other';
+}
+
+function renderConfigSidebar() {
+  const sidebar = document.getElementById('config-sidebar-list');
+  sidebar.innerHTML = '';
+
+  // --- Providers (shared credentials) section ---
+  const providerNames = Object.keys(configProvidersData);
+  if (providerNames.length > 0) {
+    const provSection = document.createElement('div');
+    provSection.className = 'config-sidebar-group';
+    provSection.innerHTML = '<h4>Vendors</h4>';
+    for (const name of providerNames) {
+      const vendorTpl = vendorTemplates[name] || {};
+      const displayLabel = vendorTpl.display_name || name;
+      // Count engines using this provider
+      const usedBy = Object.entries(configData)
+        .filter(([_, cfg]) => cfg.provider === name)
+        .map(([alias]) => alias);
+      const item = document.createElement('div');
+      item.className = 'config-sidebar-item' + (name === selectedProviderName ? ' active' : '');
+      item.innerHTML = `<span class="dot dot-blue"></span>${displayLabel}` +
+        (usedBy.length ? ` <span class="provider-count">(${usedBy.length})</span>` : '');
+      item.addEventListener('click', () => {
+        selectedProviderName = name;
+        selectedConfigAlias = null;
+        renderConfigSidebar();
+        renderProviderDetail(name);
+      });
+      provSection.appendChild(item);
+    }
+    sidebar.appendChild(provSection);
+  }
+
+  // --- Engine groups ---
+  const groups = {};
+  const groupOrder = ['STT — Cloud', 'STT — Local / Native', 'TTS — Cloud', 'TTS — Local / Native', 'Other'];
+  for (const [alias, cfg] of Object.entries(configData)) {
+    const g = configGroupLabel(alias, cfg);
+    if (!groups[g]) groups[g] = [];
+    groups[g].push({ alias, cfg });
+  }
+  for (const gName of groupOrder) {
+    const items = groups[gName] || [];
+    const section = document.createElement('div');
+    section.className = 'config-sidebar-group';
+    section.innerHTML = `<h4>${gName}</h4>`;
+    for (const { alias, cfg } of items) {
+      const healthy = configHealthData[alias] || false;
+      const displayLabel = cfg.display_name || alias;
+      const item = document.createElement('div');
+      item.className = 'config-sidebar-item' + (alias === selectedConfigAlias ? ' active' : '');
+      item.innerHTML = `<span class="dot ${healthy ? 'dot-green' : 'dot-red'}"></span>${displayLabel}`;
+      item.addEventListener('click', () => {
+        selectedConfigAlias = alias;
+        selectedProviderName = null;
+        renderConfigSidebar();
+        renderConfigDetail(alias);
+      });
+      section.appendChild(item);
+    }
+    sidebar.appendChild(section);
+  }
+}
+
+function renderProviderDetail(name) {
+  const creds = configProvidersData[name] || {};
+  const vendorTpl = vendorTemplates[name] || {};
+  const displayLabel = vendorTpl.display_name || name;
+  const sharedFields = vendorTpl.shared_fields || {};
+
+  // Find engines using this provider
+  const usedBy = Object.entries(configData)
+    .filter(([_, cfg]) => cfg.provider === name)
+    .map(([alias]) => alias);
+
+  const detail = document.getElementById('config-detail-content');
+  let fieldsHtml = '';
+
+  // Render fields from vendor template
+  const allKeys = new Set([...Object.keys(sharedFields), ...Object.keys(creds)]);
+  for (const k of allKeys) {
+    const fieldDef = sharedFields[k] || {};
+    const isSecret = fieldDef.secret || k.includes('key') || k.includes('secret') || k.includes('token');
+    const val = creds[k] !== undefined ? creds[k] : (fieldDef.default || '');
+    const desc = fieldDef.description || k;
+    const required = fieldDef.required ? ' *' : '';
+    fieldsHtml += `<label>${desc}${required}
+      <input data-provider="${name}" data-field="${k}" value="${val}"
+             type="${isSecret ? 'password' : 'text'}"
+             placeholder="${fieldDef.default || ''}"
+             autocomplete="off" />
+    </label>`;
+  }
+
+  detail.innerHTML = `
+    <div class="config-detail-head">
+      <h3>${displayLabel} <span class="badge provider">Vendor</span></h3>
+      <button class="btn btn-danger btn-xs" onclick="removeConfigProvider('${name}')">Remove</button>
+    </div>
+    <div class="config-fields">
+      ${fieldsHtml}
+    </div>
+    ${usedBy.length ? `<div class="provider-used-by"><strong>Used by:</strong> ${usedBy.join(', ')}</div>` : ''}
+    <div style="margin-top:12px">
+      <button class="btn" onclick="saveProviderCredentials('${name}')">Save Vendor</button>
+    </div>
+  `;
+}
+
+window.saveProviderCredentials = async function(name) {
+  const fields = document.querySelectorAll(`[data-provider="${name}"][data-field]`);
+  const creds = {};
+  fields.forEach(el => {
+    const val = el.value;
+    // Preserve masked values
+    if (val.includes('****')) {
+      const oldVal = configProvidersData[name] ? configProvidersData[name][el.dataset.field] : val;
+      creds[el.dataset.field] = oldVal || val;
+    } else {
+      creds[el.dataset.field] = val;
+    }
+  });
+
+  try {
+    // Get raw config to resolve masked values
+    const rawRes = await fetch('/v1/admin/config/raw');
+    const rawConfig = await rawRes.json();
+    const rawProviders = rawConfig.providers || {};
+    const rawCreds = rawProviders[name] || {};
+
+    // Replace masked values with raw ones
+    for (const [k, v] of Object.entries(creds)) {
+      if (typeof v === 'string' && v.includes('****') && rawCreds[k]) {
+        creds[k] = rawCreds[k];
+      }
+    }
+
+    // Update providers section
+    const allProviders = { ...rawProviders, [name]: creds };
+    const res = await fetch('/v1/admin/providers', {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ providers: allProviders }),
+    });
+    const data = await res.json();
+    if (res.ok) {
+      showConfigStatus('Vendor saved!', false);
+      await loadConfig();
+    } else {
+      showConfigStatus('Save failed: ' + (data.detail || 'unknown error'), true);
+    }
+  } catch (e) {
+    showConfigStatus('Save error: ' + e.message, true);
+  }
+};
+
+window.removeConfigProvider = function(name) {
+  delete configProvidersData[name];
+  if (selectedProviderName === name) {
+    selectedProviderName = null;
+    document.getElementById('config-detail-content').innerHTML =
+      '<p class="config-placeholder">Vendor removed. Save & Apply to persist.</p>';
+  }
+  renderConfigSidebar();
+};
+
+function renderSettingField(alias, k, v, fieldOptions) {
+  const rawKey = k.replace(/^default_/, '');
+  const label = 'Default ' + rawKey.replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
+  const opts = fieldOptions[k];
+  if (opts && opts.length > 0) {
+    // Render as select with auto option + provider options
+    const currentVal = String(v);
+    const autoSelected = !currentVal ? 'selected' : '';
+    const hasCustom = currentVal && !opts.map(String).includes(currentVal);
+    return `<label>${label}
+      <select data-alias="${alias}" data-setting="${k}">
+        <option value="" ${autoSelected}>(auto)</option>
+        ${hasCustom ? `<option value="${currentVal}" selected>${currentVal} (custom)</option>` : ''}
+        ${opts.map(o => `<option value="${o}" ${String(o) === currentVal ? 'selected' : ''}>${o}</option>`).join('')}
+      </select>
+    </label>`;
+  }
+  // Render as input
+  const isSecret = k.includes('key') || k.includes('secret') || k.includes('token');
+  return `<label>${label}
+    <input data-alias="${alias}" data-setting="${k}" value="${v}"
+           type="${typeof v === 'number' ? 'number' : 'text'}"
+           ${isSecret ? 'autocomplete="off"' : ''} />
+  </label>`;
+}
+
+function renderConfigDetail(alias) {
+  const cfg = configData[alias];
+  if (!cfg) return;
+  const tpl = providerTemplates.find(t => t.provider === (cfg.provider_key || cfg.provider));
+  const ptype = cfg.type || (tpl ? tpl.type : 'unknown');
+  const displayLabel = cfg.display_name || (tpl && tpl.display_name) || alias;
+  const fieldOptions = (tpl && tpl.field_options) ? tpl.field_options : {};
+  const execModes = cfg.category === 'cloud'
+    ? ['remote']
+    : ['in_process', 'local', 'subprocess'];
+  const detail = document.getElementById('config-detail-content');
+  detail.innerHTML = `
+    <div class="config-detail-head">
+      <h3>${displayLabel} <span class="badge ${ptype}">${ptype} / ${alias}</span></h3>
+      <button class="btn btn-danger btn-xs" onclick="removeProvider('${alias}')">Remove</button>
+    </div>
+    <div class="config-fields">
+      <label>exec_mode
+        <select data-alias="${alias}" data-key="exec_mode">
+          ${execModes.map(m =>
+            `<option value="${m}" ${cfg.exec_mode === m ? 'selected' : ''}>${m}</option>`
+          ).join('')}
+        </select>
+      </label>
+      ${Object.entries(cfg.settings || {}).map(([k, v]) =>
+        renderSettingField(alias, k, v, fieldOptions)
+      ).join('')}
+    </div>
+  `;
+
+  // For TTS engines: load voice list from API and upgrade default_voice to select
+  if (ptype === 'tts') {
+    _loadConfigVoiceOptions(alias, cfg);
+  }
+}
+
+async function _loadConfigVoiceOptions(alias, cfg) {
+  const voiceKey = cfg.settings && 'default_voice' in cfg.settings ? 'default_voice'
+    : cfg.settings && 'voice' in cfg.settings ? 'voice' : null;
+  if (!voiceKey) return;
+  // Check if already rendered as select (has field_options)
+  const existing = document.querySelector(`select[data-alias="${alias}"][data-setting="${voiceKey}"]`);
+  if (existing) return;
+  try {
+    const data = await fetchJson(`/v1/tts/${alias}/voices`);
+    const voices = data.voices || [];
+    if (voices.length === 0) return;
+    const input = document.querySelector(`input[data-alias="${alias}"][data-setting="${voiceKey}"]`);
+    if (!input) return;
+    const currentVal = input.value;
+    const label = input.closest('label');
+    const select = document.createElement('select');
+    select.dataset.alias = alias;
+    select.dataset.setting = voiceKey;
+    // Add (auto) option
+    const autoOpt = document.createElement('option');
+    autoOpt.value = '';
+    autoOpt.textContent = '(auto)';
+    if (!currentVal) autoOpt.selected = true;
+    select.appendChild(autoOpt);
+    // Group voices
+    const groups = {};
+    for (const v of voices) {
+      const g = v.group || '';
+      if (!groups[g]) groups[g] = [];
+      groups[g].push(v);
+    }
+    for (const [gName, gVoices] of Object.entries(groups)) {
+      const optgroup = document.createElement('optgroup');
+      optgroup.label = gName || 'Default';
+      for (const v of gVoices) {
+        const opt = document.createElement('option');
+        opt.value = v.name;
+        opt.textContent = v.name;
+        if (v.name === currentVal) opt.selected = true;
+        optgroup.appendChild(opt);
+      }
+      select.appendChild(optgroup);
+    }
+    input.replaceWith(select);
+  } catch (_) {}
+}
+
+function collectConfigForAlias(alias) {
+  const cfg = configData[alias];
+  if (!cfg) return null;
+  const entry = { provider: cfg.provider, exec_mode: cfg.exec_mode, settings: { ...cfg.settings } };
+  const modeSelect = document.querySelector(`select[data-alias="${alias}"][data-key="exec_mode"]`);
+  if (modeSelect) entry.exec_mode = modeSelect.value;
+  // Collect from both <input> and <select> elements with data-setting
+  document.querySelectorAll(`[data-alias="${alias}"][data-setting]`).forEach(el => {
+    const key = el.dataset.setting;
+    let val = el.value;
+    if (typeof cfg.settings[key] === 'number') val = Number(val);
+    if (typeof cfg.settings[key] === 'boolean') val = val === 'true';
+    entry.settings[key] = val;
+  });
+  return entry;
+}
+
+function collectConfig() {
+  // Collect currently-editing alias from DOM, rest from configData
+  const engines = {};
+  for (const [alias, cfg] of Object.entries(configData)) {
+    if (alias === selectedConfigAlias) {
+      const edited = collectConfigForAlias(alias);
+      if (edited) { engines[alias] = edited; continue; }
+    }
+    engines[alias] = { provider: cfg.provider, exec_mode: cfg.exec_mode, settings: { ...cfg.settings } };
+  }
+  return engines;
+}
+
+window.removeProvider = function(alias) {
+  delete configData[alias];
+  if (selectedConfigAlias === alias) {
+    selectedConfigAlias = null;
+    document.getElementById('config-detail-content').innerHTML =
+      '<p class="config-placeholder">Engine removed. Select another or Save & Apply.</p>';
+  }
+  renderConfigSidebar();
+};
+
+function showConfigStatus(msg, isError) {
+  const el = document.getElementById('config-status');
+  el.style.display = 'block';
+  el.textContent = msg;
+  el.style.color = isError ? 'var(--danger)' : 'var(--accent)';
+  setTimeout(() => { el.style.display = 'none'; }, 5000);
+}
+
+window.closeAddDialog = function() {
+  document.getElementById('config-add-dialog').classList.remove('visible');
+};
+
+window.confirmAddProvider = function() {
+  const vendorName = document.getElementById('config-add-template').value;
+  if (!vendorName) { alert('Please select a vendor'); return; }
+  if (configProvidersData[vendorName]) { alert('Vendor already configured'); return; }
+  // Initialize empty credentials from vendor template
+  const vendorTpl = vendorTemplates[vendorName] || {};
+  const creds = {};
+  for (const [k, def] of Object.entries(vendorTpl.shared_fields || {})) {
+    creds[k] = def.default || '';
+  }
+  configProvidersData[vendorName] = creds;
+  selectedProviderName = vendorName;
+  selectedConfigAlias = null;
+  renderConfigSidebar();
+  renderProviderDetail(vendorName);
+  closeAddDialog();
+};
+
+function bindConfigEvents() {
+  document.getElementById('config-save-btn').addEventListener('click', async () => {
+    try {
+      const rawRes = await fetch('/v1/admin/config/raw');
+      const rawConfig = await rawRes.json();
+      const rawEngines = rawConfig.engines || rawConfig.providers || {};
+      const rawProviders = rawConfig.providers || {};
+
+      const updates = collectConfig();
+      for (const [alias, entry] of Object.entries(updates)) {
+        const rawEntry = rawEngines[alias];
+        if (!rawEntry) continue;
+        const rawSettings = rawEntry.settings || {};
+        for (const [k, v] of Object.entries(entry.settings)) {
+          if (typeof v === 'string' && v.includes('****')) {
+            entry.settings[k] = rawSettings[k] || v;
+          }
+        }
+      }
+      const providersResolved = JSON.parse(JSON.stringify(configProvidersData || {}));
+      for (const [pname, creds] of Object.entries(providersResolved)) {
+        const rawCreds = rawProviders[pname] || {};
+        if (!creds || typeof creds !== 'object') continue;
+        for (const [k, v] of Object.entries(creds)) {
+          if (typeof v === 'string' && v.includes('****')) {
+            providersResolved[pname][k] = rawCreds[k] || v;
+          }
+        }
+      }
+
+      const res = await fetch('/v1/admin/config', {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ engines: updates, providers: providersResolved }),
+      });
+      const data = await res.json();
+      if (res.ok) {
+        const r = data.reload || {};
+        showConfigStatus(
+          `Saved! Added: ${(r.added||[]).length}, Updated: ${(r.updated||[]).length}, Removed: ${(r.removed||[]).length}`,
+          false
+        );
+        await loadConfig();
+      } else {
+        showConfigStatus('Save failed: ' + (data.detail || 'unknown error'), true);
+      }
+    } catch (e) {
+      showConfigStatus('Save error: ' + e.message, true);
+    }
+  });
+
+  document.getElementById('config-add-btn').addEventListener('click', () => {
+    const dialog = document.getElementById('config-add-dialog');
+    const select = document.getElementById('config-add-template');
+    // Show vendors not yet configured
+    const availableVendors = Object.entries(vendorTemplates)
+      .filter(([name]) => !configProvidersData[name]);
+    if (availableVendors.length === 0) {
+      alert('All vendors are already configured.');
+      return;
+    }
+    select.innerHTML = availableVendors.map(([name, tpl]) =>
+      `<option value="${name}">${tpl.display_name || name}</option>`
+    ).join('');
+    dialog.classList.add('visible');
+  });
+}
+
+async function init() {
+  // --- Tab switching ---
+  document.querySelectorAll('.tab-btn').forEach(btn => {
+    btn.addEventListener('click', () => {
+      document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
+      document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
+      btn.classList.add('active');
+      const tab = document.getElementById('tab-' + btn.dataset.tab);
+      if (tab) tab.classList.add('active');
+      if (btn.dataset.tab === 'config') loadConfig();
+      if (btn.dataset.tab === 'engines') loadCatalog();
+      if (btn.dataset.tab === 'dashboard') refreshDashboard();
+      if (btn.dataset.tab === 'logs') loadLogs();
+    });
+  });
+
+  bindEvents();
+  bindConfigEvents();
+  const catalogRefreshBtn = document.getElementById('catalog-refresh');
+  if (catalogRefreshBtn) catalogRefreshBtn.addEventListener('click', loadCatalog);
+  const logsRefreshBtn = document.getElementById('logs-refresh');
+  if (logsRefreshBtn) logsRefreshBtn.addEventListener('click', loadLogs);
+  const logsClearBtn = document.getElementById('logs-clear');
+  if (logsClearBtn) logsClearBtn.addEventListener('click', () => { activityLogs.length = 0; renderLogs(); $('logs-detail').textContent = ''; });
+  const labLogClearBtn = document.getElementById('lab-log-clear');
+  if (labLogClearBtn) labLogClearBtn.addEventListener('click', labLogClear);
+  window.addEventListener("beforeunload", () => {
+    if (state.sttLive) {
+      stopLiveSTT().catch(() => {});
+    }
+  });
+  updateSTTModeUI();
+  await refreshDashboard();
+  await fetchEngineStatus();
+}
+
+init().catch((err) => setOutput(`Init failed: ${err.message}`));