Redator de SD - preparado para deploy
This commit is contained in:
@@ -0,0 +1,980 @@
|
||||
"use strict";
|
||||
|
||||
const $ = (id) => document.getElementById(id);
|
||||
const esc = (s) =>
|
||||
String(s ?? "").replace(/[&<>"']/g, (c) => ({ "&": "&", "<": "<", ">": ">", '"': """, "'": "'" }[c]));
|
||||
const fmtD = (iso) => {
|
||||
const m = String(iso || "").match(/^(\d{4})-(\d{2})-(\d{2})/);
|
||||
return m ? `${m[3]}/${m[2]}/${m[1]}` : "—";
|
||||
};
|
||||
const dayNum = (iso) => {
|
||||
const m = String(iso || "").match(/^(\d{4})-(\d{2})-(\d{2})/);
|
||||
return m ? Date.UTC(+m[1], +m[2] - 1, +m[3]) / 86400000 : NaN;
|
||||
};
|
||||
|
||||
// Preços do claude-opus-5 (USD por 1M tokens) para o custo estimado no rodapé.
|
||||
const PRECO = { input: 5, output: 25, cache_read: 0.5, cache_write: 6.25 };
|
||||
|
||||
let statusApp = null;
|
||||
let sdAtual = null; // { id, numero, status, chat, rascunho, validacao, bloqueios, uso }
|
||||
let ocupado = false;
|
||||
let modoExterno = false; // tela "Validar JSON externo"
|
||||
let externo = null; // { sd, exportado, validacao, bloqueios }
|
||||
let ultimosBloqueios = [];
|
||||
|
||||
// ---------- Markdown mínimo (negrito, código, títulos, listas, OPCAO:) ----------
|
||||
function renderMd(texto) {
|
||||
const linhas = String(texto || "").split("\n");
|
||||
const out = [];
|
||||
let lista = null; // "ul" | "ol"
|
||||
const fechaLista = () => { if (lista) { out.push(`</${lista}>`); lista = null; } };
|
||||
const inline = (s) =>
|
||||
esc(s)
|
||||
.replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>")
|
||||
.replace(/`([^`]+)`/g, "<code>$1</code>");
|
||||
for (const raw of linhas) {
|
||||
const l = raw.trimEnd();
|
||||
if (/^OPCAO:/i.test(l.trim())) continue; // vira botão, não texto
|
||||
const h = l.match(/^(#{1,4})\s+(.*)/);
|
||||
const ul = l.match(/^\s*[-•]\s+(.*)/);
|
||||
const ol = l.match(/^\s*\d+[.)]\s+(.*)/);
|
||||
if (h) { fechaLista(); out.push(`<h3>${inline(h[2])}</h3>`); }
|
||||
else if (ul) { if (lista !== "ul") { fechaLista(); out.push("<ul>"); lista = "ul"; } out.push(`<li>${inline(ul[1])}</li>`); }
|
||||
else if (ol) { if (lista !== "ol") { fechaLista(); out.push("<ol>"); lista = "ol"; } out.push(`<li>${inline(ol[1])}</li>`); }
|
||||
else if (l.trim() === "") { fechaLista(); }
|
||||
else { fechaLista(); out.push(`<p>${inline(l)}</p>`); }
|
||||
}
|
||||
fechaLista();
|
||||
return out.join("");
|
||||
}
|
||||
|
||||
function extrairOpcoes(texto) {
|
||||
return String(texto || "")
|
||||
.split("\n")
|
||||
.map((l) => l.trim())
|
||||
.filter((l) => /^OPCAO:/i.test(l))
|
||||
.map((l) => l.replace(/^OPCAO:\s*/i, "").trim())
|
||||
.filter(Boolean);
|
||||
}
|
||||
|
||||
// ---------- Tema (automático → claro → escuro; escolha guardada no navegador) ----------
|
||||
const TEMAS = ["auto", "claro", "escuro"];
|
||||
const TEMA_ICONE = { auto: "🌗", claro: "☀️", escuro: "🌙" };
|
||||
const TEMA_ROTULO = { auto: "automático (segue o sistema)", claro: "claro", escuro: "escuro" };
|
||||
let temaAtual = localStorage.getItem("sd_tema");
|
||||
if (!TEMAS.includes(temaAtual)) temaAtual = "auto";
|
||||
|
||||
function aplicarTema(t) {
|
||||
const raiz = document.documentElement;
|
||||
if (t === "claro") raiz.dataset.theme = "light";
|
||||
else if (t === "escuro") raiz.dataset.theme = "dark";
|
||||
else delete raiz.dataset.theme; // automático: quem manda é o sistema
|
||||
$("btnTema").textContent = TEMA_ICONE[t];
|
||||
$("btnTema").title = `Tema: ${TEMA_ROTULO[t]} — clique para alternar`;
|
||||
}
|
||||
aplicarTema(temaAtual);
|
||||
|
||||
$("btnTema").addEventListener("click", () => {
|
||||
temaAtual = TEMAS[(TEMAS.indexOf(temaAtual) + 1) % TEMAS.length];
|
||||
localStorage.setItem("sd_tema", temaAtual);
|
||||
aplicarTema(temaAtual);
|
||||
});
|
||||
|
||||
// ---------- Autenticação + navegação ----------
|
||||
window.addEventListener("hashchange", rotear);
|
||||
window.addEventListener("DOMContentLoaded", iniciar);
|
||||
|
||||
async function iniciar() {
|
||||
let sess = null;
|
||||
try { sess = await (await fetch("/api/sessao")).json(); } catch {}
|
||||
if (!sess) { $("statusChip").textContent = "servidor indisponível"; return; }
|
||||
$("btnSair").hidden = !sess.precisa_login;
|
||||
if (sess.precisa_login && !sess.logado) { mostrarLogin(); return; }
|
||||
await entrar();
|
||||
}
|
||||
|
||||
async function entrar() {
|
||||
esconderTodas();
|
||||
await carregarStatus();
|
||||
rotear();
|
||||
}
|
||||
|
||||
function esconderTodas() {
|
||||
for (const id of ["telaLogin", "telaHome", "telaConversa", "telaValidar", "telaBase"]) $(id).hidden = true;
|
||||
}
|
||||
|
||||
function mostrarLogin() {
|
||||
esconderTodas();
|
||||
$("telaLogin").hidden = false;
|
||||
$("loginErro").hidden = true;
|
||||
$("loginUsuario").focus();
|
||||
}
|
||||
|
||||
$("formLogin").addEventListener("submit", async (ev) => {
|
||||
ev.preventDefault();
|
||||
$("btnLogin").disabled = true;
|
||||
const r = await fetch("/api/login", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ usuario: $("loginUsuario").value, senha: $("loginSenha").value }),
|
||||
}).catch(() => null);
|
||||
$("btnLogin").disabled = false;
|
||||
if (r?.ok) { $("loginSenha").value = ""; await entrar(); }
|
||||
else {
|
||||
$("loginErro").textContent = "Usuário ou senha inválidos.";
|
||||
$("loginErro").hidden = false;
|
||||
}
|
||||
});
|
||||
|
||||
$("btnSair").addEventListener("click", async () => {
|
||||
await fetch("/api/logout", { method: "POST" }).catch(() => {});
|
||||
location.hash = "#/";
|
||||
mostrarLogin();
|
||||
});
|
||||
|
||||
function exigirLogin(resp) {
|
||||
// Sessão expirada/servidor reiniciado: volta para a tela de login.
|
||||
if (resp && resp.status === 401) { mostrarLogin(); return true; }
|
||||
return false;
|
||||
}
|
||||
|
||||
async function carregarStatus() {
|
||||
try {
|
||||
const r = await fetch("/api/status");
|
||||
if (exigirLogin(r)) return;
|
||||
statusApp = await r.json();
|
||||
$("statusChip").textContent = statusApp.configurado
|
||||
? `${statusApp.provider} · ${statusApp.model} · próxima: SD-${statusApp.proximo_numero}`
|
||||
: "sem chave de API";
|
||||
$("avisoConfig").hidden = statusApp.configurado;
|
||||
popularSeletoresModelo();
|
||||
} catch {
|
||||
$("statusChip").textContent = "servidor indisponível";
|
||||
}
|
||||
}
|
||||
|
||||
// Seletores de modelo (Nova SD e Base de Conhecimento) — lista do .env (LLM_MODEL + LLM_MODELOS).
|
||||
function popularSeletoresModelo() {
|
||||
const modelos = statusApp?.modelos || [];
|
||||
for (const id of ["selModelo", "selModeloBase"]) {
|
||||
const sel = $(id);
|
||||
const anterior = sel.value;
|
||||
sel.innerHTML = modelos
|
||||
.map((m) => `<option value="${esc(m)}">${esc(m)}${m === statusApp.model ? " (padrão)" : ""}</option>`)
|
||||
.join("");
|
||||
// preserva a escolha do usuário entre recargas de status; senão, usa o padrão
|
||||
sel.value = modelos.includes(anterior) ? anterior : statusApp.model;
|
||||
}
|
||||
}
|
||||
|
||||
function moverPainel(slotId) {
|
||||
const painel = $("painel");
|
||||
const slot = $(slotId);
|
||||
if (painel.parentElement !== slot) slot.appendChild(painel);
|
||||
}
|
||||
|
||||
function rotear() {
|
||||
if ($("telaLogin") && !$("telaLogin").hidden) return; // aguardando login
|
||||
const m = location.hash.match(/^#\/sd\/(.+)$/);
|
||||
if (location.hash === "#/validar") mostrarValidar();
|
||||
else if (location.hash === "#/base") mostrarBase();
|
||||
else if (m) abrirConversa(m[1]);
|
||||
else mostrarHome();
|
||||
}
|
||||
|
||||
// ---------- Home ----------
|
||||
async function mostrarHome() {
|
||||
esconderTodas();
|
||||
$("telaHome").hidden = false;
|
||||
sdAtual = null;
|
||||
modoExterno = false;
|
||||
const rList = await fetch("/api/sds");
|
||||
if (exigirLogin(rList)) return;
|
||||
const lista = await rList.json();
|
||||
$("listaSds").innerHTML = lista.length
|
||||
? lista
|
||||
.sort((a, b) => (a.criadaEm < b.criadaEm ? 1 : -1))
|
||||
.map(
|
||||
(s) => `<a class="sd-item" href="#/sd/${s.id}">
|
||||
<span class="num">SD-${s.numero}</span>
|
||||
<span class="tit">${esc(s.titulo)}</span>
|
||||
<span class="st st-${s.status}">${s.status}</span>
|
||||
<button type="button" class="btn-excluir" data-id="${s.id}" data-status="${s.status}"
|
||||
data-titulo="${esc(s.titulo)}" title="Excluir da lista">✕</button></a>`
|
||||
)
|
||||
.join("")
|
||||
: '<p class="hint">Nenhuma SD ainda — cole a primeira demanda acima.</p>';
|
||||
$("listaSds").querySelectorAll(".btn-excluir").forEach((b) =>
|
||||
b.addEventListener("click", async (ev) => {
|
||||
ev.preventDefault(); // o botão vive dentro do link da SD
|
||||
ev.stopPropagation();
|
||||
const { id, status, titulo } = ev.currentTarget.dataset;
|
||||
const aviso = status === "enviada"
|
||||
? `Excluir a conversa de "${titulo}" da lista?\n\nEla já foi ENVIADA: o registro na base de conhecimento (saldos e precedentes) NÃO será apagado — só a conversa aqui do app.`
|
||||
: `Excluir o rascunho "${titulo}"?\n\nA conversa e o rascunho serão apagados de vez.`;
|
||||
if (!confirm(aviso)) return;
|
||||
const r = await fetch(`/api/sds/${id}`, { method: "DELETE" });
|
||||
if (exigirLogin(r)) return;
|
||||
if (!r.ok) { alert("Não foi possível excluir."); return; }
|
||||
await carregarStatus(); // numeração provisória pode mudar
|
||||
await mostrarHome();
|
||||
})
|
||||
);
|
||||
if (statusApp?.saldos) {
|
||||
$("saldosBox").innerHTML = Object.entries(statusApp.saldos)
|
||||
.map(
|
||||
([item, v]) => `<div class="saldo-chip">
|
||||
<div class="label">${esc(item)}</div>
|
||||
<div class="value">${v.saldo.toLocaleString("pt-BR")} UST</div>
|
||||
<div class="sub">de ${v.pool_total.toLocaleString("pt-BR")} · consumido ${v.consumido.toLocaleString("pt-BR")}</div>
|
||||
</div>`
|
||||
)
|
||||
.join("");
|
||||
}
|
||||
}
|
||||
|
||||
$("btnIniciar").addEventListener("click", async () => {
|
||||
const demanda = $("demandaInput").value.trim();
|
||||
if (!demanda || ocupado) return;
|
||||
$("btnIniciar").disabled = true;
|
||||
// Prepara a tela de conversa e transmite o primeiro turno
|
||||
esconderTodas();
|
||||
$("telaConversa").hidden = false;
|
||||
modoExterno = false;
|
||||
moverPainel("slotPainelConversa");
|
||||
$("mensagens").innerHTML = "";
|
||||
$("opcoes").innerHTML = "";
|
||||
resetPainel();
|
||||
addMsgUser(demanda);
|
||||
const resp = await fetch("/api/sds", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ demanda, modelo: $("selModelo").value }),
|
||||
});
|
||||
if (exigirLogin(resp)) return;
|
||||
const sdId = resp.headers.get("X-Sd-Id");
|
||||
history.replaceState(null, "", `#/sd/${sdId}`);
|
||||
sdAtual = { id: sdId, chat: [], rascunho: null };
|
||||
$("demandaInput").value = "";
|
||||
$("btnIniciar").disabled = false;
|
||||
await consumirStream(resp);
|
||||
await recarregarSd(); // pega numero/status/uso consolidados
|
||||
});
|
||||
|
||||
// ---------- Conversa ----------
|
||||
async function abrirConversa(id) {
|
||||
if (sdAtual?.id === id && ocupado) return; // já está na tela, streaming em curso
|
||||
esconderTodas();
|
||||
$("telaConversa").hidden = false;
|
||||
modoExterno = false;
|
||||
moverPainel("slotPainelConversa");
|
||||
sdAtual = { id };
|
||||
await recarregarSd(true);
|
||||
}
|
||||
|
||||
async function recarregarSd(renderChat = false) {
|
||||
const r = await fetch(`/api/sds/${sdAtual.id}`);
|
||||
if (exigirLogin(r)) return;
|
||||
if (!r.ok) { location.hash = "#/"; return; }
|
||||
const d = await r.json();
|
||||
sdAtual = d;
|
||||
if (renderChat) {
|
||||
$("mensagens").innerHTML = "";
|
||||
$("opcoes").innerHTML = "";
|
||||
for (const m of d.chat || []) {
|
||||
if (m.role === "user") addMsgUser(m.texto);
|
||||
else addMsgAssistant(m.texto, true);
|
||||
}
|
||||
const ultimo = (d.chat || []).filter((m) => m.role === "assistant").pop();
|
||||
if (ultimo) renderOpcoes(extrairOpcoes(ultimo.texto));
|
||||
}
|
||||
renderPainel(d.rascunho, d.validacao, d.bloqueios);
|
||||
renderUso(d.uso);
|
||||
const soLeitura = d.status === "enviada";
|
||||
$("msgInput").disabled = soLeitura;
|
||||
$("btnEnviarMsg").disabled = soLeitura;
|
||||
if (soLeitura) $("msgInput").placeholder = "SD enviada — somente leitura.";
|
||||
rolarChat();
|
||||
}
|
||||
|
||||
function addMsgUser(texto) {
|
||||
const div = document.createElement("div");
|
||||
div.className = "msg user";
|
||||
div.textContent = texto;
|
||||
$("mensagens").appendChild(div);
|
||||
rolarChat();
|
||||
}
|
||||
|
||||
function addMsgAssistant(texto, pronto = false) {
|
||||
const div = document.createElement("div");
|
||||
div.className = "msg assistant";
|
||||
div.innerHTML = pronto ? renderMd(texto) : '<span class="digitando">▍</span>';
|
||||
$("mensagens").appendChild(div);
|
||||
rolarChat();
|
||||
return div;
|
||||
}
|
||||
|
||||
function renderOpcoes(opcoes) {
|
||||
$("opcoes").innerHTML = "";
|
||||
for (const o of opcoes) {
|
||||
const b = document.createElement("button");
|
||||
b.type = "button";
|
||||
b.textContent = o;
|
||||
b.addEventListener("click", () => enviarMensagem(o));
|
||||
$("opcoes").appendChild(b);
|
||||
}
|
||||
}
|
||||
|
||||
function rolarChat() {
|
||||
const el = $("mensagens");
|
||||
el.scrollTop = el.scrollHeight;
|
||||
}
|
||||
|
||||
$("formMsg").addEventListener("submit", (ev) => {
|
||||
ev.preventDefault();
|
||||
const t = $("msgInput").value.trim();
|
||||
if (t) enviarMensagem(t);
|
||||
});
|
||||
$("msgInput").addEventListener("keydown", (ev) => {
|
||||
if (ev.key === "Enter" && !ev.shiftKey) {
|
||||
ev.preventDefault();
|
||||
$("formMsg").requestSubmit();
|
||||
}
|
||||
});
|
||||
|
||||
async function enviarMensagem(texto) {
|
||||
if (ocupado || !sdAtual?.id) return;
|
||||
$("msgInput").value = "";
|
||||
$("opcoes").innerHTML = "";
|
||||
addMsgUser(texto);
|
||||
const resp = await fetch(`/api/sds/${sdAtual.id}/mensagem`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ texto }),
|
||||
});
|
||||
if (exigirLogin(resp)) return;
|
||||
if (!resp.ok && !resp.body) {
|
||||
addMsgAssistant("⚠ Erro ao enviar a mensagem.", true);
|
||||
return;
|
||||
}
|
||||
await consumirStream(resp);
|
||||
}
|
||||
|
||||
async function consumirStream(resp) {
|
||||
ocupado = true;
|
||||
$("btnEnviarMsg").disabled = true;
|
||||
const bolha = addMsgAssistant("");
|
||||
let texto = "";
|
||||
// "pensando…" cobre o silêncio do raciocínio interno do modelo: antes da
|
||||
// primeira palavra e entre as chamadas de ferramenta (validação do rascunho).
|
||||
let pensando = true;
|
||||
const pinta = () => {
|
||||
bolha.innerHTML =
|
||||
renderMd(texto) +
|
||||
(pensando ? '<span class="pensando">pensando…</span>' : '<span class="digitando">▍</span>');
|
||||
rolarChat();
|
||||
};
|
||||
pinta();
|
||||
try {
|
||||
const reader = resp.body.getReader();
|
||||
const dec = new TextDecoder();
|
||||
let buf = "";
|
||||
while (true) {
|
||||
const { done, value } = await reader.read();
|
||||
if (done) break;
|
||||
buf += dec.decode(value, { stream: true });
|
||||
let nl;
|
||||
while ((nl = buf.indexOf("\n")) >= 0) {
|
||||
const linha = buf.slice(0, nl).trim();
|
||||
buf = buf.slice(nl + 1);
|
||||
if (!linha) continue;
|
||||
let ev;
|
||||
try { ev = JSON.parse(linha); } catch { continue; }
|
||||
if (ev.t === "delta") {
|
||||
texto += ev.text;
|
||||
pensando = false;
|
||||
pinta();
|
||||
} else if (ev.t === "rascunho") {
|
||||
renderPainel(ev.sd, ev.validacao, ev.bloqueios);
|
||||
pensando = true; // o modelo volta a raciocinar sobre o resultado da validação
|
||||
pinta();
|
||||
} else if (ev.t === "uso") {
|
||||
renderUso(ev.uso);
|
||||
} else if (ev.t === "erro") {
|
||||
texto += `\n\n⚠ ${ev.msg}`;
|
||||
pensando = false;
|
||||
pinta();
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
texto += "\n\n⚠ Conexão interrompida — recarregue a página para retomar.";
|
||||
}
|
||||
bolha.innerHTML = renderMd(texto);
|
||||
renderOpcoes(extrairOpcoes(texto));
|
||||
ocupado = false;
|
||||
$("btnEnviarMsg").disabled = false;
|
||||
rolarChat();
|
||||
}
|
||||
|
||||
// ---------- Painel do documento ----------
|
||||
function resetPainel() {
|
||||
$("painelVazio").hidden = false;
|
||||
$("painelConteudo").hidden = true;
|
||||
}
|
||||
|
||||
function renderPainel(sd, validacao, bloqueios) {
|
||||
if (!sd) { resetPainel(); return; }
|
||||
ultimosBloqueios = bloqueios || [];
|
||||
if (!modoExterno && sdAtual) { sdAtual.rascunho = sd; }
|
||||
$("painelVazio").hidden = true;
|
||||
$("painelConteudo").hidden = false;
|
||||
const E = sd.entregaveis || [];
|
||||
const cab = sd.cabecalho || {};
|
||||
const R = validacao?.resultados || {};
|
||||
const totais = validacao?.totais || {};
|
||||
|
||||
// Resumo
|
||||
$("pResumo").innerHTML = `
|
||||
<div class="ptitulo">${esc(cab.titulo || cab.projeto || "SD em elaboração")}</div>
|
||||
<div class="resumo-chips">
|
||||
<div class="rchip"><div class="label">Nº</div><div class="value">${esc(cab.numero_sd || (sdAtual?.numero ? "SD-" + sdAtual.numero : "—"))}</div></div>
|
||||
<div class="rchip"><div class="label">Total</div><div class="value">${validacao?.soma_ust ?? "—"} UST</div></div>
|
||||
<div class="rchip"><div class="label">Prazo</div><div class="value">${esc(cab.prazo_execucao_semanas ?? "—")} sem.</div></div>
|
||||
<div class="rchip"><div class="label">Itens</div><div class="value" style="font-size:12px">${(cab.itens_tr || []).join(" + ") || "—"}</div></div>
|
||||
<div class="rchip"><div class="label">✓/!/✗/○</div><div class="value" style="font-size:12px">${totais.ok ?? 0}/${totais.alerta ?? 0}/${totais.falha ?? 0}/${totais.pendente ?? 0}</div></div>
|
||||
</div>`;
|
||||
|
||||
// Quadro
|
||||
let linhas = E.map((e) => {
|
||||
const par = (e.paralelo_com || []).length ? " ∥" : "";
|
||||
return `<tr><td class="num">${e.n ?? ""}</td><td>${esc(e.nome)}${par}</td><td>${esc(e.tipo || "")}</td>
|
||||
<td>${esc(e.item_tr || "")}</td><td class="num">${e.semanas ?? ""}</td><td class="num">${e.ust ?? ""}</td>
|
||||
<td>${fmtD(e.periodo?.inicio)}–${fmtD(e.periodo?.fim)}</td></tr>`;
|
||||
}).join("");
|
||||
const porItem = validacao?.soma_por_item || {};
|
||||
if (Object.keys(porItem).length > 1) {
|
||||
linhas += Object.keys(porItem).sort()
|
||||
.map((i) => `<tr class="subtotal"><td colspan="5">Subtotal ${esc(i)}</td><td class="num">${porItem[i]}</td><td></td></tr>`)
|
||||
.join("");
|
||||
}
|
||||
linhas += `<tr class="total"><td colspan="5">TOTAL</td><td class="num">${validacao?.soma_ust ?? ""}</td><td></td></tr>`;
|
||||
$("pQuadro").innerHTML = `<table class="quadro">
|
||||
<tr><th>#</th><th>Entregável</th><th>Tipo</th><th>Item</th><th>Sem</th><th>UST</th><th>Período</th></tr>${linhas}</table>`;
|
||||
|
||||
// Artefatos (trava de integridade)
|
||||
$("pArtefatos").innerHTML = E.map((e, ei) => {
|
||||
const arts = (e.artefatos || []).map((a, ai) => {
|
||||
const bad = a.data && e.periodo?.fim && dayNum(a.data) > dayNum(e.periodo.fim);
|
||||
return `<div class="art-row ${a.confirmado_pelo_usuario ? "confirmed" : "unconfirmed"}">
|
||||
<input type="checkbox" data-e="${ei}" data-a="${ai}" ${a.confirmado_pelo_usuario ? "checked" : ""} aria-label="Confirmar artefato">
|
||||
<div class="art-main">
|
||||
<label>${esc(a.nome)}</label>
|
||||
<input type="date" data-e="${ei}" data-a="${ai}" value="${esc(a.data || "")}" aria-label="Data do artefato">
|
||||
${bad ? `<div class="flag bad">data posterior ao fim do entregável (${fmtD(e.periodo.fim)})</div>`
|
||||
: a.confirmado_pelo_usuario && !a.data ? `<div class="flag miss">confirmado sem data</div>` : ""}
|
||||
</div></div>`;
|
||||
}).join("");
|
||||
return arts ? `<div class="art-entr"><h4>E${e.n} — ${esc(e.nome)}</h4>${arts}</div>` : "";
|
||||
}).join("") || '<p class="hint">Ainda sem artefatos registrados.</p>';
|
||||
|
||||
$("pArtefatos").querySelectorAll("input[type=checkbox]").forEach((cb) =>
|
||||
cb.addEventListener("change", (ev) =>
|
||||
atualizarArtefato(+ev.target.dataset.e, +ev.target.dataset.a, { confirmado: ev.target.checked })
|
||||
)
|
||||
);
|
||||
$("pArtefatos").querySelectorAll("input[type=date]").forEach((di) =>
|
||||
di.addEventListener("change", (ev) =>
|
||||
atualizarArtefato(+ev.target.dataset.e, +ev.target.dataset.a, { data: ev.target.value || "" })
|
||||
)
|
||||
);
|
||||
|
||||
// Checklist
|
||||
const ICONS = { ok: "✓", alerta: "!", falha: "✗", pendente: "○" };
|
||||
const checklist = statusApp?.checklist || [];
|
||||
$("pChecklist").innerHTML = checklist.map((c) => {
|
||||
const r = R[c.id] || { status: "pendente", obs: "" };
|
||||
return `<div class="check-item st-${r.status}">
|
||||
<span class="icon">${ICONS[r.status]}</span>
|
||||
<span class="id">${c.id}</span>
|
||||
<span>${esc(c.regra)}${r.obs ? `<span class="obs">${esc(r.obs)}</span>` : ""}</span></div>`;
|
||||
}).join("");
|
||||
|
||||
// Pendências
|
||||
const pend = [...(sd.pendencias || [])];
|
||||
(bloqueios || []).forEach((b) => pend.push("Bloqueante: " + b));
|
||||
$("pPendencias").innerHTML = pend.length
|
||||
? pend.map((p) => `<li>${esc(p)}</li>`).join("")
|
||||
: "<li>Nenhuma pendência registrada.</li>";
|
||||
|
||||
// Fechamento
|
||||
const bloqueado = (bloqueios || []).length > 0;
|
||||
const lock = $("pBloqueios");
|
||||
lock.className = "lock-msg " + (bloqueado ? "locked" : "open");
|
||||
lock.textContent = bloqueado
|
||||
? "Exportação bloqueada — " + bloqueios.join("; ") + "."
|
||||
: "SD liberada: artefatos confirmados e nenhuma falha de código.";
|
||||
$("btnBaixar").disabled = bloqueado;
|
||||
$("btnEnviarSd").hidden = modoExterno;
|
||||
$("btnEnviarSd").disabled = bloqueado || sdAtual?.status === "enviada";
|
||||
}
|
||||
|
||||
async function atualizarArtefato(e, a, corpo) {
|
||||
if (modoExterno) {
|
||||
const art = externo?.sd?.entregaveis?.[e]?.artefatos?.[a];
|
||||
if (!art) return;
|
||||
if (typeof corpo.confirmado === "boolean") art.confirmado_pelo_usuario = corpo.confirmado;
|
||||
if (corpo.data !== undefined) {
|
||||
if (corpo.data) art.data = corpo.data;
|
||||
else delete art.data;
|
||||
}
|
||||
await validarExterno(false);
|
||||
return;
|
||||
}
|
||||
const r = await fetch(`/api/sds/${sdAtual.id}/artefato`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ e, a, ...corpo }),
|
||||
});
|
||||
if (exigirLogin(r)) return;
|
||||
if (r.ok) {
|
||||
const d = await r.json();
|
||||
renderPainel(d.sd, d.validacao, d.bloqueios);
|
||||
}
|
||||
}
|
||||
|
||||
$("btnBaixar").addEventListener("click", () => {
|
||||
if (modoExterno) {
|
||||
if (externo?.exportado) baixarJsonLocal(externo.exportado);
|
||||
return;
|
||||
}
|
||||
window.location.href = `/api/sds/${sdAtual.id}/export`;
|
||||
});
|
||||
|
||||
function baixarJsonLocal(obj) {
|
||||
const nome = (obj.cabecalho?.numero_sd || "sd").toLowerCase().replace(/[^a-z0-9-]+/g, "-") + ".json";
|
||||
const blob = new Blob([JSON.stringify(obj, null, 2)], { type: "application/json" });
|
||||
const a = document.createElement("a");
|
||||
a.href = URL.createObjectURL(blob);
|
||||
a.download = nome;
|
||||
a.click();
|
||||
URL.revokeObjectURL(a.href);
|
||||
}
|
||||
|
||||
$("btnEnviarSd").addEventListener("click", async () => {
|
||||
if (!confirm("Marcar como enviada? O número definitivo será atribuído e a SD entra na base de conhecimento.")) return;
|
||||
const r = await fetch(`/api/sds/${sdAtual.id}/enviar`, { method: "POST" });
|
||||
const d = await r.json();
|
||||
if (r.ok) {
|
||||
alert(`SD registrada na base como ${d.registro_na_base.id}.`);
|
||||
await carregarStatus();
|
||||
await recarregarSd();
|
||||
} else {
|
||||
alert(d.erro + (d.bloqueios ? "\n- " + d.bloqueios.join("\n- ") : ""));
|
||||
}
|
||||
});
|
||||
|
||||
// ---------- Documento formatado + impressão/PDF ----------
|
||||
const CSS_IMPRESSAO = `
|
||||
body{margin:0; padding:32px 40px; background:#fff; color:#000;
|
||||
font-family:Georgia,"Times New Roman",serif; font-size:12.5pt; line-height:1.6;}
|
||||
h1{font-size:16pt; margin:0 0 2px; line-height:1.3;}
|
||||
.doc-sub{font-family:"Segoe UI",Arial,sans-serif; font-size:8.5pt; color:#555;
|
||||
text-transform:uppercase; letter-spacing:.08em; margin-bottom:18px;}
|
||||
.marca-rascunho{font-family:"Segoe UI",Arial,sans-serif; font-size:9pt; color:#B3362B;
|
||||
border:1px solid #B3362B; display:inline-block; padding:2px 10px; margin-bottom:14px;}
|
||||
h2{font-size:12.5pt; margin:22px 0 8px; border-bottom:2px solid #0B6B70; padding-bottom:3px;}
|
||||
h3{font-size:11pt; margin:16px 0 5px;}
|
||||
p{margin:0 0 10px;}
|
||||
table{border-collapse:collapse; width:100%; font-size:9.5pt;}
|
||||
th,td{border:1px solid #999; padding:4px 7px; text-align:left; vertical-align:top;}
|
||||
th{font-family:"Segoe UI",Arial,sans-serif; font-size:8pt; text-transform:uppercase;
|
||||
letter-spacing:.04em; background:#E1EFEF;}
|
||||
tr.subtotal td{font-weight:700; background:#E1EFEF;}
|
||||
tr.total td{font-weight:700; border-top:2px solid #0B6B70;}
|
||||
td.num,th.num{text-align:right;}
|
||||
.nota{font-size:10pt; font-style:italic; color:#444; margin-top:6px;}
|
||||
ul,ol{margin:0 0 10px; padding-left:20px;}
|
||||
li{margin-bottom:3px;}
|
||||
.cab-table td:first-child{font-family:"Segoe UI",Arial,sans-serif; font-size:8.5pt;
|
||||
text-transform:uppercase; letter-spacing:.04em; color:#555; width:170px;}
|
||||
.art-status{font-family:"Segoe UI",Arial,sans-serif; font-size:8pt; border-radius:8px;
|
||||
padding:1px 7px; margin-left:6px; white-space:nowrap; border:1px solid #999;}
|
||||
.art-status.sim{background:#E3F2E9; color:#1E7B47;}
|
||||
.art-status.nao{background:#F8EFDB; color:#A8730B;}
|
||||
.enq-desc{font-size:10pt; color:#444;}
|
||||
h2,h3{page-break-after:avoid;} tr{page-break-inside:avoid;}
|
||||
@page{margin:18mm 15mm;}`;
|
||||
|
||||
function minArtCli(ust) {
|
||||
const faixas = statusApp?.regras?.artefatos_minimos || [];
|
||||
const f = faixas.find((b) => b.ust_max === null || ust <= b.ust_max);
|
||||
return f ? f.artefatos : 1;
|
||||
}
|
||||
|
||||
function documentoHtml(sdX, rascunho) {
|
||||
const cab = sdX.cabecalho || {};
|
||||
const E = sdX.entregaveis || [];
|
||||
const infoItem = (i) => statusApp?.regras?.itens?.[i] || {};
|
||||
const soma = E.reduce((a, e) => a + (e.ust || 0), 0);
|
||||
const porItem = {};
|
||||
E.forEach((e) => (porItem[e.item_tr] = (porItem[e.item_tr] || 0) + (e.ust || 0)));
|
||||
const multi = Object.keys(porItem).length > 1;
|
||||
|
||||
let quadro = E.map((e) =>
|
||||
`<tr><td class="num">${e.n ?? ""}</td><td>${esc(e.nome)}</td><td>${esc(e.tipo || "")}</td>
|
||||
<td>${esc(e.item_tr || "")}</td><td class="num">${e.semanas ?? ""}</td>
|
||||
<td class="num">${e.timebox_h ?? ""}h</td><td class="num">${e.ust ?? ""}</td>
|
||||
<td>${fmtD(e.periodo?.inicio)} – ${fmtD(e.periodo?.fim)}</td></tr>`
|
||||
).join("");
|
||||
if (multi)
|
||||
quadro += Object.keys(porItem).sort()
|
||||
.map((i) => `<tr class="subtotal"><td colspan="6">Subtotal ${esc(i)}</td><td class="num">${porItem[i]}</td><td></td></tr>`)
|
||||
.join("");
|
||||
quadro += `<tr class="total"><td colspan="6">TOTAL</td><td class="num">${soma}</td><td></td></tr>`;
|
||||
|
||||
const notas = E.filter((e) => (e.nota_paralelismo || "").trim())
|
||||
.map((e) => `<p class="nota"><strong>Nota de paralelismo (E${e.n}):</strong> ${esc(e.nota_paralelismo)}</p>`)
|
||||
.join("");
|
||||
|
||||
const det = E.map((e) =>
|
||||
`<h3>E${e.n} · ${esc(e.tipo || "")} — ${esc(e.nome)} (${e.ust ?? "?"} UST)</h3>
|
||||
<p><strong>Resumo:</strong> ${esc(e.resumo || "")}</p>
|
||||
<p style="margin-bottom:4px"><strong>Atividades:</strong></p>
|
||||
<ol>${(e.atividades || []).map((a) => `<li>${esc(a)}</li>`).join("")}</ol>
|
||||
<p style="margin-bottom:4px"><strong>Artefatos</strong> (mínimo ${minArtCli(e.ust || 0)} pela faixa de UST):</p>
|
||||
<ul>${(e.artefatos || []).map((a) =>
|
||||
`<li>${esc(a.nome)}${a.data ? ` — ${fmtD(a.data)}` : ""}
|
||||
<span class="art-status ${a.confirmado_pelo_usuario ? "sim" : "nao"}">${a.confirmado_pelo_usuario ? "confirmado" : "a confirmar"}</span></li>`
|
||||
).join("")}</ul>
|
||||
<p style="margin-bottom:4px"><strong>Critérios de aceite:</strong></p>
|
||||
<ul>${(e.criterios_aceite || []).map((c) => `<li>${esc(c)}</li>`).join("")}</ul>`
|
||||
).join("");
|
||||
|
||||
const enq = (sdX.enquadramento_tr || []).map((q) => {
|
||||
const inf = infoItem(q.item_tr);
|
||||
return `<h3>Item ${inf.numero ?? "?"} — “${esc(q.titulo_literal)}” (CATMAS ${esc(inf.catmas || "—")}) — entregáveis ${(q.entregaveis_n || []).join(", ")}</h3>
|
||||
<p class="enq-desc">${esc(q.descricao_item || "")}</p>
|
||||
<ul>${(q.aderencia || []).map((b) => `<li>${esc(b)}</li>`).join("")}</ul>`;
|
||||
}).join("");
|
||||
|
||||
const titulo = esc(cab.numero_sd || "SD") + " — " + esc(cab.projeto || "Solicitação de Demanda");
|
||||
return `<!DOCTYPE html><html lang="pt-BR"><head><meta charset="utf-8"><title>${titulo}</title>` +
|
||||
`<style>${CSS_IMPRESSAO}</style></head><body>` +
|
||||
`<h1>${esc(cab.titulo || cab.projeto || "Solicitação de Demanda")}</h1>` +
|
||||
`<div class="doc-sub">Solicitação de Demanda · ${esc(cab.numero_sd || "SD-__")} · ${esc(cab.versao || "V1")} · RMDS / SES-MG</div>` +
|
||||
(rascunho ? `<div class="marca-rascunho">RASCUNHO — há pendências bloqueantes abertas</div>` : "") +
|
||||
`<table class="cab-table">
|
||||
<tr><td>Projeto</td><td>${esc(cab.projeto || "")}</td></tr>
|
||||
<tr><td>Data de abertura</td><td>${fmtD(cab.data_abertura)}</td></tr>
|
||||
<tr><td>Período de execução</td><td>${fmtD(cab.periodo_execucao?.inicio)} a ${fmtD(cab.periodo_execucao?.fim)}</td></tr>
|
||||
<tr><td>Itens do TR</td><td>${(cab.itens_tr || []).map(esc).join(" e ")}</td></tr>
|
||||
<tr><td>Total</td><td>${soma} UST${cab.total_ust_extenso ? ` (${esc(cab.total_ust_extenso)})` : ""}</td></tr>
|
||||
<tr><td>Prazo de execução</td><td>${esc(cab.prazo_execucao_semanas ?? "—")} semanas (calendário)</td></tr>
|
||||
<tr><td>Entregáveis</td><td>${E.length}</td></tr>
|
||||
</table>
|
||||
<h2>1. Objetivo</h2><p>${esc(sdX.objetivo || "")}</p>
|
||||
<h2>2. Contexto e escopo</h2>${(sdX.contexto || []).map((p) => `<p>${esc(p)}</p>`).join("")}
|
||||
<h2>3. Quadro de entregáveis</h2><table>
|
||||
<tr><th class="num">#</th><th>Entregável</th><th>Tipo</th><th>Item</th><th class="num">Sem.</th><th class="num">Timebox</th><th class="num">UST</th><th>Período</th></tr>
|
||||
${quadro}</table>${notas}
|
||||
<h2>4. Detalhamento por entregável</h2>${det}
|
||||
<h2>5. Enquadramento no TR</h2>${enq}` +
|
||||
`<scr` + `ipt>window.addEventListener("load",()=>setTimeout(()=>window.print(),350));</scr` + `ipt></body></html>`;
|
||||
}
|
||||
|
||||
function abrirDocumento(sdX, rascunho) {
|
||||
const html = documentoHtml(sdX, rascunho);
|
||||
try {
|
||||
const w = window.open("", "_blank");
|
||||
if (w && w.document) {
|
||||
w.document.open();
|
||||
w.document.write(html);
|
||||
w.document.close();
|
||||
return;
|
||||
}
|
||||
} catch { /* pop-up bloqueado */ }
|
||||
const nome = (sdX.cabecalho?.numero_sd || "sd").toLowerCase().replace(/[^a-z0-9-]+/g, "-") + "-impressao.html";
|
||||
const blob = new Blob([html], { type: "text/html" });
|
||||
const a = document.createElement("a");
|
||||
a.href = URL.createObjectURL(blob);
|
||||
a.download = nome;
|
||||
a.click();
|
||||
URL.revokeObjectURL(a.href);
|
||||
}
|
||||
|
||||
$("btnDocumento").addEventListener("click", async () => {
|
||||
if (modoExterno) {
|
||||
if (externo?.exportado) abrirDocumento(externo.exportado, (externo.bloqueios || []).length > 0);
|
||||
return;
|
||||
}
|
||||
if (!sdAtual?.id) return;
|
||||
const r = await fetch(`/api/sds/${sdAtual.id}/export?forcar=1`);
|
||||
if (exigirLogin(r)) return;
|
||||
if (!r.ok) { alert("Não foi possível gerar o documento."); return; }
|
||||
abrirDocumento(await r.json(), ultimosBloqueios.length > 0);
|
||||
});
|
||||
|
||||
// ---------- Validar JSON externo ----------
|
||||
function mostrarValidar() {
|
||||
esconderTodas();
|
||||
$("telaValidar").hidden = false;
|
||||
modoExterno = true;
|
||||
sdAtual = null;
|
||||
moverPainel("slotPainelValidar");
|
||||
if (externo?.exportado) renderPainel(externo.exportado, externo.validacao, externo.bloqueios);
|
||||
else resetPainel();
|
||||
}
|
||||
|
||||
async function validarExterno(lerTextarea = true) {
|
||||
const erroBox = $("validarErro");
|
||||
erroBox.hidden = true;
|
||||
let sdIn = externo?.sd;
|
||||
if (lerTextarea) {
|
||||
try {
|
||||
sdIn = JSON.parse($("jsonExterno").value);
|
||||
} catch (e) {
|
||||
erroBox.textContent = "JSON inválido: " + e.message;
|
||||
erroBox.hidden = false;
|
||||
return;
|
||||
}
|
||||
}
|
||||
const r = await fetch("/api/validar", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ sd: sdIn }),
|
||||
});
|
||||
if (exigirLogin(r)) return;
|
||||
const d = await r.json();
|
||||
if (!r.ok) {
|
||||
erroBox.textContent = d.erro || "Erro ao validar.";
|
||||
erroBox.hidden = false;
|
||||
return;
|
||||
}
|
||||
externo = { sd: sdIn, exportado: d.exportado, validacao: d.validacao, bloqueios: d.bloqueios };
|
||||
renderPainel(d.exportado, d.validacao, d.bloqueios);
|
||||
}
|
||||
|
||||
$("btnValidarJson").addEventListener("click", () => validarExterno(true));
|
||||
|
||||
$("btnImportarJson").addEventListener("click", () => $("arquivoJson").click());
|
||||
$("arquivoJson").addEventListener("change", async (ev) => {
|
||||
const arquivo = ev.target.files?.[0];
|
||||
ev.target.value = ""; // permite reimportar o mesmo arquivo depois
|
||||
if (!arquivo) return;
|
||||
const erroBox = $("validarErro");
|
||||
if (arquivo.size > 2 * 1024 * 1024) {
|
||||
erroBox.textContent = "Arquivo muito grande (máx. 2 MB).";
|
||||
erroBox.hidden = false;
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const texto = await arquivo.text();
|
||||
JSON.parse(texto); // valida a sintaxe antes de preencher
|
||||
$("jsonExterno").value = texto;
|
||||
erroBox.hidden = true;
|
||||
await validarExterno(true); // já valida a SD importada
|
||||
} catch (e) {
|
||||
erroBox.textContent = `O arquivo "${arquivo.name}" não contém JSON válido: ${e.message}`;
|
||||
erroBox.hidden = false;
|
||||
}
|
||||
});
|
||||
|
||||
$("btnLimparJson").addEventListener("click", () => {
|
||||
$("jsonExterno").value = "";
|
||||
externo = null;
|
||||
$("validarErro").hidden = true;
|
||||
resetPainel();
|
||||
});
|
||||
|
||||
$("btnVoltarValidar").addEventListener("click", () => { location.hash = "#/"; });
|
||||
|
||||
// ---------- Alimentar base de conhecimento (upload de SD real) ----------
|
||||
|
||||
function mostrarBase() {
|
||||
esconderTodas();
|
||||
$("telaBase").hidden = false;
|
||||
modoExterno = false;
|
||||
sdAtual = null;
|
||||
}
|
||||
|
||||
$("btnVoltarBase").addEventListener("click", () => { location.hash = "#/"; });
|
||||
$("btnEscolherDoc").addEventListener("click", () => $("arquivoDoc").click());
|
||||
|
||||
function baseErro(msg) {
|
||||
const box = $("baseErro");
|
||||
box.textContent = msg || "";
|
||||
box.hidden = !msg;
|
||||
}
|
||||
|
||||
$("arquivoDoc").addEventListener("change", async (ev) => {
|
||||
const arquivo = ev.target.files?.[0];
|
||||
ev.target.value = ""; // permite reenviar o mesmo arquivo
|
||||
if (!arquivo) return;
|
||||
baseErro("");
|
||||
$("baseOk").hidden = true;
|
||||
const ext = (arquivo.name.toLowerCase().match(/\.([a-z0-9]+)$/) || [])[1] || "";
|
||||
if (!["pdf", "md", "txt", "markdown"].includes(ext)) {
|
||||
baseErro(`Formato .${ext || "?"} não suportado — envie .pdf, .md ou .txt (para .docx, exporte como PDF).`);
|
||||
return;
|
||||
}
|
||||
if (arquivo.size > 15 * 1024 * 1024) {
|
||||
baseErro("Arquivo muito grande (máx. 15 MB).");
|
||||
return;
|
||||
}
|
||||
$("btnEscolherDoc").disabled = true;
|
||||
$("baseExtraindo").hidden = false;
|
||||
$("baseRevisao").hidden = true;
|
||||
try {
|
||||
const base64 = await new Promise((resolve, reject) => {
|
||||
const fr = new FileReader();
|
||||
fr.onload = () => resolve(String(fr.result).split(",")[1] || "");
|
||||
fr.onerror = () => reject(new Error("Falha ao ler o arquivo."));
|
||||
fr.readAsDataURL(arquivo);
|
||||
});
|
||||
const r = await fetch("/api/base/extrair", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ nome: arquivo.name, base64, modelo: $("selModeloBase").value }),
|
||||
});
|
||||
if (exigirLogin(r)) return;
|
||||
const d = await r.json();
|
||||
if (!r.ok) { baseErro(d.erro || "Erro na extração."); return; }
|
||||
renderRevisaoBase(d);
|
||||
if (d.uso) {
|
||||
const custo = ((d.uso.input_tokens || 0) * PRECO.input + (d.uso.output_tokens || 0) * PRECO.output) / 1e6;
|
||||
$("baseUso").textContent =
|
||||
`extração: ${(d.uso.input_tokens || 0).toLocaleString("pt-BR")} tokens lidos · ` +
|
||||
`${(d.uso.output_tokens || 0).toLocaleString("pt-BR")} gerados · custo estimado US$ ${custo.toFixed(3)} ` +
|
||||
`(estimativa válida para o modelo Opus)`;
|
||||
}
|
||||
} catch (e) {
|
||||
baseErro("Erro na extração: " + e.message);
|
||||
} finally {
|
||||
$("btnEscolherDoc").disabled = false;
|
||||
$("baseExtraindo").hidden = true;
|
||||
}
|
||||
});
|
||||
|
||||
function renderRevisaoBase(d) {
|
||||
$("baseRevisao").hidden = false;
|
||||
$("baseSdJson").value = JSON.stringify(d.sd || {}, null, 2);
|
||||
renderConferenciaBase(d.conferencia || []);
|
||||
|
||||
const obs = d.observacoes || [];
|
||||
$("baseObsBloco").hidden = !obs.length;
|
||||
$("baseObs").innerHTML = obs.map((o) => `<li>${esc(o)}</li>`).join("");
|
||||
|
||||
$("baseCaps").innerHTML = (d.capacidades || []).length
|
||||
? (d.capacidades || []).map((c, i) => `
|
||||
<div class="cap-card" data-i="${i}">
|
||||
<input type="checkbox" checked aria-label="Incluir capacidade">
|
||||
<div class="cap-main">
|
||||
<input type="text" class="cap-titulo" value="${esc(c.titulo || "")}" aria-label="Título da capacidade">
|
||||
<textarea class="cap-desc" rows="3" aria-label="Descrição da capacidade">${esc(c.descricao || "")}</textarea>
|
||||
<div class="cap-meta">
|
||||
<input type="text" class="cap-item" value="${esc(c.item_tr || "")}" aria-label="Item do TR" placeholder="item do TR (ex.: I-02)">
|
||||
<input type="text" class="cap-tags" value="${esc((c.tags || []).join(", "))}" aria-label="Tags" placeholder="tags separadas por vírgula">
|
||||
</div>
|
||||
</div>
|
||||
</div>`).join("")
|
||||
: '<p class="hint">Nenhuma capacidade reutilizável identificada no documento.</p>';
|
||||
$("baseCaps").querySelectorAll(".cap-card input[type=checkbox]").forEach((cb) =>
|
||||
cb.addEventListener("change", (ev) =>
|
||||
ev.target.closest(".cap-card").classList.toggle("excluida", !ev.target.checked)
|
||||
)
|
||||
);
|
||||
$("baseRevisao").scrollIntoView({ behavior: "smooth" });
|
||||
}
|
||||
|
||||
function renderConferenciaBase(lista) {
|
||||
const temErro = lista.some((c) => c.nivel === "erro");
|
||||
$("baseConferencia").innerHTML = lista.length
|
||||
? lista.map((c) => `<div class="check-item st-${c.nivel === "erro" ? "falha" : "alerta"}">
|
||||
<span class="icon">${c.nivel === "erro" ? "✗" : "!"}</span>
|
||||
<span class="id">${c.nivel}</span><span>${esc(c.msg)}</span></div>`).join("")
|
||||
: '<div class="check-item st-ok"><span class="icon">✓</span><span class="id">ok</span><span>Nenhuma inconsistência encontrada.</span></div>';
|
||||
$("btnGravarBase").disabled = temErro;
|
||||
return temErro;
|
||||
}
|
||||
|
||||
function lerSdRevisada() {
|
||||
try {
|
||||
return JSON.parse($("baseSdJson").value);
|
||||
} catch (e) {
|
||||
baseErro("JSON do registro inválido: " + e.message);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
function lerCapsRevisadas() {
|
||||
return [...$("baseCaps").querySelectorAll(".cap-card")]
|
||||
.filter((card) => card.querySelector("input[type=checkbox]").checked)
|
||||
.map((card) => ({
|
||||
titulo: card.querySelector(".cap-titulo").value.trim(),
|
||||
descricao: card.querySelector(".cap-desc").value.trim(),
|
||||
item_tr: card.querySelector(".cap-item").value.trim(),
|
||||
tags: card.querySelector(".cap-tags").value.split(",").map((t) => t.trim()).filter(Boolean),
|
||||
}))
|
||||
.filter((c) => c.titulo);
|
||||
}
|
||||
|
||||
$("btnReconferir").addEventListener("click", async () => {
|
||||
baseErro("");
|
||||
const sd = lerSdRevisada();
|
||||
if (!sd) return;
|
||||
const r = await fetch("/api/base/conferir", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ sd }),
|
||||
});
|
||||
if (exigirLogin(r)) return;
|
||||
const d = await r.json();
|
||||
renderConferenciaBase(d.conferencia || []);
|
||||
});
|
||||
|
||||
$("btnGravarBase").addEventListener("click", async () => {
|
||||
baseErro("");
|
||||
const sd = lerSdRevisada();
|
||||
if (!sd) return;
|
||||
const caps = lerCapsRevisadas();
|
||||
if (!confirm(`Gravar ${sd.id || "a SD"} na base de conhecimento` +
|
||||
(caps.length ? ` com ${caps.length} capacidade(s)` : "") +
|
||||
"? Saldos de pool e precedentes passam a valer nas próximas entrevistas.")) return;
|
||||
$("btnGravarBase").disabled = true;
|
||||
try {
|
||||
const r = await fetch("/api/base/gravar", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ sd, capacidades: caps }),
|
||||
});
|
||||
if (exigirLogin(r)) return;
|
||||
const d = await r.json();
|
||||
if (!r.ok) {
|
||||
if (d.conferencia) renderConferenciaBase(d.conferencia);
|
||||
baseErro(d.erro || "Erro ao gravar.");
|
||||
return;
|
||||
}
|
||||
const okBox = $("baseOk");
|
||||
okBox.textContent = `✓ ${d.sd.id} gravada na base` +
|
||||
(d.capacidades.length ? ` com ${d.capacidades.map((c) => c.id).join(", ")}` : "") +
|
||||
". Vale a partir da próxima conversa.";
|
||||
okBox.hidden = false;
|
||||
await carregarStatus(); // atualiza próxima numeração e saldos no topo
|
||||
} finally {
|
||||
$("btnGravarBase").disabled = false;
|
||||
}
|
||||
});
|
||||
|
||||
function renderUso(uso) {
|
||||
if (!uso) return;
|
||||
const custo =
|
||||
(uso.input_tokens * PRECO.input +
|
||||
uso.output_tokens * PRECO.output +
|
||||
uso.cache_read_input_tokens * PRECO.cache_read +
|
||||
uso.cache_creation_input_tokens * PRECO.cache_write) / 1e6;
|
||||
$("usoBox").textContent =
|
||||
`tokens: ${uso.input_tokens.toLocaleString("pt-BR")} in · ${uso.output_tokens.toLocaleString("pt-BR")} out · ` +
|
||||
`cache ${uso.cache_read_input_tokens.toLocaleString("pt-BR")} lidos / ${uso.cache_creation_input_tokens.toLocaleString("pt-BR")} gravados · ` +
|
||||
`custo estimado US$ ${custo.toFixed(3)} (estimativa válida para o modelo Opus)`;
|
||||
}
|
||||
@@ -0,0 +1,187 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="pt-BR">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Redator de SD — RMDS / SES-MG</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>📋</text></svg>" />
|
||||
</head>
|
||||
<body>
|
||||
<header class="appbar">
|
||||
<h1>Redator de SD</h1>
|
||||
<span class="sub">RMDS · PE 29/2025 — SES-MG × Isis Saúde</span>
|
||||
<span class="spacer"></span>
|
||||
<span id="statusChip" class="chip-status">carregando…</span>
|
||||
<a href="#/" id="navHome" class="btn btn-sm">Nova SD</a>
|
||||
<a href="#/validar" id="navValidar" class="btn btn-sm">Validar JSON</a>
|
||||
<a href="#/base" id="navBase" class="btn btn-sm">Base de Conhecimento</a>
|
||||
<button id="btnTema" class="btn btn-sm" type="button" title="Tema">🌗</button>
|
||||
<button id="btnSair" class="btn btn-sm" hidden>Sair</button>
|
||||
</header>
|
||||
|
||||
<!-- Aviso de configuração -->
|
||||
<div id="avisoConfig" class="aviso" hidden>
|
||||
⚠ Chave de API não configurada. Copie <code>app\.env.example</code> para <code>app\.env</code>,
|
||||
preencha <code>ANTHROPIC_API_KEY</code> e reinicie o servidor.
|
||||
</div>
|
||||
|
||||
<!-- Login (usuário único) -->
|
||||
<main id="telaLogin" hidden>
|
||||
<form id="formLogin" class="panel login-box">
|
||||
<h2>Entrar</h2>
|
||||
<label>Usuário<br><input type="text" id="loginUsuario" autocomplete="username" required></label>
|
||||
<label>Senha<br><input type="password" id="loginSenha" autocomplete="current-password" required></label>
|
||||
<div id="loginErro" class="login-erro" hidden></div>
|
||||
<button type="submit" class="btn btn-primary" id="btnLogin">Entrar</button>
|
||||
</form>
|
||||
</main>
|
||||
|
||||
<!-- Tela inicial: lista + nova demanda -->
|
||||
<main id="telaHome" hidden>
|
||||
<section class="panel nova-demanda">
|
||||
<h2>Nova SD</h2>
|
||||
<p class="hint">Cole a demanda do jeito que ela chegou — trecho de ata, e-mail encaminhado, mensagem.
|
||||
Não precisa organizar. O redator lê, compara com a base e pergunta só o que faltar.</p>
|
||||
<textarea id="demandaInput" rows="5" placeholder="Ex.: a secretaria quer implementar um sistema de..."></textarea>
|
||||
<div class="btnrow">
|
||||
<button id="btnIniciar" class="btn btn-primary">Iniciar entrevista</button>
|
||||
<label class="sel-modelo">Modelo
|
||||
<select id="selModelo"></select>
|
||||
</label>
|
||||
</div>
|
||||
<p class="hint" style="margin:8px 0 0">O modelo fica fixo para a SD inteira (trocar no meio
|
||||
descartaria o cache da conversa). Lista configurável em <code>LLM_MODELOS</code> no .env.</p>
|
||||
</section>
|
||||
<section class="panel">
|
||||
<h2>SDs em andamento</h2>
|
||||
<div id="listaSds" class="lista-sds"></div>
|
||||
</section>
|
||||
<section class="panel">
|
||||
<h2>Saldo dos pools de UST</h2>
|
||||
<div id="saldosBox" class="saldos"></div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!-- Tela da entrevista: chat + painel -->
|
||||
<main id="telaConversa" class="conversa" hidden>
|
||||
<section class="coluna-chat">
|
||||
<div id="mensagens" class="mensagens"></div>
|
||||
<div id="opcoes" class="opcoes"></div>
|
||||
<form id="formMsg" class="form-msg">
|
||||
<textarea id="msgInput" rows="2" placeholder="Responda ao redator… (Enter envia, Shift+Enter quebra linha)"></textarea>
|
||||
<button type="submit" class="btn btn-primary" id="btnEnviarMsg">Enviar</button>
|
||||
</form>
|
||||
<div id="usoBox" class="uso"></div>
|
||||
</section>
|
||||
<aside class="coluna-painel" id="slotPainelConversa">
|
||||
<div id="painel">
|
||||
<div class="painel-vazio" id="painelVazio">O painel do documento aparece aqui assim que o redator
|
||||
registrar os primeiros campos da SD.</div>
|
||||
<div id="painelConteudo" hidden>
|
||||
<section class="pbloco" id="pResumo"></section>
|
||||
<section class="pbloco">
|
||||
<h3>Quadro de entregáveis</h3>
|
||||
<div id="pQuadro" class="twrap"></div>
|
||||
</section>
|
||||
<section class="pbloco">
|
||||
<h3>Trava de integridade — artefatos</h3>
|
||||
<div id="pArtefatos"></div>
|
||||
</section>
|
||||
<section class="pbloco">
|
||||
<h3>Checklist de validação</h3>
|
||||
<div id="pChecklist"></div>
|
||||
</section>
|
||||
<section class="pbloco">
|
||||
<h3>Pendências</h3>
|
||||
<ul id="pPendencias" class="pend-list"></ul>
|
||||
</section>
|
||||
<section class="pbloco" id="pExport">
|
||||
<h3>Fechamento</h3>
|
||||
<div id="pBloqueios" class="lock-msg"></div>
|
||||
<div class="btnrow">
|
||||
<button class="btn" id="btnDocumento">Documento / imprimir (PDF)</button>
|
||||
<button class="btn" id="btnBaixar">Baixar .json</button>
|
||||
<button class="btn btn-primary" id="btnEnviarSd">Marcar como enviada</button>
|
||||
</div>
|
||||
<p class="hint" style="margin-top:8px">O documento abre em uma aba pronta para imprimir
|
||||
(Ctrl+P → salvar como PDF). Enquanto houver pendência bloqueante, ele sai com marca de rascunho.</p>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</main>
|
||||
|
||||
<!-- Validação de JSON externo -->
|
||||
<main id="telaValidar" class="conversa" hidden>
|
||||
<section class="coluna-chat">
|
||||
<div class="panel">
|
||||
<h2>Validar JSON externo</h2>
|
||||
<p class="hint">Cole aqui o JSON de uma SD que não nasceu neste app (ex.: redigida no Claude ou
|
||||
recebida de um colega). O app recalcula UST e datas, roda o checklist do contrato e libera o
|
||||
documento para impressão — sem salvar nada.</p>
|
||||
<textarea id="jsonExterno" rows="14" spellcheck="false"
|
||||
placeholder='Cole o JSON da SD (formato schema-sd.json)…'></textarea>
|
||||
<div id="validarErro" class="login-erro" hidden></div>
|
||||
<div class="btnrow" style="margin-top:10px">
|
||||
<button class="btn btn-primary" id="btnValidarJson">Validar</button>
|
||||
<button class="btn" id="btnImportarJson">Importar JSON</button>
|
||||
<button class="btn" id="btnLimparJson">Limpar</button>
|
||||
<button class="btn" id="btnVoltarValidar">Voltar</button>
|
||||
</div>
|
||||
<input type="file" id="arquivoJson" accept=".json,application/json" hidden>
|
||||
</div>
|
||||
</section>
|
||||
<aside class="coluna-painel" id="slotPainelValidar"></aside>
|
||||
</main>
|
||||
|
||||
<!-- Alimentar base de conhecimento: upload de SD real → extração → revisão → gravação -->
|
||||
<main id="telaBase" hidden>
|
||||
<section class="panel">
|
||||
<h2>Alimentar base de conhecimento</h2>
|
||||
<p class="hint">Envie o documento de uma SD real (<strong>.pdf</strong>, <strong>.md</strong> ou <strong>.txt</strong> —
|
||||
se estiver em .docx, exporte como PDF). O app lê o documento, extrai o registro estruturado
|
||||
(itens, UST por item, período, status) e sugere capacidades reutilizáveis. Nada é gravado
|
||||
sem a sua revisão abaixo.</p>
|
||||
<div class="btnrow">
|
||||
<button class="btn btn-primary" id="btnEscolherDoc">Enviar documento</button>
|
||||
<label class="sel-modelo">Modelo
|
||||
<select id="selModeloBase"></select>
|
||||
</label>
|
||||
<button class="btn" id="btnVoltarBase">Voltar</button>
|
||||
</div>
|
||||
<input type="file" id="arquivoDoc" accept=".pdf,.md,.txt,application/pdf,text/markdown,text/plain" hidden>
|
||||
<div id="baseErro" class="login-erro" hidden style="margin-top:10px"></div>
|
||||
<div id="baseExtraindo" class="hint" hidden style="margin-top:10px">⏳ Lendo o documento e extraindo o registro… isso leva de 30 segundos a 2 minutos.</div>
|
||||
<div id="baseUso" class="uso" style="margin-top:6px"></div>
|
||||
</section>
|
||||
|
||||
<section class="panel" id="baseRevisao" hidden>
|
||||
<h2>Revisão antes de gravar</h2>
|
||||
<div class="pbloco">
|
||||
<h3>Conferência (em código)</h3>
|
||||
<div id="baseConferencia"></div>
|
||||
</div>
|
||||
<div class="pbloco" id="baseObsBloco" hidden>
|
||||
<h3>Observações do extrator</h3>
|
||||
<ul id="baseObs" class="pend-list"></ul>
|
||||
</div>
|
||||
<div class="pbloco">
|
||||
<h3>Registro da SD (edite se necessário e reconfira)</h3>
|
||||
<textarea id="baseSdJson" rows="16" spellcheck="false"></textarea>
|
||||
</div>
|
||||
<div class="pbloco">
|
||||
<h3>Capacidades sugeridas (desmarque as que não devem entrar)</h3>
|
||||
<div id="baseCaps"></div>
|
||||
</div>
|
||||
<div class="btnrow">
|
||||
<button class="btn" id="btnReconferir">Reconferir</button>
|
||||
<button class="btn btn-primary" id="btnGravarBase">Gravar na base</button>
|
||||
</div>
|
||||
<div id="baseOk" class="lock-msg open" hidden style="margin-top:10px"></div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<script src="app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,168 @@
|
||||
/* Tema: claro é o padrão; o escuro vale quando o usuário escolhe (data-theme="dark")
|
||||
ou quando o sistema está escuro e o usuário não forçou o claro (data-theme="light").
|
||||
O botão 🌗 do topo alterna automático → claro → escuro (persistido em localStorage). */
|
||||
:root{
|
||||
color-scheme:light;
|
||||
--bg:#F2F6F5; --surface:#FFFFFF; --ink:#1C2A2D; --muted:#5C6B6E;
|
||||
--line:#D7E1DF; --accent:#0B6B70; --accent-soft:#E1EFEF; --accent-ink:#FFFFFF;
|
||||
--ok:#1E7B47; --ok-bg:#E3F2E9; --warn:#A8730B; --warn-bg:#F8EFDB;
|
||||
--err:#B3362B; --err-bg:#F9E4E1; --pend:#5E6E78; --pend-bg:#E8EDF0;
|
||||
--shadow:0 1px 3px rgba(28,42,45,.08);
|
||||
--sans:"Segoe UI",system-ui,-apple-system,sans-serif;
|
||||
--mono:Consolas,"Cascadia Mono",ui-monospace,monospace;
|
||||
}
|
||||
:root[data-theme="dark"]{
|
||||
color-scheme:dark;
|
||||
--bg:#0E191B; --surface:#152325; --ink:#E3EDEB; --muted:#94A6A4;
|
||||
--line:#25393C; --accent:#56C4CA; --accent-soft:#123B3E; --accent-ink:#08282A;
|
||||
--ok:#54C88A; --ok-bg:#123626; --warn:#E2AC42; --warn-bg:#3A2D0F;
|
||||
--err:#E3705F; --err-bg:#41201C; --pend:#9AA8B2; --pend-bg:#22313A;
|
||||
--shadow:0 1px 3px rgba(0,0,0,.35);
|
||||
}
|
||||
@media (prefers-color-scheme: dark){
|
||||
:root:not([data-theme="light"]){
|
||||
color-scheme:dark;
|
||||
--bg:#0E191B; --surface:#152325; --ink:#E3EDEB; --muted:#94A6A4;
|
||||
--line:#25393C; --accent:#56C4CA; --accent-soft:#123B3E; --accent-ink:#08282A;
|
||||
--ok:#54C88A; --ok-bg:#123626; --warn:#E2AC42; --warn-bg:#3A2D0F;
|
||||
--err:#E3705F; --err-bg:#41201C; --pend:#9AA8B2; --pend-bg:#22313A;
|
||||
--shadow:0 1px 3px rgba(0,0,0,.35);
|
||||
}
|
||||
}
|
||||
*{box-sizing:border-box}
|
||||
[hidden]{display:none !important}
|
||||
html,body{height:100%}
|
||||
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans); line-height:1.5; display:flex; flex-direction:column;}
|
||||
button{font-family:var(--sans); cursor:pointer;}
|
||||
button:focus-visible, a:focus-visible, textarea:focus-visible, input:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
|
||||
textarea, select, input[type=date], input[type=text]{font-family:var(--sans); font-size:14px; background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:6px; padding:8px 10px;}
|
||||
.sel-modelo{display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--muted);}
|
||||
.sel-modelo select{font-family:var(--mono); font-size:12.5px; padding:7px 8px;}
|
||||
textarea{width:100%; resize:vertical;}
|
||||
|
||||
.appbar{background:var(--surface); border-bottom:1px solid var(--line); padding:10px 20px; display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
|
||||
.appbar h1{font-size:16px; margin:0;}
|
||||
.appbar .sub{color:var(--muted); font-size:12px;}
|
||||
.appbar .spacer{flex:1;}
|
||||
.chip-status{font-size:12px; color:var(--muted); font-family:var(--mono);}
|
||||
|
||||
.aviso{background:var(--warn-bg); color:var(--warn); padding:10px 20px; font-size:14px;}
|
||||
.aviso code{font-family:var(--mono);}
|
||||
|
||||
.btn{border:1px solid var(--line); background:var(--surface); color:var(--ink); border-radius:6px; padding:8px 16px; font-size:14px; font-weight:600; text-decoration:none; display:inline-block;}
|
||||
.btn:hover{border-color:var(--accent);}
|
||||
.btn-sm{padding:4px 12px; font-size:13px;}
|
||||
.btn-primary{background:var(--accent); border-color:var(--accent); color:var(--accent-ink);}
|
||||
.btn-primary:hover{filter:brightness(1.08);}
|
||||
.btn:disabled{opacity:.45; cursor:not-allowed;}
|
||||
.btnrow{display:flex; gap:10px; flex-wrap:wrap;}
|
||||
|
||||
.panel{background:var(--surface); border:1px solid var(--line); border-radius:8px; box-shadow:var(--shadow); padding:16px 20px;}
|
||||
.panel h2{font-size:14px; margin:0 0 10px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted);}
|
||||
.hint{font-size:13px; color:var(--muted); margin:0 0 10px;}
|
||||
|
||||
/* --- Login --- */
|
||||
#telaLogin{flex:1; display:flex; align-items:center; justify-content:center; padding:20px;}
|
||||
.login-box{width:100%; max-width:340px; display:flex; flex-direction:column; gap:12px;}
|
||||
.login-box label{font-size:13px; color:var(--muted);}
|
||||
.login-box input{width:100%; margin-top:4px;}
|
||||
.login-erro{background:var(--err-bg); color:var(--err); border-radius:6px; padding:8px 12px; font-size:13px;}
|
||||
|
||||
/* --- Home --- */
|
||||
#telaHome, #telaBase{max-width:860px; width:100%; margin:0 auto; padding:20px; display:flex; flex-direction:column; gap:16px;}
|
||||
.nova-demanda textarea{margin-bottom:10px;}
|
||||
.lista-sds{display:flex; flex-direction:column; gap:6px;}
|
||||
.sd-item{display:flex; gap:12px; align-items:baseline; padding:8px 10px; border:1px solid var(--line); border-radius:6px; text-decoration:none; color:var(--ink);}
|
||||
.sd-item:hover{border-color:var(--accent); background:var(--accent-soft);}
|
||||
.sd-item .num{font-family:var(--mono); font-size:12px; color:var(--accent); white-space:nowrap;}
|
||||
.sd-item .tit{flex:1; font-size:14px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
|
||||
.sd-item .st{font-size:11px; border-radius:10px; padding:1px 8px;}
|
||||
.sd-item .btn-excluir{border:1px solid var(--line); background:var(--surface); color:var(--muted);
|
||||
border-radius:6px; font-size:12px; line-height:1; padding:4px 8px; align-self:center; flex:0 0 auto;}
|
||||
.sd-item .btn-excluir:hover{border-color:var(--err); color:var(--err); background:var(--err-bg);}
|
||||
.st-rascunho{background:var(--warn-bg); color:var(--warn);}
|
||||
.st-enviada{background:var(--ok-bg); color:var(--ok);}
|
||||
.saldos{display:flex; gap:10px; flex-wrap:wrap;}
|
||||
.saldo-chip{border:1px solid var(--line); border-radius:8px; padding:8px 14px; min-width:130px;}
|
||||
.saldo-chip .label{font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted);}
|
||||
.saldo-chip .value{font-size:17px; font-weight:700; font-variant-numeric:tabular-nums;}
|
||||
.saldo-chip .sub{font-size:11px; color:var(--muted);}
|
||||
|
||||
/* --- Conversa --- */
|
||||
.conversa{flex:1; display:grid; grid-template-columns:minmax(0,1fr) 420px; gap:0; min-height:0;}
|
||||
@media (max-width: 980px){ .conversa{grid-template-columns:1fr;} .coluna-painel{border-left:none; border-top:1px solid var(--line);} }
|
||||
.coluna-chat{display:flex; flex-direction:column; min-height:0; padding:16px 20px; gap:10px;}
|
||||
.mensagens{flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:12px; padding-right:4px; min-height:200px;}
|
||||
.msg{max-width:92%; padding:10px 14px; border-radius:10px; font-size:14px;}
|
||||
.msg.user{align-self:flex-end; background:var(--accent-soft); border:1px solid var(--line); white-space:pre-wrap;}
|
||||
.msg.assistant{align-self:flex-start; background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow);}
|
||||
.msg.assistant p{margin:0 0 8px;} .msg.assistant p:last-child{margin-bottom:0;}
|
||||
.msg.assistant ul,.msg.assistant ol{margin:4px 0 8px; padding-left:20px;}
|
||||
.msg.assistant li{margin-bottom:2px;}
|
||||
.msg.assistant h1,.msg.assistant h2,.msg.assistant h3{font-size:14.5px; margin:10px 0 4px;}
|
||||
.msg.assistant code{font-family:var(--mono); font-size:12.5px; background:var(--bg); padding:0 4px; border-radius:4px;}
|
||||
.msg.assistant strong{color:var(--accent);}
|
||||
.msg .digitando{display:inline-block; animation:pulse 1s infinite;}
|
||||
.msg .pensando{display:inline-block; color:var(--muted); font-style:italic; font-size:13px; animation:pulse 1.4s infinite;}
|
||||
@keyframes pulse{50%{opacity:.3}}
|
||||
@media (prefers-reduced-motion: reduce){ .msg .digitando{animation:none;} }
|
||||
.opcoes{display:flex; flex-direction:column; gap:6px;}
|
||||
.opcoes button{text-align:left; background:var(--surface); border:1px solid var(--accent); color:var(--ink); border-radius:8px; padding:8px 14px; font-size:13.5px;}
|
||||
.opcoes button:hover{background:var(--accent-soft);}
|
||||
.form-msg{display:flex; gap:8px; align-items:flex-end;}
|
||||
.form-msg textarea{flex:1;}
|
||||
.uso{font-size:11.5px; color:var(--muted); font-family:var(--mono);}
|
||||
|
||||
/* --- Painel --- */
|
||||
.coluna-painel{border-left:1px solid var(--line); background:var(--surface); overflow-y:auto; padding:16px 18px;}
|
||||
.painel-vazio{color:var(--muted); font-size:13.5px; padding:30px 10px; text-align:center;}
|
||||
.pbloco{margin-bottom:18px;}
|
||||
.pbloco h3{font-size:12px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); margin:0 0 8px;}
|
||||
.resumo-chips{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:6px;}
|
||||
.rchip{border:1px solid var(--line); border-radius:8px; padding:6px 12px;}
|
||||
.rchip .label{font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted);}
|
||||
.rchip .value{font-size:15px; font-weight:700; font-variant-numeric:tabular-nums;}
|
||||
.ptitulo{font-size:14.5px; font-weight:700; margin-bottom:8px;}
|
||||
.twrap{overflow-x:auto;}
|
||||
table.quadro{border-collapse:collapse; width:100%; font-size:12px; font-variant-numeric:tabular-nums;}
|
||||
table.quadro th, table.quadro td{border:1px solid var(--line); padding:4px 7px; text-align:left; vertical-align:top;}
|
||||
table.quadro th{font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; background:var(--accent-soft);}
|
||||
table.quadro td.num{text-align:right;}
|
||||
table.quadro tr.total td{font-weight:700; border-top:2px solid var(--accent);}
|
||||
table.quadro tr.subtotal td{font-weight:600; background:var(--accent-soft);}
|
||||
|
||||
.check-item{display:grid; grid-template-columns:18px 56px 1fr; gap:6px; padding:4px 0; border-top:1px solid var(--line); font-size:12.5px; align-items:start;}
|
||||
.check-item:first-child{border-top:none;}
|
||||
.check-item .icon{font-weight:700; text-align:center;}
|
||||
.check-item .id{font-family:var(--mono); font-size:10.5px; color:var(--muted); padding-top:2px;}
|
||||
.check-item .obs{display:block; color:var(--muted); font-size:11.5px;}
|
||||
.st-ok .icon{color:var(--ok);} .st-alerta .icon{color:var(--warn);}
|
||||
.st-falha .icon{color:var(--err);} .st-pendente .icon{color:var(--pend);}
|
||||
|
||||
.art-entr{margin-bottom:10px;}
|
||||
.art-entr h4{font-size:12px; margin:0 0 4px;}
|
||||
.art-row{display:flex; gap:8px; align-items:flex-start; padding:5px 8px; border-radius:6px; font-size:12.5px; margin-bottom:3px;}
|
||||
.art-row.confirmed{background:var(--ok-bg);}
|
||||
.art-row.unconfirmed{background:var(--warn-bg);}
|
||||
.art-row input[type=checkbox]{margin-top:3px; accent-color:var(--accent); width:15px; height:15px; flex:0 0 auto;}
|
||||
.art-row .art-main{flex:1; min-width:0;}
|
||||
.art-row label{cursor:pointer; display:block;}
|
||||
.art-row input[type=date]{font-family:var(--mono); font-size:11.5px; margin-top:3px; padding:2px 6px;}
|
||||
.art-row .flag{font-size:11px; margin-top:2px;}
|
||||
.flag.bad{color:var(--err);} .flag.miss{color:var(--warn);}
|
||||
|
||||
/* --- Alimentar base --- */
|
||||
.cap-card{border:1px solid var(--line); border-radius:8px; padding:10px 12px; margin-bottom:8px;
|
||||
display:flex; gap:10px; align-items:flex-start;}
|
||||
.cap-card input[type=checkbox]{margin-top:4px; accent-color:var(--accent); width:16px; height:16px; flex:0 0 auto;}
|
||||
.cap-card .cap-main{flex:1; min-width:0; display:flex; flex-direction:column; gap:6px;}
|
||||
.cap-card input[type=text]{width:100%; font-weight:600;}
|
||||
.cap-card textarea{font-size:13px;}
|
||||
.cap-card .cap-meta{display:flex; gap:8px; flex-wrap:wrap;}
|
||||
.cap-card .cap-meta input{flex:1; min-width:120px; font-size:12.5px; font-family:var(--mono);}
|
||||
.cap-card.excluida{opacity:.45;}
|
||||
|
||||
.pend-list{margin:0; padding-left:18px; font-size:12.5px; display:flex; flex-direction:column; gap:5px;}
|
||||
.lock-msg{font-size:12.5px; border-radius:6px; padding:8px 11px; margin-bottom:10px;}
|
||||
.lock-msg.locked{background:var(--warn-bg); color:var(--warn);}
|
||||
.lock-msg.open{background:var(--ok-bg); color:var(--ok);}
|
||||
Reference in New Issue
Block a user