sagadeck 1.6.0 → 1.7.1

package/src/runtime/skins/aluminio.css

@@ -1,4 +1,4 @@
-/* Alumínio (lançamento de iPhone e iPad, 2020-2021): prata metálico com brilho de luz de estúdio, alumínio escovado,
+/* Alumínio (lançamento de aparelho premium): prata metálico com brilho de luz de estúdio, alumínio escovado,
    títulos cromados (a cor continua sólida em "color": o fiscal mede o contraste por ela), cartões de metal com
    chanfro de luz; capa com o título embaixo à esquerda e um disco de metal polido à direita; o escuro é grafite */
 /* o metal sai das cores do tom (--bg, --fg, --surface): com uma paleta por cima, ele acompanha */

package/src/runtime/skins/prata.css

@@ -1,4 +1,4 @@
-/* Prata (Keynote): nada de enfeite; muito respiro, tudo centralizado, título contido, número da seção discreto */
+/* Prata: nada de enfeite; muito respiro, tudo centralizado, título contido, número da seção discreto */
 .th-prata .L-cover:not(:has(.cv-fig)) .cv-main,.th-prata .L-end:not(:has(.en-fig)) .en-main{align-items:center;text-align:center;gap:28px}
 .th-prata :is(.L-cover,.L-end) .ttl{max-width:1300px}
 .th-prata .kicker{color:var(--muted);letter-spacing:.02em}

package/src/studio/api-routes.js

@@ -54,10 +54,21 @@ export async function apiRoutes({ req, res, pathname, url, W, apiEnv, rtSessions
     const exists = fs.existsSync(apiEnv.file);
     return reply(200, { file: apiEnv.file, exists, text: exists ? fs.readFileSync(apiEnv.file, "utf8") : AMBIENTES_MODELO, builtin: Object.keys(apiEnv.builtin) });
   }
+  // tela Ambientes por campos: o mesmo arquivo como formulário (o valor de segredo nunca vem)
+  if (pathname === "/api/http/ambientes/form" && req.method === "GET") {
+    try { return reply(200, apiEnv.formState()); } catch (e) { return reply(400, { error: `${apiEnv.file}: ${e.message}` }); }
+  }
   if (req.method !== "POST") return reply(405, { error: "use POST" });
   if (!/^application\/json/i.test(req.headers["content-type"] || "")) return reply(415, { error: "envie JSON" });
   let body;
   try { body = await readJSON(req); } catch (e) { return reply(400, { error: e.message }); }
+  if (pathname === "/api/http/ambientes/form") {
+    if (fs.existsSync(apiEnv.file)) { fs.copyFileSync(apiEnv.file, `${apiEnv.file}.bak`); fs.chmodSync(`${apiEnv.file}.bak`, 0o600); }
+    try { return reply(200, apiEnv.saveForm(body.envs, { current: body.current })); } catch (e) { return reply(400, { error: e.message }); }
+  }
+  if (pathname === "/api/http/ambientes/testar") {
+    try { return reply(200, await apiEnv.check(String(body.name || ""))); } catch (e) { return reply(400, { error: e.message }); }
+  }
   if (pathname === "/api/http/ambientes" || pathname === "/api/http/ambientes/validar") {
     const text = String(body.text ?? "");
     let data;

package/src/studio/banner.js

@@ -7,7 +7,7 @@ const providerName = (ai) => Object.values(PROVIDERS).find((p) => p.url === ai.u
 
 export function studioBanner({ version, url, library, ai = null, multiuser = false, usersDir = "", pid = process.pid, isLibrary = true }) {
   const iaLine = !ai || !(ai.url || ai.adaptador)
-    ? "  IA: não configurada. No Studio, clique em IA desligada (ou Configurar IA na biblioteca) e informe provedor e chave."
+    ? (ai?.problem ? `  IA: não configurada. ${ai.problem}` : "  IA: não configurada. No Studio, clique em IA desligada (ou Configurar IA na biblioteca) e informe provedor e chave.")
     : `  IA: ${providerName(ai)} · texto ${ai.textModel}${ai.source === "variável" ? " (pelas variáveis SAGADECK_LLM_*)" : ""}`;
   return [
     `✓ SagaDeck Studio ${version} pronto. Abra no navegador: ${url}${isLibrary ? "  (biblioteca)" : ""}`,

package/src/studio/ia-routes.js

@@ -1,6 +1,6 @@
 // Tela "Configurar IA" do Studio: ler (a chave nunca sai inteira), salvar e testar a configuração da IA desta máquina
 // (src/ai/ia-config.js). No multiusuário quem configura é quem administra o servidor (arquivo ou variáveis), não a tela.
-import { PROVIDERS, ROLES, iaFile, loadIA, saveIA, maskedIA, keyOf } from "../ai/ia-config.js";
+import { PROVIDERS, ROLES, RECOMMENDED, iaFile, loadIA, saveIA, maskedIA, keyOf } from "../ai/ia-config.js";
 import { chat, llmConfig, llmAvailable } from "../ai/llm.js";
 
 const json = (res, status, data) => { res.writeHead(status, { "Content-Type": "application/json", "Cache-Control": "no-store" }); res.end(JSON.stringify(data)); };
@@ -23,7 +23,10 @@ function draft(body, current) {
 export async function iaRoutes({ req, res, pathname, opts, readJSON }) {
   if (pathname === "/api/ia" && req.method === "GET") {
     const cfg = llmConfig();
-    json(res, 200, { config: maskedIA(loadIA()), file: iaFile(), source: cfg.source, providers: PROVIDERS, roles: ROLES, editable: !opts.multiuser });
+    // no servidor, quem usa o portal não configura: só fica sabendo se a IA está configurada (provedor, endereço,
+    // modelos e o final da chave são de quem administra)
+    if (opts.multiuser) { json(res, 200, { editable: false, configured: !!(cfg.url || cfg.adaptador) }); return true; }
+    json(res, 200, { config: maskedIA(loadIA()), file: iaFile(), source: cfg.source, configured: !!(cfg.url || cfg.adaptador), problem: cfg.problem || "", providers: PROVIDERS, roles: ROLES, recommended: RECOMMENDED, editable: !opts.multiuser });
     return true;
   }
   if ((pathname === "/api/ia" || pathname === "/api/ia/test") && req.method === "POST") {

package/src/studio/open-browser.js

@@ -0,0 +1,17 @@
+// `sagadeck studio` abre o navegador na página certa: quem acabou de instalar não precisa achar o endereço no meio do
+// que o terminal escreveu. Só quando faz sentido: alguém no terminal (não um serviço, não um teste, não a CI), sem
+// servidor multiusuário e sem --sem-navegador / SAGADECK_NO_BROWSER=1.
+import { spawn } from "node:child_process";
+
+export function shouldOpenBrowser({ flags = {}, env = process.env, isTTY = process.stdout.isTTY, multiuser = false, platform = process.platform } = {}) {
+  if (flags["sem-navegador"] || flags["no-browser"] || env.SAGADECK_NO_BROWSER === "1") return false;
+  if (multiuser || env.CI || !isTTY) return false;
+  if (platform === "linux" && !env.DISPLAY && !env.WAYLAND_DISPLAY) return false; // servidor sem tela
+  return true;
+}
+
+export function openBrowser(url, { platform = process.platform, spawnFn = spawn } = {}) {
+  const [cmd, args] = platform === "win32" ? ["cmd", ["/c", "start", "", url]] : platform === "darwin" ? ["open", [url]] : ["xdg-open", [url]];
+  try { const child = spawnFn(cmd, args, { stdio: "ignore", detached: true, windowsHide: true }); child.on?.("error", () => {}); child.unref?.(); return true; }
+  catch { return false; }
+}

package/src/studio/public/ai-settings.js

@@ -6,6 +6,7 @@ window.SagaAISettings = (() => {
 .ai-cfg label{display:block;margin:10px 0 3px;font-weight:600;font-size:12px}.ai-cfg input,.ai-cfg select{width:100%;box-sizing:border-box;padding:7px 9px;border:1px solid var(--border,#c9ced6);border-radius:8px;background:var(--bg,#fff);color:inherit;font:inherit}
 .ai-cfg .grid{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}.ai-cfg small{color:var(--text-3,#777);font-size:12px}.ai-cfg .warn{background:#fef3c7;color:#78350f;border-radius:8px;padding:8px 10px}
 .ai-cfg .row{display:flex;gap:8px;justify-content:flex-end;margin-top:16px;flex-wrap:wrap}.ai-cfg button{padding:7px 14px;border-radius:8px;border:1px solid var(--border,#c9ced6);background:transparent;color:inherit;cursor:pointer;font:inherit}
+.ai-cfg .rec{background:var(--selected,#eef);border-radius:8px;padding:8px 10px;margin:6px 0 4px}.ai-cfg .rec button{margin-top:6px;display:block}
 .ai-cfg button.primary{background:var(--brand,#5b4bdb);border-color:var(--brand,#5b4bdb);color:#fff}.ai-cfg [data-status]{margin-top:10px;min-height:1.4em}.ai-cfg [data-status].ok{color:#15803d}.ai-cfg [data-status].err{color:#b91c1c}`;
   const LABEL = { text: "Modelo de texto", vision: "Modelo que vê imagens", image: "Modelo de imagem", search: "Modelo de busca na web" };
   const HINT = { text: "obrigatório", vision: "opcional; vazio = o de texto", image: "opcional; para gerar ilustrações", search: "opcional; no OpenRouter, um modelo :online" };
@@ -20,6 +21,15 @@ window.SagaAISettings = (() => {
     document.body.append(dialog);
   }
 
+  // no servidor (multiusuário) a configuração é de quem administra e não vem para a página: só se está ligada
+  function serverNotice() {
+    dialog.innerHTML = `<h2>Configurar IA</h2>
+      <p>Neste servidor, quem configura a IA é quem administra.</p>
+      <p>${info.configured ? "A IA está configurada." : "A IA não está configurada. Avise quem administra o servidor."}</p>
+      <div class="row"><button type="button" data-close>Fechar</button></div>`;
+    dialog.querySelector("[data-close]").onclick = () => dialog.close();
+  }
+
   function form() {
     const c = info.config || {}, providers = info.providers || {};
     const provider = c.provider && (providers[c.provider] || c.provider === "outro") ? c.provider : (c.url ? "outro" : "openrouter");
@@ -27,13 +37,16 @@ window.SagaAISettings = (() => {
       <p>O sagadeck fala direto com o provedor que você escolher. A chave fica só nesta máquina, em <code>${esc(info.file)}</code>.</p>
       ${info.source === "variável" ? '<p class="warn">As variáveis SAGADECK_LLM_URL / SAGADECK_LLM_KEY estão definidas e valem por cima desta tela.</p>' : ""}
       ${info.editable ? "" : '<p class="warn">Neste servidor, quem configura a IA é quem administra.</p>'}
+      ${info.problem ? `<p class="warn" data-problem>${esc(info.problem)}</p>` : ""}
+      ${info.recommended ? `<div class="rec"><b>Recomendado para começar:</b> ${esc(providers[info.recommended.provider]?.label || info.recommended.provider)}, com ${esc(info.recommended.models.text)} (texto e visão), ${esc(info.recommended.models.image)} (imagem) e ${esc(info.recommended.models.search)} (busca). Se a IA não responder nem com isso, o problema é a rede ou a chave, não o modelo. Depois, troque pelo modelo que quiser. <button type="button" data-rec>Usar a recomendação</button></div>` : ""}
       <label for="ai-cfg-provider">Provedor</label>
       <select id="ai-cfg-provider" data-f="provider">${Object.entries(providers).map(([k, p]) => `<option value="${k}">${esc(p.label)}</option>`).join("")}<option value="outro">Outro compatível com a API da OpenAI</option></select>
       <label for="ai-cfg-url">Endereço da API</label>
       <input id="ai-cfg-url" data-f="url" placeholder="https://…/v1" spellcheck="false">
       <label for="ai-cfg-key">Chave</label>
       <input id="ai-cfg-key" data-f="key" type="password" autocomplete="off" spellcheck="false" placeholder="${c.keySet ? `configurada (${esc(c.keyHint)}${c.keyFrom === "variável" ? `, da variável ${esc(c.keyEnv)}` : ""}); em branco mantém` : "cole a chave do provedor"}">
-      <div class="grid">${(info.roles || []).map((r) => `<div><label for="ai-cfg-${r}">${LABEL[r] || r}</label><input id="ai-cfg-${r}" data-model="${r}" value="${esc(c.models?.[r])}" spellcheck="false"><small>${HINT[r] || ""}</small></div>`).join("")}</div>
+      <div class="grid">${(info.roles || []).map((r) => `<div><label for="ai-cfg-${r}">${LABEL[r] || r}</label><input id="ai-cfg-${r}" data-model="${r}" value="${esc(c.models?.[r])}" placeholder="${info.recommended?.models?.[r] ? `ex.: ${esc(info.recommended.models[r])}` : ""}" spellcheck="false"><small>${HINT[r] || ""}</small></div>`).join("")}</div>
+      <p><small>Texto e visão funcionam em qualquer provedor compatível com a API da OpenAI. Gerar imagem e buscar na web dependem do provedor: funcionam no OpenRouter com modelos de imagem e modelos <code>:online</code>; em outros, a pesquisa usa buscadores diretos e a imagem pode não sair.</small></p>
       <div data-status role="status"></div>
       <div class="row"><button type="button" data-close>Fechar</button><button type="button" data-test>Testar</button><button type="button" class="primary" data-save>Salvar</button></div>`;
     const sel = dialog.querySelector('[data-f="provider"]'), url = dialog.querySelector('[data-f="url"]');
@@ -44,6 +57,13 @@ window.SagaAISettings = (() => {
     sel.onchange = sync;
     if (!info.editable) dialog.querySelectorAll("input,select,[data-save],[data-test]").forEach((el) => (el.disabled = true));
     dialog.querySelector("[data-close]").onclick = () => dialog.close();
+    const rec = dialog.querySelector("[data-rec]");
+    if (rec) rec.onclick = () => {
+      sel.value = info.recommended.provider; sync();
+      for (const [r, m] of Object.entries(info.recommended.models)) { const el = dialog.querySelector(`[data-model="${r}"]`); if (el) el.value = m; }
+      const st = dialog.querySelector("[data-status]"); st.className = ""; st.textContent = info.config?.keySet ? "Preenchido. Clique em Testar." : "Preenchido. Cole a chave do OpenRouter e clique em Testar.";
+      dialog.querySelector('[data-f="key"]').focus();
+    };
     dialog.querySelector("[data-test]").onclick = () => submit("api/ia/test");
     dialog.querySelector("[data-save]").onclick = () => submit("api/ia");
   }
@@ -69,7 +89,7 @@ window.SagaAISettings = (() => {
       onSaved = typeof saved === "function" ? saved : () => {};
       if (!dialog) build();
       info = await (await fetch("api/ia")).json();
-      form();
+      if (info.editable) form(); else serverNotice();
       if (!dialog.open) dialog.showModal();
     },
   };

package/src/studio/public/api-envs-form.js

@@ -0,0 +1,148 @@
+// Ambientes dos slides de API por campos: quem instala do zero preenche endereço, variáveis, segredos e autenticação
+// sem escrever YAML (o arquivo é o mesmo, ~/.sagadeck/ambientes.yaml; a aba "Como texto" continua para quem prefere).
+// Segredo digitado vai cifrado para o arquivo e nunca volta para a página. No servidor multiusuário (ou Studio aberto
+// para a rede) os slides de API não executam: o botão Ambientes nem aparece.
+window.SagaApiEnvsForm = (() => {
+  const $ = (id) => document.getElementById(id);
+  const esc = (s) => String(s ?? "").replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[c]);
+  const svg = (n) => `<i class="ic" data-ic="${n}"><svg viewBox="0 0 24 24" aria-hidden="true">${(window.UI_ICONS || {})[n] || ""}</svg></i>`;
+  let st = null, tab = "form";
+  const status = (text, kind = "") => { const el = $("api-envs-status"); if (el) { el.textContent = text; el.className = `sf-hint api-envs-status ${kind}`; } };
+
+  // sem execução neste Studio (multiusuário, aberto para a rede): o botão some
+  fetch("api/http/state").then((r) => r.json()).then((s) => { if (s && s.live === false) $("btn-api-envs")?.setAttribute("hidden", ""); }).catch(() => {});
+
+  const row = (kind, item = {}) => kind === "var"
+    ? `<div class="aef-row" data-row="var"><input data-k="name" placeholder="nome (ex.: modelo)" value="${esc(item.name)}" spellcheck="false" aria-label="Nome da variável"><input data-k="value" placeholder="valor" value="${esc(item.value)}" spellcheck="false" aria-label="Valor da variável"><button type="button" class="icon-btn" data-del title="Tirar">${svg("x")}</button></div>`
+    : `<div class="aef-row" data-row="secret"><input data-k="name" placeholder="nome (ex.: senha)" value="${esc(item.name)}" spellcheck="false" aria-label="Nome do segredo"><input data-k="value" type="password" autocomplete="off" placeholder="${item.set ? "guardado; em branco mantém" : "valor (guardado cifrado)"}" aria-label="Valor do segredo"><input data-k="env" placeholder="ou variável de ambiente" value="${esc(item.env)}" spellcheck="false" aria-label="Variável de ambiente do segredo"><button type="button" class="icon-btn" data-del title="Tirar">${svg("x")}</button></div>`;
+
+  function card(e, current) {
+    const a = e.auth || { type: "nenhuma" };
+    return `<section class="aef-env" data-env>
+      <div class="aef-head"><input data-k="envname" value="${esc(e.name)}" placeholder="nome (dev, hom, prod)" spellcheck="false" aria-label="Nome do ambiente">
+        <label class="aef-cur"><input type="radio" name="aef-current" ${e.name === current ? "checked" : ""}> em uso</label>
+        <button type="button" class="btn btn-secondary btn-sm" data-test>Testar</button>
+        <button type="button" class="icon-btn" data-remove title="Tirar este ambiente">${svg("trash-2")}</button></div>
+      <label>Endereço base <small>vira <code>{{base}}</code> nos slides</small></label>
+      <input data-k="base" value="${esc(e.base)}" placeholder="https://api.exemplo.com/v1" spellcheck="false">
+      <label>Variáveis <small><code>{{nome}}</code> nos slides</small></label>
+      <div data-list="var">${(e.vars || []).map((v) => row("var", v)).join("")}</div>
+      <button type="button" class="btn-link" data-add="var">+ variável</button>
+      <label>Segredos <small><code>{{secret.nome}}</code> nos slides; nunca vão para o deck</small></label>
+      <div data-list="secret">${(e.secrets || []).map((v) => row("secret", v)).join("")}</div>
+      <button type="button" class="btn-link" data-add="secret">+ segredo</button>
+      <label>Autenticação</label>
+      <select data-k="auth"><option value="nenhuma">Nenhuma</option><option value="bearer">Token fixo (Authorization: Bearer)</option><option value="token">Token que expira (client credentials)</option></select>
+      <div class="aef-auth" data-auth="bearer"><input data-k="bearer" type="password" autocomplete="off" placeholder="${a.type === "bearer" && a.secretSet ? "token guardado; em branco mantém" : "o token"}" aria-label="Token fixo"><input data-k="bearerEnv" placeholder="ou variável de ambiente" value="${esc(a.type === "bearer" ? a.secretEnv : "")}" spellcheck="false" aria-label="Variável do token"></div>
+      <div class="aef-auth" data-auth="token"><input data-k="tokenUrl" placeholder="endereço do token (https://…/token)" value="${esc(a.url)}" spellcheck="false" aria-label="Endereço do token"><input data-k="clientId" placeholder="client id" value="${esc(a.client_id)}" spellcheck="false" aria-label="Client id"><input data-k="clientSecret" type="password" autocomplete="off" placeholder="${a.type === "token" && a.secretSet ? "client secret guardado; em branco mantém" : "client secret"}" aria-label="Client secret"><input data-k="clientSecretEnv" placeholder="ou variável de ambiente do secret" value="${esc(a.type === "token" ? a.secretEnv : "")}" spellcheck="false" aria-label="Variável do client secret"><input data-k="field" placeholder="campo do token na resposta (access_token)" value="${esc(a.field)}" spellcheck="false" aria-label="Campo do token"></div>
+      ${e.advanced ? '<p class="muted aef-note">Este ambiente tem configurações avançadas (certificado, outros cabeçalhos); elas ficam como estão. Veja na aba Como texto.</p>' : ""}
+      <div class="aef-result" data-result></div>
+    </section>`;
+  }
+
+  function wire(root) {
+    root.querySelectorAll("[data-env]").forEach((sec) => {
+      const sel = sec.querySelector('[data-k="auth"]');
+      const show = () => sec.querySelectorAll("[data-auth]").forEach((d) => { d.hidden = d.dataset.auth !== sel.value; });
+      sel.onchange = show;
+      sec.querySelector("[data-remove]").onclick = () => { sec.remove(); empty(); };
+      sec.querySelector("[data-test]").onclick = () => test(sec);
+      sec.querySelectorAll("[data-add]").forEach((b) => (b.onclick = () => { sec.querySelector(`[data-list="${b.dataset.add}"]`).insertAdjacentHTML("beforeend", row(b.dataset.add)); wireRows(sec); }));
+      wireRows(sec);
+      show();
+    });
+  }
+  const wireRows = (sec) => sec.querySelectorAll("[data-del]").forEach((b) => (b.onclick = () => b.closest(".aef-row").remove()));
+  function empty() {
+    const intro = $("api-envs-form").querySelector("[data-intro]");
+    if (intro) intro.hidden = !!$("api-envs-form").querySelector("[data-env]");
+  }
+
+  function render() {
+    const box = $("api-envs-form");
+    box.innerHTML = `<div class="aef-intro" data-intro><p><b>Você ainda não tem ambientes seus.</b> O <b>ENSAIO</b> (uma API de mentira que vem com o sagadeck) já funciona nos slides de API, sem configurar nada.</p><p>Para ligar a sua API, adicione um ambiente: o endereço base, as variáveis, os segredos e como ela autentica. Fica gravado nesta máquina, em <code>${esc(st.file)}</code>.</p></div>
+      <div data-envs>${st.envs.map((e) => card(e, st.current)).join("")}</div>
+      <button type="button" class="btn btn-secondary" data-new>${svg("plus")} Adicionar ambiente</button>`;
+    box.querySelectorAll("[data-env]").forEach((sec, i) => { sec.querySelector('[data-k="auth"]').value = st.envs[i].auth?.type || "nenhuma"; });
+    box.querySelector("[data-new]").onclick = () => {
+      const names = new Set([...box.querySelectorAll('[data-k="envname"]')].map((i) => i.value));
+      const name = ["dev", "hom", "prod"].find((n) => !names.has(n)) || `ambiente${names.size + 1}`;
+      box.querySelector("[data-envs]").insertAdjacentHTML("beforeend", card({ name, base: "", vars: [], secrets: [], auth: { type: "nenhuma" } }, names.size ? st.current : name));
+      wire(box.querySelector("[data-envs]").lastElementChild.parentElement);
+      empty();
+      box.querySelector("[data-envs]").lastElementChild.querySelector('[data-k="base"]').focus();
+    };
+    wire(box);
+    empty();
+  }
+
+  function collect() {
+    const envs = [], box = $("api-envs-form");
+    let current = null;
+    for (const sec of box.querySelectorAll("[data-env]")) {
+      const v = (k) => sec.querySelector(`[data-k="${k}"]`)?.value.trim() || "";
+      const name = v("envname");
+      if (sec.querySelector('input[name="aef-current"]').checked) current = name;
+      const rows = (kind) => [...sec.querySelectorAll(`[data-row="${kind}"]`)].map((r) => Object.fromEntries([...r.querySelectorAll("[data-k]")].map((i) => [i.dataset.k, i.value.trim()]))).filter((r) => r.name);
+      const type = v("auth");
+      const auth = type === "bearer" ? { type, value: v("bearer"), secretEnv: v("bearerEnv") }
+        : type === "token" ? { type, url: v("tokenUrl"), client_id: v("clientId"), value: v("clientSecret"), secretEnv: v("clientSecretEnv"), field: v("field") }
+        : { type: "nenhuma" };
+      envs.push({ name, base: v("base"), vars: rows("var"), secrets: rows("secret"), auth });
+    }
+    return { envs, current };
+  }
+
+  async function save() {
+    status("Salvando…");
+    const r = await fetch("api/http/ambientes/form", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(collect()) });
+    const j = await r.json().catch(() => ({}));
+    if (!r.ok) { status(`Não salvou: ${j.error || r.status}`, "err"); return false; }
+    st = j;
+    render();
+    status(`Salvo em ${st.file}. Os slides de API já usam os ambientes novos.`, "ok");
+    return true;
+  }
+
+  async function test(sec) {
+    const out = sec.querySelector("[data-result]");
+    out.className = "aef-result"; out.textContent = "Salvando e testando…";
+    if (!(await save())) { out.textContent = ""; return; }
+    const name = sec.querySelector('[data-k="envname"]')?.value.trim();
+    const again = [...$("api-envs-form").querySelectorAll("[data-env]")].find((s) => s.querySelector('[data-k="envname"]').value === name);
+    const res = again?.querySelector("[data-result]") || out;
+    try {
+      const j = await (await fetch("api/http/ambientes/testar", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ name }) })).json();
+      if (j.error) throw new Error(j.error);
+      const parts = [j.base ? (j.base.ok ? `endereço respondeu (HTTP ${j.base.status})` : `endereço não respondeu: ${j.base.error}`) : "sem endereço base",
+        ...(j.token ? [j.token.ok ? `token obtido (…${j.token.last4})` : `token falhou: ${j.token.error}`] : [])];
+      const ok = (!j.base || j.base.ok) && (!j.token || j.token.ok);
+      res.className = `aef-result ${ok ? "ok" : "err"}`;
+      res.textContent = (ok ? "Funcionou: " : "Problema: ") + parts.join("; ") + ".";
+    } catch (e) { res.className = "aef-result err"; res.textContent = `Não testou: ${e.message}`; }
+  }
+
+  function setTab(t) {
+    tab = t;
+    document.querySelectorAll("[data-envs-tab]").forEach((b) => b.classList.toggle("active", b.dataset.envsTab === t));
+    $("api-envs-form").hidden = t !== "form";
+    $("api-envs-textmode").hidden = t !== "text";
+    $("btn-api-envs-save").disabled = false;
+    status("");
+    if (t === "text") $("api-envs-text").dispatchEvent(new Event("input")); // a aba de texto valida antes de liberar o Salvar
+  }
+
+  async function open() {
+    document.querySelectorAll("[data-envs-tab]").forEach((b) => (b.onclick = async () => { if (b.dataset.envsTab === "text") { const j = await (await fetch("api/http/ambientes")).json().catch(() => ({})); if (j.text != null) $("api-envs-text").value = j.text; } else await load(); setTab(b.dataset.envsTab); }));
+    await load();
+    setTab("form");
+  }
+  async function load() {
+    const r = await fetch("api/http/ambientes/form");
+    st = await r.json().catch(() => ({ envs: [] }));
+    if (!r.ok) { status(st.error || `HTTP ${r.status}`, "err"); st = { envs: [], file: "" }; }
+    render();
+  }
+
+  return { open, save, active: () => tab === "form" };
+})();

package/src/studio/public/app.js

@@ -3044,9 +3044,11 @@
     }
     const on = !!state.ai.available;
     dom.aiStatus.textContent = on ? "IA ligada" : "IA desligada";
-    dom.aiStatus.title = on
-      ? `LLM em ${state.ai.url} · texto: ${state.ai.textModel} · imagem: ${state.ai.imageModel}`
-      : state.ai.configured ? `Nenhum LLM respondendo em ${state.ai.url}. Clique para conferir o provedor e a chave.` : "A IA não está configurada. Clique para informar provedor e chave.";
+    dom.aiStatus.title = state.ai.server // no servidor, sem os detalhes (são de quem administra)
+      ? (on ? "A IA deste servidor está ligada." : state.ai.configured ? "A IA deste servidor não está respondendo. Avise quem administra." : "A IA deste servidor não está configurada. Avise quem administra.")
+      : on ? `LLM em ${state.ai.url} · texto: ${state.ai.textModel} · imagem: ${state.ai.imageModel}`
+      : state.ai.configured ? `Nenhum LLM respondendo em ${state.ai.url}. Clique para conferir o provedor e a chave.`
+      : state.ai.problem ? `A IA não está configurada. ${state.ai.problem}` : "A IA não está configurada. Clique para informar provedor e chave.";
     dom.aiStatus.classList.toggle("on", on);
     dom.aiStatus.classList.toggle("off", !on);
   }
@@ -3154,7 +3156,7 @@
     }
     dom.btnRunAiDeck.disabled = true;
     const started = Date.now();
-    let phase = `Enviando para ${state.ai.textModel || "o LLM"}…`;
+    let phase = `Enviando para ${state.ai.textModel || "a IA"}…`;
     const show = () => {
       dom.aiDeckStatus.textContent = `${phase} · ${Math.round((Date.now() - started) / 1000)}s`;
     };
@@ -3430,6 +3432,7 @@ ${ta.value}`;
     renderApiEnvChips(st);
     if (!j.exists) apiEnvsStatus("Este arquivo ainda não existe. Validando o modelo antes de habilitar Salvar…");
     void validateApiEnvs();
+    await window.SagaApiEnvsForm.open(); // por campos é o padrão (api-envs-form.js); o texto fica na outra aba
   }
   function closeApiEnvs() { apiEnvsModal().classList.add("hidden"); }
   async function saveApiEnvs() {
@@ -3915,7 +3918,7 @@ ${ta.value}`;
     document.getElementById("btn-api-envs").addEventListener("click", openApiEnvs);
     document.getElementById("btn-close-api-envs").addEventListener("click", closeApiEnvs);
     document.getElementById("btn-api-envs-cancel").addEventListener("click", closeApiEnvs);
-    document.getElementById("btn-api-envs-save").addEventListener("click", saveApiEnvs);
+    document.getElementById("btn-api-envs-save").addEventListener("click", async () => { if (!window.SagaApiEnvsForm.active()) return saveApiEnvs(); if (await window.SagaApiEnvsForm.save()) await refreshStudioVars(); });
     document.getElementById("btn-api-vars-studio").addEventListener("click", () => openPane("vars"));
     document.getElementById("api-envs-text").addEventListener("input", scheduleApiEnvValidation);
     // grade de variáveis: grava ao sair da célula (change) ou no Enter; Esc desfaz; a linha em branco do fim cria

package/src/studio/public/chat.js

@@ -127,7 +127,7 @@ window.SagaChat = function ({ state, dom, escHtml, hydrateIcons, showToast, open
       await fetch("api/ai/chat/cancel", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ requestId: job.id }) }).catch(() => {});
     };
     const work = createProgressBubble(state.ai.available
-      ? `Enviando para o LLM (${state.ai.textModel})…`
+      ? (state.ai.textModel ? `Enviando para o LLM (${state.ai.textModel})…` : "Enviando para a IA…")
       : "Verificando se a IA está no ar…");
     dom.chatSend.disabled = false;
     dom.chatSend.title = 'Parar processamento'; dom.chatSend.setAttribute('aria-label','Parar');

package/src/studio/public/index.html

@@ -748,11 +748,15 @@
       <div class="modal-dialog-body api-envs-body">
         <p class="muted api-envs-intro">Endereços, tokens e segredos ficam na sua máquina, nunca no deck (o deck pode ir para o GitHub).
           Nos slides, <code>{{base}}</code> vira o <code>vars.base</code> do ambiente em uso; segredos entram como <code>{{secret.nome}}</code>.</p>
+        <div class="api-envs-tabs" role="tablist"><button type="button" role="tab" data-envs-tab="form" class="active">Por campos</button><button type="button" role="tab" data-envs-tab="text">Como texto (avançado)</button></div>
+        <div id="api-envs-form" class="api-envs-form"></div>
+        <div id="api-envs-textmode" hidden>
         <p class="muted api-envs-safety">O YAML é validado antes de salvar. Uma cópia da versão anterior fica ao lado do arquivo como <code>.bak</code>.</p>
         <div class="napkin-label">Ambiente em uso <span class="muted">— o selo no slide também troca</span></div>
         <div id="api-envs-list" class="api-envs-list"></div>
         <div class="napkin-label">Arquivo <code id="api-envs-file" class="muted"></code></div>
         <textarea id="api-envs-text" class="form-control mono" rows="20" spellcheck="false" aria-label="Conteúdo do ambientes.yaml"></textarea>
+        </div>
         <div id="api-envs-status" class="sf-hint api-envs-status"></div>
       </div>
       <div class="modal-dialog-footer">
@@ -843,6 +847,7 @@
   <script src="ui-icons.js"></script>
   <script src="update-notice.js"></script>
   <script src="ai-settings.js"></script>
+  <script src="api-envs-form.js"></script>
   <script src="calc-fields.js"></script>
   <script src="art-preview.js"></script>
   <script src="api-collections.js"></script>

package/src/studio/public/library.css

@@ -28,6 +28,11 @@ body.lib { display: grid; grid-template-columns: 218px minmax(0, 1fr); grid-temp
 .lib-search { display: flex; align-items: center; gap: 9px; width: 228px; height: 37px; color: var(--text-3); padding: 0 11px; background: transparent; border: 1px solid var(--ui-line); border-radius: 8px; }
 .lib-search input { background: none; color: var(--text); border: 0; outline: 0; width: 100%; min-width: 0; font-size: 11px; }
 .lib-search kbd { border: 1px solid var(--ui-line); border-radius: 3px; font-size: 10px; padding: 0 4px; }
+.ai-banner { display: flex; align-items: center; gap: 12px; margin: 10px 24px 0; padding: 10px 14px; border-radius: 10px; background: #fef3c7; color: #78350f; border: 1px solid #f59e0b; font-size: 13px; }
+.ai-banner[hidden] { display: none; }
+.ai-banner span { flex: 1; min-width: 0; overflow-wrap: anywhere; } /* o motivo pode trazer um caminho longo */
+.ai-banner button { flex: none; }
+.ai-banner .ic { width: 18px; height: 18px; flex: none; }
 .lib-btn { display: inline-flex; justify-content: center; align-items: center; gap: 8px; min-height: 38px; padding: 0 15px; border-radius: 8px; border: 1px solid transparent; font-size: 12px; font-weight: 600; text-decoration: none; transition: background .15s, transform .15s; }
 .lib-btn.primary { background: var(--brand-fill); color: var(--on-brand); box-shadow: 0 3px 8px #634ce916; }
 .lib-btn.primary:hover { background: var(--brand-fill-hover); transform: translateY(-1px); }

package/src/studio/public/library.html

@@ -28,6 +28,7 @@
     <button class="lib-icon-btn" id="btn-theme" title="Alternar tema claro e escuro" aria-label="Alternar tema claro e escuro"><i class="ic" data-ic="sun-moon"></i></button>
     <div class="lib-user" id="user" hidden><div class="lib-avatar" id="avatar"></div><span class="uname" id="uname"></span></div>
   </header>
+  <div class="ai-banner" id="ai-banner" role="status" hidden><i class="ic" data-ic="sparkles"></i><span>A IA ainda não está configurada. Configure para gerar apresentações e conversar no chat (o resto já funciona).</span><button type="button" class="lib-btn primary" id="ai-banner-btn">Configurar IA</button></div>
   <div class="lib-body">
     <aside class="lib-side">
       <nav id="side" aria-label="Biblioteca"></nav>

package/src/studio/public/library.js

@@ -59,8 +59,15 @@
     render();
   }
   // botão IA: provedor, chave e modelos desta máquina (ai-settings.js); no multiusuário quem configura é quem administra
-  api("api/ia").then(({ editable }) => { $("#btn-ai").hidden = !editable; }).catch(() => {});
-  $("#btn-ai").onclick = () => window.SagaAISettings.open();
+  // e, enquanto a IA não estiver configurada, a faixa "Configure a IA" (some ao salvar)
+  const aiSaved = () => { $("#ai-banner").hidden = true; };
+  api("api/ia").then(({ editable, configured, problem }) => {
+    $("#btn-ai").hidden = !editable; $("#ai-banner").hidden = !editable || configured;
+    if (problem) $("#ai-banner span").textContent = `A IA não está configurada. ${problem}`; // o arquivo existe mas não serve
+    hydrate($("#ai-banner"));
+  }).catch(() => {});
+  $("#btn-ai").onclick = () => window.SagaAISettings.open(aiSaved);
+  $("#ai-banner-btn").onclick = () => window.SagaAISettings.open(aiSaved);
   const openEditor = (id, present) => { location.href = `editor?deck=${encodeURIComponent(id)}${present ? "&present=1" : ""}`; };
 
   // ---------------------------------------------------------------- barra lateral

package/src/studio/public/style.css

@@ -812,6 +812,29 @@ textarea.form-control.napkin-input { min-height: 220px; resize: vertical; font-f
 .bs-option:disabled { opacity: .5; }
 .ai-msg.bs .ai-avatar { background: #8b5cf6; }
 .bs-tag { font-size: 11px; color: var(--text-3); margin-bottom: 4px; }
+/* Ambientes por campos (api-envs-form.js) */
+.api-envs-tabs { display: flex; gap: 6px; margin: 4px 0 10px; }
+.api-envs-tabs button { border: 1px solid var(--border, rgba(127,127,127,.3)); background: transparent; color: inherit; border-radius: 999px; padding: 4px 12px; cursor: pointer; font-size: 12px; }
+.api-envs-tabs button.active { background: var(--selected); border-color: var(--brand); color: var(--brand); }
+.api-envs-form { display: flex; flex-direction: column; gap: 10px; }
+.aef-intro p { margin: 0 0 6px; }
+.aef-env { border: 1px solid var(--border, rgba(127,127,127,.3)); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
+.aef-env label { font-size: 12px; font-weight: 600; margin-top: 6px; }
+.aef-env label small { font-weight: 400; color: var(--text-3); }
+.aef-env input, .aef-env select { width: 100%; box-sizing: border-box; padding: 5px 8px; border: 1px solid var(--border, rgba(127,127,127,.3)); border-radius: 6px; background: var(--bg, transparent); color: inherit; font: inherit; font-size: 13px; }
+.aef-head { display: flex; gap: 8px; align-items: center; }
+.aef-head input[data-k="envname"] { font-weight: 600; max-width: 180px; }
+.aef-head .aef-cur { display: flex; align-items: center; gap: 4px; margin: 0; font-weight: 400; white-space: nowrap; }
+.aef-head .aef-cur input { width: auto; }
+.aef-head [data-test] { margin-left: auto; }
+.aef-row, .aef-auth { display: flex; gap: 6px; align-items: center; }
+.aef-auth { flex-wrap: wrap; margin-top: 4px; }
+.aef-auth input { flex: 1 1 180px; }
+.aef-env .btn-link { align-self: flex-start; background: none; border: 0; color: var(--brand); cursor: pointer; padding: 2px 0; font-size: 12px; }
+.aef-note { font-size: 12px; margin: 6px 0 0; }
+.aef-result { font-size: 12px; min-height: 1em; }
+.aef-result.ok { color: #15803d; } .aef-result.err { color: var(--danger, #b91c1c); }
+
 /* leitura crítica: um cartão por ponto, ligado ao slide, com Aplicar e Ignorar */
 .crit-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
 .crit-item { border: 1px solid var(--border, rgba(127,127,127,.3)); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; }

package/src/studio/server.js

@@ -900,7 +900,9 @@ export function createStudioServer(deckPath = null, opts = {}) {
         const cfg = llmConfig();
         const available = await llmAvailable({ force: url.searchParams.has("refresh") });
         res.writeHead(200, { "Content-Type": "application/json" });
-        res.end(JSON.stringify({ available, configured: llmConfigured(cfg), source: cfg.source, url: cfg.url, textModel: cfg.textModel, imageModel: cfg.imageModel }));
+        // no servidor, só se está ligada: provedor e modelos são de quem administra (src/studio/ia-routes.js)
+        if (opts.multiuser) { res.end(JSON.stringify({ available, configured: llmConfigured(cfg), server: true })); return; }
+        res.end(JSON.stringify({ available, configured: llmConfigured(cfg), problem: cfg.problem || "", source: cfg.source, url: cfg.url, textModel: cfg.textModel, imageModel: cfg.imageModel }));
         return;
       }
 

package/src/templates/scaffold.js

@@ -6,7 +6,7 @@ export function generateScaffold({
   title = "Minha Apresentação",
   theme = "prata",
   author = "Seu Nome",
-  type = "keynote",
+  type = "lancamento",
 } = {}) {
   const normType = String(type).toLowerCase();
 
@@ -243,7 +243,7 @@ export function generateScaffold({
     };
   }
 
-  // Padrão: Keynote Clean / Apple style
+  // Padrão: lançamento, limpo e com muito respiro (tema prata)
   return {
     title,
     author,
@@ -252,7 +252,7 @@ export function generateScaffold({
     slides: [
       {
         layout: "cover",
-        kicker: "Keynote de Lançamento",
+        kicker: "Lançamento",
         title: "Design com ==Propósito==.",
         subtitle: "A harmonia entre simplicidade, respiro e precisão",
         author,
@@ -355,14 +355,14 @@ export function generateScaffold({
             text: "O padrão definitivo para criadores exigentes.",
             rating: 5,
             ratingLabel: "5.0 Pro",
-            tags: ["Keynote", "Prata"],
+            tags: ["Lançamento", "Prata"],
           },
         ],
         notes: "> O tom escuro cria um momento teatral no palco.",
       },
       {
         layout: "end",
-        title: "Pense Diferente.",
+        title: "Simples assim.",
         subtitle: "Obrigado.",
         contacts: ["apresentacao@empresa.com", "suporte@empresa.com"],
         notes: "> Conclusão elegante e contato.",

package/src/themes.js

@@ -270,7 +270,7 @@ export const THEMES = {
   },
 
   prata: {
-    label: "Prata — Keynote clean & espacial: prata acetinado, muito respiro, tipografia SF / Inter limpa e elegante",
+    label: "Prata — limpo e espacial: prata acetinado, muito respiro, tipografia do sistema / Inter limpa e elegante",
     colors: {
       paper: "F5F5F7", ink: "1D1D1F", accent: "0071E3", alert: "FF3B30",
       muted: "86868B", line: "D2D2D7", surface: "FFFFFF", surfaceDark: "161617",
@@ -293,10 +293,10 @@ export const THEMES = {
     },
     radius: 20, deco: "silver",
   },
-  // Alumínio: a cara dos lançamentos de iPhone e iPad de 2020-2021 (prata metálico, alumínio escovado, títulos
-  // cromados, grafite no escuro). O prata segue fiel ao branco da Apple de hoje.
+  // Alumínio: a cara de lançamento de aparelho premium (prata metálico, alumínio escovado, títulos
+  // cromados, grafite no escuro). O prata segue o branco limpo.
   aluminio: {
-    label: "Alumínio — lançamento de iPhone e iPad (2020): prata metálico, títulos cromados, alumínio escovado e grafite",
+    label: "Alumínio — lançamento de aparelho premium: prata metálico, títulos cromados, alumínio escovado e grafite",
     colors: {
       paper: "E4E5E9", ink: "1C1C1E", accent: "0066CC", alert: "D70015",
       muted: "5E5E63", line: "C3C5CA", surface: "F4F5F7", surfaceDark: "2C2C2E",
@@ -305,7 +305,7 @@ export const THEMES = {
     tones: {
       light: { bg: "paper", fg: "ink", muted: "muted", line: "line", surface: "surface", hi: "D1D3D8", em: "accent", onHi: "ink" },
       dark: { bg: "1C1C1E", fg: "F5F5F7", muted: "A1A1A6", line: "3A3A3C", surface: "surfaceDark", hi: "48484A", em: "2997FF", onHi: "FFFFFF" },
-      // azul-pacífico do iPhone 12 Pro, metálico (a pele põe o brilho)
+      // azul-pacífico metálico (a pele põe o brilho)
       accent: { bg: "1D3A50", fg: "FFFFFF", muted: "C5D6E3", line: "3F6580", surface: "2A4C64", hi: "FFFFFF", em: "8FC1E3", onHi: "1D3A50" },
       alert: { bg: "alert", fg: "FFFFFF", muted: "FFD1D4", line: "F0525F", surface: "B30012", hi: "FFFFFF", em: "FFFFFF", onHi: "alert" },
     },

package/templates/{exemplo-keynote.yaml → exemplo-prata.yaml}

@@ -1,10 +1,10 @@
 title: Inovação & Design
-author: Keynote Clean
+author: Estúdio Prata
 theme: prata
 duration: 12
 slides:
   - layout: cover
-    kicker: Apresentação Especial · Keynote
+    kicker: Apresentação Especial · Lançamento
     title: Simplicidade com ==Impacto==.
     subtitle: A estética do respiro, elegância e precisão visual
     author: Design Team
@@ -79,12 +79,12 @@ slides:
         title: "Padrão de Mercado"
         text: "A referência definitiva para profissionais sérios."
         rating: 5
-        ratingLabel: "5.0 Keynote"
-        tags: ["Keynote", "Prata", "Apple Clean"]
+        ratingLabel: "5.0 Pro"
+        tags: ["Lançamento", "Prata", "Clean"]
 
   - layout: end
-    title: Pense Diferente.
+    title: Simples assim.
     subtitle: Obrigado.
     contacts:
-      - apple.com/keynote
+      - design.org
       - contato@design.org