{renderInlineMarkdown(cell)}
{renderInlineMarkdown(cell)}

Item	Valor
{item.label}	{formatChartValue(item.value)}

{h}
{String(c)}

); continue; } if (/^\s*\|.+\|\s*$/.test(line)) { const table = []; while (i < lines.length && /^\s*\|.+\|\s*$/.test(lines[i])) table.push(lines[i++]); i--; out.push(); continue; } const heading = line.match(/^(#{2,3})\s+(.+)$/); if (heading) { const Tag = heading[1].length === 2 ? "h3" : "h4"; out.push({renderInlineMarkdown(heading[2])}); continue; } const bullet = line.match(/^\s*[-•]\s+(.+)$/); if (bullet) { out.push(

{renderInlineMarkdown(bullet[1])}

); continue; } const numbered = line.match(/^\s*(\d+)\.\s+(.+)$/); if (numbered) { out.push(

{numbered[1]}{renderInlineMarkdown(numbered[2])}

); continue; } out.push(

{renderInlineMarkdown(line)}

); } return ( <> {out} ); } function MessageCharts({ text, charts }) { const parsed = splitMessageCharts(text); const explicit = Array.isArray(charts) ? charts : []; const all = [...explicit, ...parsed.charts]; if (!all.length) return null; return <>{all.map((chart, i) => )}; } function MessageBubble({ msg, connectedIds, onConnect, onOpenFlow }) { if (msg.role === "user") { const atts = msg.attachments || []; return (

{atts.length > 0 && (

{atts.map((a, i) => ( a.kind === "image" && a.url ? (

) : a.kind === "audio" && a.url ? (

{a.name}

) : (

{a.name}

) ))}

)} {msg.text &&

{msg.text}

}

); } return (

{msg.thinking ? (

{msg.thinkingText || "Pensando…"}

) : (

{msg.cta && ( )}

)} {msg.via && via {msg.via}}

); } Object.assign(window, { Avatar, IconRail, ChatListPanel, ProviderDropdown, ConnectorDots, StarterChip, SuggestionCard, MessageBubble, MessageConnections, RichMessageText, }); /* ===== api.jsx ===== */ // api.jsx — cliente de sessao + auth para o protótipo (sem bundler). // Fala com os endpoints /api/auth/* e guarda a sessao no localStorage. // Exporta para window: kbApi, kbAuth. const KB_SESSION_KEY = "kb_session"; const kbApi = { getSession() { try { const raw = window.localStorage.getItem(KB_SESSION_KEY); return raw ? JSON.parse(raw) : null; } catch (e) { return null; } }, setSession(session, { persist = true } = {}) { if (!session) return; try { // "Manter conectado" desligado: nao persiste o refresh_token entre sessoes. const toStore = persist ? session : { ...session, refreshToken: null }; window.localStorage.setItem(KB_SESSION_KEY, JSON.stringify(toStore)); } catch (e) { /* storage indisponivel — segue em memoria */ } }, clearSession() { try { window.localStorage.removeItem(KB_SESSION_KEY); } catch (e) {} }, token() { const s = kbApi.getSession(); return s && s.accessToken ? s.accessToken : null; }, // fetch autenticado com auto-refresh unico em 401. async authFetch(path, opts = {}, _retried = false) { const session = kbApi.getSession(); const headers = Object.assign({}, opts.headers || {}); if (session && session.accessToken) headers["Authorization"] = "Bearer " + session.accessToken; if (opts.body && !headers["Content-Type"]) headers["Content-Type"] = "application/json"; const res = await fetch(path, Object.assign({}, opts, { headers })); if (res.status === 401 && !_retried && session && session.refreshToken) { const refreshed = await kbApi.refresh(session.refreshToken); if (refreshed) return kbApi.authFetch(path, opts, true); } return res; }, async refresh(refreshToken) { try { const res = await fetch("/api/auth/refresh", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ refresh_token: refreshToken }) }); if (!res.ok) { kbApi.clearSession(); return null; } const data = await res.json(); if (data && data.session) { kbApi.setSession(data.session); return data.session; } return null; } catch (e) { return null; } } }; async function postJson(path, body) { const res = await fetch(path, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(body || {}) }); const data = await res.json().catch(() => ({})); if (!res.ok) throw new Error((data && data.error) || "Falha na requisicao."); return data; } const kbAuth = { // email + senha (login | signup) async password({ mode, email, password, name }) { return postJson("/api/auth/password", { mode, email, password, name }); }, // codigo por e-mail (OTP) async otpSend({ email, mode, name }) { return postJson("/api/auth/otp/send", { email, mode, name }); }, async otpVerify({ email, token }) { return postJson("/api/auth/otp/verify", { email, token }); }, // recuperacao de senha async recover(email) { return postJson("/api/auth/recover", { email }); }, // Google OAuth — retorna { url } para redirecionar a janela de topo async oauth(provider = "google") { return postJson("/api/auth/oauth", { provider }); }, // valida a sessao atual; retorna { user } ou lanca async session() { const res = await kbApi.authFetch("/api/auth/session", { method: "GET" }); if (!res.ok) throw new Error("unauthenticated"); return res.json(); }, async signout() { try { await kbApi.authFetch("/api/auth/signout", { method: "POST" }); } catch (e) {} kbApi.clearSession(); } }; const kbConnectors = { // lista catalogo + status de conexao do usuario async list() { const res = await kbApi.authFetch("/api/connectors", { method: "GET" }); if (!res.ok) throw new Error("Falha ao carregar conectores."); return res.json(); }, async connect(connectorId, credentials) { const res = await kbApi.authFetch("/api/connectors/connect", { method: "POST", body: JSON.stringify({ connectorId, credentials: credentials || {} }) }); const data = await res.json().catch(() => ({})); if (!res.ok) throw new Error((data && data.error) || "Falha ao conectar."); return data; }, async test(connectorId, credentials) { const res = await kbApi.authFetch("/api/connectors/test", { method: "POST", body: JSON.stringify({ connectorId, credentials }) }); return res.json().catch(() => ({ ok: false })); }, async disconnect(connectorId) { const res = await kbApi.authFetch("/api/connectors/disconnect", { method: "POST", body: JSON.stringify({ connectorId }) }); return res.ok; }, async oauthStart(connectorId, returnTo) { const res = await kbApi.authFetch("/api/connectors/oauth/start", { method: "POST", body: JSON.stringify({ connectorId, returnTo }) }); const data = await res.json().catch(() => ({})); if (!res.ok) throw new Error((data && data.error) || "OAuth indisponivel."); return data; // { url } }, async health(connectorId) { const res = await kbApi.authFetch("/api/connectors/health", { method: "POST", body: JSON.stringify(connectorId ? { connectorId } : {}) }); return res.json().catch(() => ({ ok: false })); } }; // reavalia um workflow apos conexoes (auto-continuar) const kbChat = { async continueWorkflow(workflow) { const res = await kbApi.authFetch("/api/chat/continue", { method: "POST", body: JSON.stringify(workflow && workflow.id ? { workflowId: workflow.id, workflow } : { workflow }) }); const data = await res.json().catch(() => ({})); if (!res.ok) throw new Error((data && data.error) || "Falha ao continuar."); return data; } }; const kbApprovals = { async confirm(approvalId) { const res = await kbApi.authFetch("/api/chat/approvals/" + encodeURIComponent(approvalId) + "/confirm", { method: "POST", body: "{}" }); const data = await res.json().catch(() => ({})); if (!res.ok) throw new Error(data.error || "Falha ao confirmar acao."); return data; } }; const kbAgents = { async list() { const res = await kbApi.authFetch("/api/agents", { method: "GET" }); if (!res.ok) throw new Error("Falha ao carregar agents."); return res.json(); }, async create(agent) { const res = await kbApi.authFetch("/api/agents", { method: "POST", body: JSON.stringify(agent) }); const data = await res.json().catch(() => ({})); if (!res.ok) throw new Error(data.error || "Falha ao criar agent."); return data; }, async update(id, patch) { const res = await kbApi.authFetch("/api/agents/" + encodeURIComponent(id), { method: "PATCH", body: JSON.stringify(patch) }); const data = await res.json().catch(() => ({})); if (!res.ok) throw new Error(data.error || "Falha ao editar agent."); return data; }, async remove(id) { const res = await kbApi.authFetch("/api/agents/" + encodeURIComponent(id), { method: "DELETE" }); const data = await res.json().catch(() => ({})); if (!res.ok) throw new Error(data.error || "Falha ao excluir agent."); return data; } }; const kbWorkflows = { // executa o workflow de verdade (motor real + credenciais dos conectores conectados) async run(id, body) { const res = await kbApi.authFetch("/api/workflows/" + encodeURIComponent(id) + "/run", { method: "POST", body: JSON.stringify(body || {}) }); const data = await res.json().catch(() => ({})); if (!res.ok) throw new Error((data && data.error) || "Falha ao executar o workflow."); return data; // { run } }, // publica o workflow (versao imutavel) — passa a ser elegivel ao agendador (cron) async publish(id) { const res = await kbApi.authFetch("/api/workflows/" + encodeURIComponent(id) + "/publish", { method: "POST", body: "{}" }); const data = await res.json().catch(() => ({})); if (!res.ok) { const error = new Error((data && data.error) || "Falha ao publicar o workflow."); error.data = data; throw error; } return data; // { ok, version, versionId, webhookUrl, issues } }, async remove(id, force) { const qs = force ? "?force=true" : ""; const res = await kbApi.authFetch("/api/workflows/" + encodeURIComponent(id) + qs, { method: "DELETE" }); const data = await res.json().catch(() => ({})); if (!res.ok) { const error = new Error(data.error || "Falha ao excluir flow."); error.data = data; throw error; } return data; } }; const kbBilling = { async summary() { const res = await kbApi.authFetch("/api/billing", { method: "GET" }); if (!res.ok) throw new Error("Falha ao carregar billing."); return res.json(); }, // Assinatura: inicia checkout do plano e devolve a URL do Stripe (ou modo demo). async checkout(planId) { const res = await kbApi.authFetch("/api/billing/checkout", { method: "POST", body: JSON.stringify({ planId }) }); const data = await res.json(); if (!res.ok) throw new Error(data.error || "Falha ao iniciar o checkout."); return data; // { mode, url } }, // Portal do cliente (gerir assinatura/cartao/cancelamento). async portal() { const res = await kbApi.authFetch("/api/billing/portal", { method: "POST", body: "{}" }); const data = await res.json(); if (!res.ok) throw new Error(data.error || "Falha ao abrir o portal."); return data; }, // Creditos de IA: saldo atual + pacotes disponiveis. async credits() { const res = await kbApi.authFetch("/api/billing/credits", { method: "GET" }); if (!res.ok) throw new Error("Falha ao carregar creditos."); return res.json(); // { balance, packs } }, // Recarga de creditos: inicia o checkout do pacote e devolve a URL do Stripe. async buyCredits(packId) { const res = await kbApi.authFetch("/api/billing/credits", { method: "POST", body: JSON.stringify({ packId }) }); const data = await res.json(); if (!res.ok) throw new Error(data.error || "Falha ao comprar creditos."); return data; // { mode, url } } }; const kbMetrics = { async org(days = 30) { const res = await kbApi.authFetch("/api/org/metrics?days=" + days, { method: "GET" }); if (!res.ok) throw new Error("Falha ao carregar metricas."); return res.json(); } }; const kbRuns = { async detail(runId) { const res = await kbApi.authFetch("/api/runs/" + encodeURIComponent(runId), { method: "GET" }); if (!res.ok) throw new Error("Falha ao carregar execucao."); return res.json(); }, async cancel(runId) { const res = await kbApi.authFetch("/api/workflows/runs/" + encodeURIComponent(runId) + "/cancel", { method: "POST", body: "{}" }); return res.ok; } }; Object.assign(window, { kbApi, kbAuth, kbConnectors, kbChat, kbApprovals, kbAgents, kbWorkflows, kbBilling, kbMetrics, kbRuns }); /* ===== auth.jsx ===== */ // auth.jsx — Kobar Flows login / signup screen const { useState: useStateAu, useRef: useRefAu, useEffect: useEffectAu } = React; function GoogleG({ size = 18 }) { return ( ); } function Field({ icon, type = "text", value, onChange, placeholder, label, autoFocus, rightSlot, disabled }) { return ( {label} onChange(e.target.value)} placeholder={placeholder} /> {rightSlot} ); } function AuthScreen({ onAuth }) { const [mode, setMode] = useStateAu("login"); // login | signup const [flow, setFlow] = useStateAu("form"); // form | code const [show, setShow] = useStateAu(false); const [name, setName] = useStateAu(""); const [email, setEmail] = useStateAu(""); const [pass, setPass] = useStateAu(""); const [code, setCode] = useStateAu(["", "", "", "", "", ""]); const [remember, setRemember] = useStateAu(true); const [cooldown, setCooldown] = useStateAu(0); const [busy, setBusy] = useStateAu(""); // "" | "password" | "google" | "otp" | "verify" | "recover" const [error, setError] = useStateAu(""); const [info, setInfo] = useStateAu(""); const codeRefs = useRefAu([]); const clearMsgs = () => { setError(""); setInfo(""); }; useEffectAu(() => { if (cooldown <= 0) return; const id = setInterval(() => setCooldown((value) => Math.max(0, value - 1)), 1000); return () => clearInterval(id); }, [cooldown]); // sucesso de auth: persiste sessao e sobe para o App const handleSession = (data) => { if (data && data.session) { kbApi.setSession(data.session, { persist: remember }); onAuth(data.session); return true; } return false; }; const submit = async (e) => { e && e.preventDefault(); if (busy || cooldown > 0) return; clearMsgs(); if (!email || !pass) { setError("Informe e-mail e senha."); return; } setBusy("password"); try { const data = await kbAuth.password({ mode, email, password: pass, name }); if (!handleSession(data)) { // signup sem sessao = precisa confirmar e-mail setInfo("Conta criada! Confirme seu e-mail para entrar."); } } catch (err) { setError(err.message || "Falha ao autenticar."); } finally { setBusy(""); } }; const google = async () => { if (busy) return; clearMsgs(); setBusy("google"); try { const data = await kbAuth.oauth("google"); const top = window.top || window; top.location.href = data.url; } catch (err) { setError(err.message || "Nao foi possivel iniciar o login com Google."); setBusy(""); } }; const sendCode = async (e) => { e && e.preventDefault(); if (busy) return; clearMsgs(); if (!email) { setError("Informe seu e-mail para receber o codigo."); return; } setBusy("otp"); try { await kbAuth.otpSend({ email, mode, name }); setFlow("code"); setCooldown(45); setInfo("Enviamos um codigo de 6 digitos para o seu e-mail."); } catch (err) { setError(err.message || "Nao foi possivel enviar o codigo."); } finally { setBusy(""); } }; const verifyCode = async (e) => { e && e.preventDefault(); if (busy) return; clearMsgs(); const token = code.join(""); if (token.length < 6) { setError("Digite os 6 digitos do codigo."); return; } setBusy("verify"); try { const data = await kbAuth.otpVerify({ email, token }); if (!handleSession(data)) setError("Codigo invalido ou expirado."); } catch (err) { setError(err.message || "Codigo invalido ou expirado."); } finally { setBusy(""); } }; const recover = async () => { if (busy) return; clearMsgs(); if (!email) { setError("Informe seu e-mail para recuperar a senha."); return; } setBusy("recover"); try { await kbAuth.recover(email); setInfo("Se existir uma conta com esse e-mail, enviamos um link de recuperacao."); } catch (err) { setError(err.message || "Nao foi possivel enviar o link."); } finally { setBusy(""); } }; const setDigit = (i, v) => { v = v.replace(/\D/g, "").slice(-1); setCode((c) => { const n = [...c]; n[i] = v; return n; }); if (v && i < 5) codeRefs.current[i + 1]?.focus(); }; const pasteCode = (e) => { const raw = (e.clipboardData && e.clipboardData.getData("text")) || ""; const digits = raw.replace(/\D/g, "").slice(0, 6); if (digits.length < 2) return; e.preventDefault(); setCode(Array.from({ length: 6 }, (_, i) => digits[i] || "")); setTimeout(() => codeRefs.current[Math.min(digits.length, 6) - 1]?.focus(), 0); }; const anyBusy = !!busy; return (

{/* Left brand panel */}

Automação conversacional para o seu negócio.

Descreva o que precisa em linguagem natural. A Kobar identifica, conecta suas ferramentas e constrói o workflow para você.

Mais de 200 conectores prontos
Modelos de IA locais ou na nuvem
Do chat ao fluxo publicado em minutos

{/* Right form panel */}

{mode === "login" ? "Acesse sua conta" : "Crie sua conta"}

{mode === "login" ? "Bem-vindo de volta ao Kobar Flows." : "Comece a automatizar em poucos minutos."}

{(error || info) && (

{error || info}

)} {flow === "form" ? ( <>

ou continue com e-mail

{mode === "signup" && ( )} setShow((s) => !s)} tabIndex={-1}>} /> {mode === "login" && (

setRemember(e.target.checked)} /> Manter conectado

)} ) : (

Enviamos um código de 6 dígitos para
{email || "voce@empresa.com"} O código expira em alguns minutos. Verifique spam ou lixo eletrônico.

{code.map((d, i) => ( (codeRefs.current[i] = el)} className="kb-codecell" inputMode="numeric" autoComplete={i === 0 ? "one-time-code" : "off"} maxLength={1} value={d} autoFocus={i === 0} disabled={anyBusy} onChange={(e) => setDigit(i, e.target.value)} onKeyDown={(e) => { if (e.key === "Backspace" && !d && i > 0) codeRefs.current[i - 1]?.focus(); }} /> ))}

)}

{mode === "login" ? "Ainda não tem uma conta? " : "Já tem uma conta? "}

Conexão segura · seus dados ficam no seu ambiente

); } Object.assign(window, { AuthScreen }); /* ===== home.jsx ===== */ // home.jsx — Composer + ChatHome (variants A & B) + conversation view const { useState: useStateH, useRef: useRefH, useEffect: useEffectH, useMemo: useMemoH } = React; // Heurística de visão: cloud (Claude/Gemini/OpenAI moderno) interpreta imagens; // no Ollama depende do modelo (llava, *-vision, *vl, gemma3, minicpm-v, etc.). function modelSupportsVision(provider, model) { const m = String(model || "").toLowerCase(); if (provider === "anthropic" || provider === "gemini") return true; if (provider === "openai") return !/gpt-3\.5|davinci|babbage/.test(m); if (provider === "deepseek") return false; // Ollama e demais: casa por padrões conhecidos de modelos multimodais. return /llava|vision|[-_]?vl\b|qwen2.*vl|gemma3|minicpm-v|moondream|bakllava|llama3\.2-vision|pixtral|cogvlm|internvl|granite.*vision/.test(m); } function ComposerConnectors({ up, connectedIds }) { const ids = Array.from(connectedIds || []).map((id) => frontConnectorId ? frontConnectorId(id) : id); const [open, setOpen] = useStateH(false); const [on, setOn] = useStateH({}); const ref = useRefH(null); useEffectH(() => { setOn((current) => { const next = {}; ids.forEach((id) => { next[id] = current[id] !== undefined ? current[id] : true; }); return next; }); }, [ids.join("|")]); useEffectH(() => { if (!open) return; const h = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); }; document.addEventListener("mousedown", h); return () => document.removeEventListener("mousedown", h); }, [open]); const count = ids.filter((id) => on[id]).length; return (

{open && (

Conectores do sistema{count}/{ids.length}

{ids.length === 0 && (

Nenhum conector conectado ainda.

)} {ids.map((id) => (

{(CONNECTORS[id] && CONNECTORS[id].label) || id} {on[id] ? "ligado" : "desligado"}

setOn((s) => ({ ...s, [id]: !s[id] }))} />

))}

)}

); } function Composer({ provider, onProvider, onSend, placeholder, dark, autoFocus, voice, up, webSearchOn, onWebSearch, thinkingOn, onThinking, modelChoice, connectedIds }) { const [val, setVal] = useStateH(""); const [recording, setRecording] = useStateH(false); const [voiceMsg, setVoiceMsg] = useStateH(""); const [atts, setAtts] = useStateH([]); const [attMenu, setAttMenu] = useStateH(false); const ta = useRefH(null); const recog = useRefH(null); const baseVal = useRefH(""); const fileRef = useRefH(null); const attRef = useRefH(null); const grow = () => { const el = ta.current; if (!el) return; el.style.height = "0px"; el.style.height = Math.min(el.scrollHeight, 200) + "px"; }; useEffectH(() => { const id = requestAnimationFrame(grow); return () => cancelAnimationFrame(id); }, [val]); useEffectH(() => () => { try { recog.current && recog.current.stop(); } catch (e) {} }, []); useEffectH(() => { if (!attMenu) return; const h = (e) => { if (attRef.current && !attRef.current.contains(e.target)) setAttMenu(false); }; document.addEventListener("mousedown", h); return () => document.removeEventListener("mousedown", h); }, [attMenu]); const submit = () => { const t = val.trim(); if (!t && !atts.length) return; const sending = atts; setVal(""); setAtts([]); onSend(t, sending); }; // ---- Anexos: arquivos, imagens e áudios ---- const fmtSize = (n) => n < 1024 ? n + " B" : n < 1048576 ? (n / 1024).toFixed(0) + " KB" : (n / 1048576).toFixed(1) + " MB"; const pickFiles = (accept) => { if (fileRef.current) { fileRef.current.accept = accept || ""; fileRef.current.click(); } setAttMenu(false); }; const onFiles = (e) => { const files = Array.from(e.target.files || []); // Limite de leitura inline: arquivos maiores nao sao enviados como conteudo. const MAX_READ_BYTES = 8 * 1024 * 1024; files.forEach((f) => { const kind = f.type.startsWith("image/") ? "image" : f.type.startsWith("audio/") ? "audio" : "file"; const entry = { id: Math.random().toString(36).slice(2), name: f.name, size: f.size, type: f.type || "", kind, url: null }; setAtts((a) => [...a, entry]); // Le o conteudo de TODOS os anexos (imagem, audio e arquivos de dados como // .xlsx/.csv) como data URL, para o servidor usar o conteudo real do anexo // como fonte — em vez de puxar dados de um conector conectado. if (f.size <= MAX_READ_BYTES) { const reader = new FileReader(); reader.onload = () => setAtts((a) => a.map((x) => x.id === entry.id ? { ...x, url: reader.result } : x)); reader.readAsDataURL(f); } }); e.target.value = ""; }; const removeAtt = (id) => setAtts((a) => a.filter((x) => x.id !== id)); const speechSupported = typeof window !== "undefined" && (window.SpeechRecognition || window.webkitSpeechRecognition); const startVoice = () => { const SR = window.SpeechRecognition || window.webkitSpeechRecognition; if (!SR) { setVoiceMsg("Voz indisponível neste navegador."); return; } const r = new SR(); r.lang = "pt-BR"; r.continuous = true; r.interimResults = true; baseVal.current = val ? val.replace(/\s+$/, "") + " " : ""; setVoiceMsg("Solicitando microfone..."); r.onstart = () => { setRecording(true); setVoiceMsg("Ouvindo em pt-BR..."); }; r.onaudiostart = () => setVoiceMsg("Pode falar."); r.onresult = (e) => { let txt = ""; for (let i = e.resultIndex; i < e.results.length; i++) txt += e.results[i][0].transcript; setVal((baseVal.current + txt).replace(/^\s+/, "")); setVoiceMsg("Transcrevendo..."); }; r.onnomatch = () => setVoiceMsg("Não entendi. Tente falar mais perto do microfone."); r.onend = () => { setRecording(false); recog.current = null; setVoiceMsg((m) => m === "Transcrevendo..." ? "" : m); }; r.onerror = (event) => { const err = event && event.error; const msg = err === "not-allowed" ? "Permissão do microfone negada." : err === "no-speech" ? "Não detectei fala." : err === "audio-capture" ? "Microfone não encontrado." : "Falha ao ouvir. Tente novamente."; setVoiceMsg(msg); setRecording(false); recog.current = null; }; recog.current = r; try { r.start(); } catch (e) { setRecording(false); setVoiceMsg("Microfone já está em uso."); } }; const stopVoice = () => { try { recog.current && recog.current.stop(); } catch (e) {} setRecording(false); setVoiceMsg(""); }; const toggleVoice = () => { if (!speechSupported) { setVoiceMsg("Reconhecimento de voz não é suportado neste navegador."); return; } if (recording) stopVoice(); else startVoice(); }; const activeModel = (modelChoice && modelChoice[provider]) || (PROVIDERS[provider] && PROVIDERS[provider].model) || provider; // Aviso de visão: alerta quando há imagem anexada mas o modelo não interpreta imagens. const hasImageAtt = atts.some((a) => a.kind === "image"); const modelHasVision = modelSupportsVision(provider, activeModel); const providerTools = (PROVIDERS[provider] && PROVIDERS[provider].tools) || []; const catalogEntry = (typeof window !== "undefined" && window.MODEL_CATALOG ? window.MODEL_CATALOG.find((c) => c.provider === provider) : null); const allowedModels = catalogEntry && Array.isArray(catalogEntry.webSearchModels) ? catalogEntry.webSearchModels : null; const thinkingModels = catalogEntry && Array.isArray(catalogEntry.thinkingModels) ? catalogEntry.thinkingModels : []; const hasSearchTool = providerTools.includes("web_search") || providerTools.includes("google_search"); const modelAllowed = !allowedModels || allowedModels.length === 0 || allowedModels.includes(activeModel); const webSearchAvailable = Boolean(onWebSearch) && hasSearchTool && modelAllowed; const thinkingAvailable = Boolean(onThinking) && thinkingModels.includes(activeModel); useEffectH(() => { if (!thinkingAvailable && thinkingOn && onThinking) onThinking(false); }, [thinkingAvailable, thinkingOn, activeModel, provider]); return (

{atts.length > 0 && (

{atts.map((a) => (

{a.kind === "image" && a.url ? : } {a.name} {a.kind === "image" ? "Imagem" : a.kind === "audio" ? "Áudio" : "Arquivo"} · {fmtSize(a.size)}

))}

)} {hasImageAtt && !modelHasVision && (

O modelo {activeModel} não interpreta imagens. Escolha um modelo com visão (ex.: gemma3, llava, llama3.2-vision) para analisar o anexo.

)}

setVal(e.target.value)}
        onKeyDown={(e) => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); submit(); } }}
        placeholder={recording ? "Ouvindo… fale agora" : (placeholder || "Descreva o workflow que você quer criar…")} rows={1} />
      <div className="kb-composer-bar">
        <div className="kb-composer-left">
          <ProviderDropdown provider={provider} onChange={onProvider} dark={dark} modelChoice={modelChoice} />
          {webSearchAvailable && (
            <button className={"kb-tool" + (webSearchOn ? " on" : "")}
              data-tip={webSearchOn ? "Busca online ativada — clique para desligar" : "Permitir busca online (desligado)"}
              onClick={() => onWebSearch && onWebSearch(!webSearchOn)}
              aria-label="Busca online" aria-pressed={webSearchOn ? "true" : "false"}>
              <Icon name="globe" size={17} />
            </button>
          )}
          {thinkingAvailable && (
            <button className={"kb-tool" + (thinkingOn ? " on" : "")}
              data-tip={thinkingOn ? "Modo thinking ativado — clique para desligar" : "Ativar modo thinking deste modelo"}
              onClick={() => onThinking && onThinking(!thinkingOn)}
              aria-label="Modo thinking" aria-pressed={thinkingOn ? "true" : "false"}>
              <Icon name="brain" size={17} />
            </button>
          )}
          <div className="kb-att-wrap" ref={attRef}>
            <button className={"kb-tool" + (atts.length ? " has-active" : "") + (attMenu ? " active" : "")}
              data-tip="Anexar arquivo, imagem ou áudio" aria-label="Anexar"
              onClick={() => setAttMenu((o) => !o)}>
              <Icon name="paperclip" size={17} />
              {atts.length > 0 && <span className="kb-tool-badge">{atts.length}</span>}
            </button>
            {attMenu && (
              <div className={"kb-attpop" + (up ? " up" : "")}>
                <div className="kb-attpop-head"><Icon name="paperclip" size={15} /> Anexar ao chat</div>
                <div className="kb-attpop-list">
                  <button className="kb-attpop-item" onClick={() => pickFiles("image/*")}>
                    <span className="kb-attpop-ic img"><Icon name="image" size={17} /></span>
                    <span className="kb-attpop-txt"><span className="kb-attpop-name">Imagem</span><span className="kb-attpop-sub">Analisar fotos e prints</span></span>
                  </button>
                  <button className="kb-attpop-item" onClick={() => pickFiles(".pdf,.doc,.docx,.txt,.csv,.xlsx,.xls,.json,.md")}>
                    <span className="kb-attpop-ic file"><Icon name="fileDoc" size={17} /></span>
                    <span className="kb-attpop-txt"><span className="kb-attpop-name">Arquivo</span><span className="kb-attpop-sub">Relatórios e documentos</span></span>
                  </button>
                </div>
              </div>
            )}
            <input ref={fileRef} type="file" multiple onChange={onFiles} style={{ display: "none" }} />
          </div>
            <ComposerConnectors up={up} connectedIds={connectedIds} />
        </div>
        <div className="kb-composer-right">
          {voiceMsg && <span className="kb-voice-status">{voiceMsg}</span>}
          {voice !== false && (
            <button className={"kb-mic" + (recording ? " on" : "")} onClick={toggleVoice}
              data-tip={recording ? "Parar gravação" : "Mensagem por voz"} aria-label="Mensagem por voz">
              {recording ? <span className="kb-mic-wave"><i /><i /><i /><i /></span> : <Icon name="mic" size={18} />}
            </button>
          )}
          <button className={"kb-send" + (val.trim() ? " on" : "")} onClick={submit} aria-label="Enviar">
            <Icon name="send" size={18} stroke={2.2} />
          </button>
        </div>
      </div>
    </div>
  );
}

function categorySuggestions(label) {
  if (!label) return SUGGESTION_POOL;
  const cat = CONNECTOR_CATEGORIES.find((c) => c.label === label);
  if (!cat) return SUGGESTION_POOL;
  return SUGGESTION_POOL.filter((s) => s.connectors.some((id) => cat.ids.includes(id)));
}
function buildSuggestions(label) {
  return pickRandom(categorySuggestions(label), 4);
}
// only categories that actually have suggestion ideas
const FILTER_CATS = CONNECTOR_CATEGORIES.filter((c) => SUGGESTION_POOL.some((s) => s.connectors.some((id) => c.ids.includes(id))));

function CategoryTabs({ selected, onSelect }) {
  return (
    <div className="kb-cattabs">
      <button className={"kb-cattab" + (!selected ? " active" : "")} onClick={() => onSelect(null)}>Todos</button>
      {FILTER_CATS.map((cat) => (
        <button key={cat.label} className={"kb-cattab" + (selected === cat.label ? " active" : "")}
          onClick={() => onSelect(cat.label)}>{cat.label}</button>
      ))}
    </div>
  );
}

// ---------- EMPTY STATE — Variant A (minimal, centered) ----------
function EmptyA({ provider, onProvider, onSend, userName, webSearchOn, onWebSearch, thinkingOn, onThinking, modelChoice, connectedIds }) {
  const [sel, setSel] = useStateH(null);
  const suggestions = useMemoH(() => buildSuggestions(sel), [sel]);
  return (
    <div className="kb-empty-a">
      <div className="kb-empty-a-inner">
        <div className="kb-hero">
          <OliveMark size={64} />
          <h1 className="kb-hero-title">{dynamicGreeting(userName)}</h1>
          <p className="kb-hero-sub">Descreva em linguagem natural e eu transformo em um workflow pronto para rodar.</p>
        </div>
        <div className="kb-hero-composer">
          <Composer provider={provider} onProvider={onProvider} onSend={onSend} autoFocus
            webSearchOn={webSearchOn} onWebSearch={onWebSearch} thinkingOn={thinkingOn} onThinking={onThinking}
            modelChoice={modelChoice} connectedIds={connectedIds} />
        </div>
        <div className="kb-starters">
          {STARTERS.map((s, i) => <StarterChip key={i} {...s} onClick={() => onSend(s.text)} />)}
        </div>
        <div className="kb-sugg-section">
          <div className="kb-sugg-head">
            <span className="kb-sugg-head-label">Sugestões por conector</span>
            <CategoryTabs selected={sel} onSelect={setSel} />
          </div>
          <div className="kb-sugg-grid">
            {suggestions.map((s, i) => <SuggestionCard key={i} s={s} onClick={() => onSend(s.desc)} />)}
          </div>
        </div>
      </div>
    </div>
  );
}

// ---------- EMPTY STATE — Variant B (connector-forward discovery) ----------
function EmptyB({ provider, onProvider, onSend, webSearchOn, onWebSearch, thinkingOn, onThinking, modelChoice, connectedIds }) {
  const [sel, setSel] = useStateH(null);
  const suggestions = useMemoH(() => buildSuggestions(sel), [sel]);
  return (
    <div className="kb-empty-b">
      <div className="kb-empty-b-texture" />
      <div className="kb-empty-b-scroll">
        <div className="kb-empty-b-inner">
          <div className="kb-hero-b">
            <span className="kb-eyebrow"><OliveMark size={26} /> KOBAR FLOWS</span>
            <h1 className="kb-hero-b-title">Comece pelo conector.<br />Eu construo o resto.</h1>
            <p className="kb-hero-b-sub">Escolha uma categoria para ver ideias de automação ou descreva a sua no campo abaixo.</p>
          </div>
          <CategoryTabs selected={sel} onSelect={setSel} />
          <div className="kb-sugg-grid wide">
            {suggestions.map((s, i) => <SuggestionCard key={i} s={s} onClick={() => onSend(s.desc)} />)}
          </div>
          <div className="kb-starters muted">
            {STARTERS.slice(0, 3).map((s, i) => <StarterChip key={i} {...s} onClick={() => onSend(s.text)} />)}
          </div>
        </div>
      </div>
      <div className="kb-empty-b-dock">
        <Composer provider={provider} onProvider={onProvider} onSend={onSend} up
          webSearchOn={webSearchOn} onWebSearch={onWebSearch} thinkingOn={thinkingOn} onThinking={onThinking}
          modelChoice={modelChoice} connectedIds={connectedIds} />
      </div>
    </div>
  );
}

// ---------- CONVERSATION VIEW ----------
function Conversation({ messages, provider, onProvider, onSend, chatTitle, webSearchOn, onWebSearch, thinkingOn, onThinking, modelChoice, connectedIds, onConnect, onOpenFlow }) {
  const endRef = useRefH(null);
  useEffectH(() => { endRef.current?.scrollTo({ top: endRef.current.scrollHeight, behavior: "smooth" }); }, [messages]);
  return (
    <div className="kb-convo">
      <div className="kb-convo-head">
        <span className="kb-convo-title">{chatTitle}</span>
        <div className="kb-convo-actions">
          <button className="kb-icbtn" data-tip="Renomear"><Icon name="edit" size={17} /></button>
          <button className="kb-icbtn" data-tip="Compartilhar"><Icon name="share" size={17} /></button>
        </div>
      </div>
      <div className="kb-convo-scroll" ref={endRef}>
        <div className="kb-convo-inner">
          {messages.map((m) => <MessageBubble key={m.id} msg={m} connectedIds={connectedIds} onConnect={onConnect} onOpenFlow={onOpenFlow} />)}
        </div>
      </div>
      <div className="kb-convo-dock">
        <div className="kb-convo-dock-inner">
          <Composer provider={provider} onProvider={onProvider} onSend={onSend} placeholder="Continuar a conversa…" up
            webSearchOn={webSearchOn} onWebSearch={onWebSearch} thinkingOn={thinkingOn} onThinking={onThinking}
            modelChoice={modelChoice} connectedIds={connectedIds} />
          <span className="kb-disclaimer">Kobar pode cometer erros. Revise os workflows antes de publicar.</span>
        </div>
      </div>
    </div>
  );
}

function ChatHome({ variant, provider, onProvider, onSend, messages, chatTitle, userName, webSearchOn, onWebSearch, thinkingOn, onThinking, modelChoice, connectedIds, onConnect, onOpenFlow }) {
  if (messages && messages.length) {
    return <Conversation messages={messages} provider={provider} onProvider={onProvider} onSend={onSend} chatTitle={chatTitle}
      webSearchOn={webSearchOn} onWebSearch={onWebSearch} thinkingOn={thinkingOn} onThinking={onThinking} modelChoice={modelChoice}
      connectedIds={connectedIds} onConnect={onConnect} onOpenFlow={onOpenFlow} />;
  }
  return variant === "B"
    ? <EmptyB provider={provider} onProvider={onProvider} onSend={onSend}
        webSearchOn={webSearchOn} onWebSearch={onWebSearch} thinkingOn={thinkingOn} onThinking={onThinking}
        modelChoice={modelChoice} connectedIds={connectedIds} />
    : <EmptyA provider={provider} onProvider={onProvider} onSend={onSend} userName={userName}
        webSearchOn={webSearchOn} onWebSearch={onWebSearch} thinkingOn={thinkingOn} onThinking={onThinking}
        modelChoice={modelChoice} connectedIds={connectedIds} />;
}

Object.assign(window, { Composer, ChatHome });

/* ===== workflow.jsx ===== */
// workflow.jsx — interactive node canvas (drag nodes, zoom/pan/drop, settings), runs tab
const { useState: useStateW, useRef: useRefW, useEffect: useEffectW } = React;

const NODE_W = 248, NODE_H = 96, GAP_X = 312, ORIGIN_X = 64, ORIGIN_Y = 200;
const nodePos = (i) => ({ x: ORIGIN_X + i * GAP_X, y: ORIGIN_Y + (i % 2 === 0 ? 0 : 70) });
const TRIGGER_CONN = { schedule: 1, webhook: 1 };
let DRAGGED_CONNECTOR = null;

// fit on fullscreen toggle, on node-count change (unless the user manually zoomed), and on explicit refit
  React.useLayoutEffect(() => { fitRef.current(); }, [fullscreen]);
  useEffectW(() => { if (!userZoomed.current) fitRef.current(); }, [visible]);
  useEffectW(() => { if (fitNonce) { const t = setTimeout(() => fitRef.current(), 110); return () => clearTimeout(t); } }, [fitNonce]);
  useEffectW(() => {
    const ro = new ResizeObserver(() => { if (!userZoomed.current) fitRef.current(); });
    if (wrapRef.current) ro.observe(wrapRef.current);
    return () => ro.disconnect();
  }, []);

scaleRef.current = base.scale * zoom;
  const zoomAt = (factor) => { userZoomed.current = true; setZoom((z) => Math.max(0.4, Math.min(2.6, z * factor))); };
  const onWheel = (e) => { if (!e.ctrlKey && !e.metaKey) return; e.preventDefault(); zoomAt(e.deltaY < 0 ? 1.1 : 0.9); };

// background pan
  const onPointerDown = (e) => {
    if (e.target.closest(".kb-node")) return;
    userZoomed.current = true;
    panState.current = { sx: e.clientX, sy: e.clientY, px: pan.x, py: pan.y };
    wrapRef.current.setPointerCapture(e.pointerId);
    wrapRef.current.classList.add("grabbing");
  };
  const onPointerMove = (e) => {
    if (!panState.current) return;
    setPan({ x: panState.current.px + (e.clientX - panState.current.sx), y: panState.current.py + (e.clientY - panState.current.sy) });
  };
  const endPan = () => { panState.current = null; wrapRef.current?.classList.remove("grabbing"); };

// node drag
  const startNodeDrag = (e, n, i) => {
    e.stopPropagation();
    const start = posOf(n, i);
    nodeDrag.current = { id: n.id, sx: e.clientX, sy: e.clientY, ox: start.x, oy: start.y };
    setDraggingNode(n.id);
    const move = (ev) => {
      const d = nodeDrag.current; if (!d) return;
      const s = scaleRef.current || 1;
      setPositions((prev) => ({ ...prev, [d.id]: { x: d.ox + (ev.clientX - d.sx) / s, y: d.oy + (ev.clientY - d.sy) / s } }));
    };
    const up = () => { nodeDrag.current = null; setDraggingNode(null); window.removeEventListener("pointermove", move); window.removeEventListener("pointerup", up); };
    window.addEventListener("pointermove", move);
    window.addEventListener("pointerup", up);
  };

const tx = base.x + pan.x, ty = base.y + pan.y, scale = base.scale * zoom;

return (
    <div className={"kb-canvas" + (dragOver ? " dropping" : "")} ref={wrapRef}
      onWheel={onWheel} onPointerDown={onPointerDown} onPointerMove={onPointerMove}
      onPointerUp={endPan} onPointerLeave={endPan}
      onDragOver={(e) => { e.preventDefault(); setDragOver(true); }}
      onDragLeave={(e) => { if (e.target === wrapRef.current) setDragOver(false); }}
      onDrop={(e) => { e.preventDefault(); setDragOver(false); const id = (e.dataTransfer && e.dataTransfer.getData("text/connector")) || DRAGGED_CONNECTOR; DRAGGED_CONNECTOR = null; if (id) onDropConnector(id); }}>
      <div className="kb-canvas-grid" />
      <div className="kb-canvas-texture" />
      <div className="kb-canvas-scene" style={{ transform: `translate(${tx}px,${ty}px) scale(${scale})`, transition: (building || panState.current || draggingNode) ? "none" : undefined }}>
        <svg className="kb-canvas-wires">
          {nodes.map((n, i) => {
            if (i === 0 || i >= revealed) return null;
            const a = posOf(nodes[i - 1], i - 1), b = posOf(n, i);
            const x1 = a.x + NODE_W, y1 = a.y + NODE_H / 2, x2 = b.x, y2 = b.y + NODE_H / 2, mx = (x1 + x2) / 2;
            const d = `M${x1},${y1} C${mx},${y1} ${mx},${y2} ${x2},${y2}`;
            const lit = runStep > i;
            return (
              <g key={i}>
                <path d={d} className="kb-wire" />
                <path d={d} className={"kb-wire-flow" + (runStep >= 0 && !lit ? " idle" : "")} />
                {lit && <circle cx={x2} cy={y2} r="4" className="kb-wire-dot" />}
              </g>
            );
          })}
        </svg>
        {nodes.map((n, i) => {
          if (i >= revealed) return null;
          const p = posOf(n, i);
          const state = runStep < 0 ? "" : (runStep === i ? " running" : (runStep > i ? " done" : ""));
          // Configurado = creds locais OU conector ja conectado na plataforma
          // (credentialRef real, nao "pending:") — evita re-pedir credenciais.
          const configured = (nodeCreds && nodeCreds[n.id]) || (n.credentialRef && !String(n.credentialRef).startsWith("pending:"));
          return (
            <div key={n.id} className={"kb-node" + state + (draggingNode === n.id ? " dragging" : "")}
              style={{ left: p.x, top: p.y, width: NODE_W }}
              onPointerDown={(e) => { if (e.target.closest(".kb-node-gear,.kb-node-port")) return; startNodeDrag(e, n, i); }}>
              <div className="kb-node-top">
                <span className="kb-node-conn"><Connector id={n.connector} size={30} /></span>
                <span className="kb-node-kind" style={{ color: kindColor(n.kind), borderColor: "color-mix(in oklab," + kindColor(n.kind) + ", transparent 70%)" }}>
                  {n.kind === "TRIGGER" ? "GATILHO" : "AÇÃO"}
                </span>
                <button className="kb-node-gear" onClick={(e) => { e.stopPropagation(); onOpenSettings(n); }} data-tip2="Configurar credenciais"><Icon name="gear" size={15} /></button>
              </div>
              <div className="kb-node-title">{n.title}</div>
              <div className="kb-node-sub">{n.sub}</div>
              {configured && <span className="kb-node-cred" data-tip2="Credenciais configuradas"><Icon name="key" size={11} /></span>}
              {state === " running" && <span className="kb-node-runbadge"><OliveLoader size={16} speed={1.6} /></span>}
              {state === " done" && <span className="kb-node-okbadge"><Icon name="check" size={13} /></span>}
              <span className="kb-node-port in" />
              <span className="kb-node-port out" />
            </div>
          );
        })}
      </div>

<div className="kb-canvas-tools">
        <button data-tip2="Afastar" onClick={() => zoomAt(0.83)}><Icon name="minus" size={16} /></button>
        <span className="kb-zoom-val">{Math.round(scale * 100)}%</span>
        <button data-tip2="Aproximar" onClick={() => zoomAt(1.2)}><Icon name="plus" size={16} /></button>
        <span className="kb-tools-sep" />
        <button data-tip2="Ajustar à tela" onClick={() => fit()}><Icon name="expand" size={16} /></button>
        <button data-tip2={fullscreen ? "Sair da tela cheia" : "Tela cheia"} onClick={onToggleFullscreen}>
          <Icon name={fullscreen ? "minimize" : "maximize"} size={16} />
        </button>
      </div>
      {dragOver && <div className="kb-drop-hint"><Icon name="plus" size={20} /> Solte para adicionar ao fluxo</div>}
      {visible === 0 && !dragOver && (
        <div className="kb-canvas-empty">
          <span className="kb-canvas-empty-ic"><Icon name="flows" size={26} /></span>
          <h3>Workflow em branco</h3>
          <p>Arraste um conector do painel à esquerda para começar, ou peça ao agente no chat à direita.</p>
        </div>
      )}
    </div>
  );
}

function Switch({ on, onClick }) {
  return <button className={"kb-switch" + (on ? " on" : "")} onClick={onClick} role="switch" aria-checked={on}><span className="kb-switch-knob" /></button>;
}

// ---- Node credential settings modal ----
function NodeSettingsModal({ node, saved, onSave, onClose }) {
  const fields = CONN_CREDENTIALS[node.connector] || DEFAULT_CREDENTIALS;
  const [vals, setVals] = useStateW(saved || {});
  const set = (k, v) => setVals((s) => ({ ...s, [k]: v }));
  const c = CONNECTORS[node.connector];
  return (
    <div className="kb-modal-scrim" onClick={onClose}>
      <div className="kb-modal" onClick={(e) => e.stopPropagation()}>
        <button className="kb-modal-x" onClick={onClose}><Icon name="x" size={18} /></button>
        <div className="kb-modal-head">
          <Connector id={node.connector} size={48} />
          <div>
            <h3 className="kb-modal-title">{node.title}</h3>
            <span className="kb-modal-subtle">{c.label} · {node.kind === "TRIGGER" ? "Gatilho" : "Ação"}</span>
          </div>
        </div>
        <div className="kb-modal-fields">
          {fields.map((f) => (
            <label key={f.k} className="kb-field">
              <span className="kb-field-label">{f.label}{f.secret && <Icon name="lock" size={11} className="kb-field-lock" />}</span>
              {f.type === "select" ? (
                <span className="kb-field-box">
                  <Icon name="chevDown" size={15} className="kb-field-ic" />
                  <select value={vals[f.k] || f.options[0]} onChange={(e) => set(f.k, e.target.value)}>
                    {f.options.map((o) => <option key={o} value={o}>{o}</option>)}
                  </select>
                </span>
              ) : (
                <span className="kb-field-box">
                  <Icon name={f.secret ? "key" : (f.type === "time" ? "clock" : "edit")} size={15} className="kb-field-ic" />
                  <input type={f.secret ? "password" : (f.type === "time" ? "time" : "text")}
                    value={vals[f.k] || ""} placeholder={f.ph} onChange={(e) => set(f.k, e.target.value)} />
                </span>
              )}
            </label>
          ))}
        </div>
        <div className="kb-modal-note"><Icon name="shield" size={13} /> As credenciais ficam no seu ambiente e não são compartilhadas.</div>
        <div className="kb-modal-actions">
          <button className="kb-btn ghost" onClick={onClose}>Cancelar</button>
          <button className="kb-btn primary" onClick={() => onSave(node.id, vals)}><Icon name="check" size={15} /> Salvar credenciais</button>
        </div>
      </div>
    </div>
  );
}

const showToast = (text, kind) => { setToast({ text, kind }); setTimeout(() => setToast(null), 2600); };

useEffectW(() => {
    if (blank) {
      setMsgs([{ id: nid(), role: "ai", via: PROVIDERS[provider].model,
        text: "Workflow em branco criado. Arraste conectores do painel à esquerda para montar o fluxo, ou me diga o que você quer automatizar que eu monto para você." }]);
      return;
    }
    let i = 0;
    const tick = () => {
      i += 1; setRevealed(i);
      if (i < blueprint.nodes.length) setTimeout(tick, 620);
      else {
        setBuilding(false);
        setMsgs([{ id: nid(), role: "ai", via: PROVIDERS[provider].model,
          text: `Montei o workflow “${blueprint.name}” com ${blueprint.nodes.length} etapas:\n1 · Gatilho de agendamento, todo dia às 9h\n2 · Buscar a cotação via requisição HTTP\n3 · Registrar a linha no Google Sheets\n\nClique no ícone de engrenagem de cada nó para configurar as credenciais.` }]);
      }
    };
    const t = setTimeout(tick, 350);
    return () => clearTimeout(t);
  }, []);

const runTimer = useRefW(null);
  const runWorkflow = async () => {
    if (running || building) return;
    if (revealed === 0) { showToast("Adicione ao menos um passo para executar", "warn"); return; }
    setTab("editor"); setRunning(true); setRunStep(0);
    const total = Math.min(nodes.length, revealed) || nodes.length;
    const firstConn = nodes[0] ? nodes[0].connector : "schedule";

// animacao visual dos passos enquanto roda
    let step = 0;
    clearInterval(runTimer.current);
    const startAnim = (intervalMs, onDone) => {
      runTimer.current = setInterval(() => {
        step += 1;
        if (step < total) setRunStep(step);
        else { clearInterval(runTimer.current); setRunStep(total); if (onDone) onDone(); }
      }, intervalMs);
    };

// EXECUCAO REAL: quando o flow esta salvo (tem id), chama o motor de verdade.
    // O backend resolve as credenciais dos conectores ja conectados (o cliente NAO
    // precisa reinserir) e envia para os destinos reais (ex.: Discord).
    if (blueprint.id) {
      startAnim(600);
      try {
        const { run } = await kbWorkflows.run(blueprint.id);
        clearInterval(runTimer.current); setRunStep(total);
        const ok = run.status === "success";
        const statusLabel = ok ? "sucesso" : (run.status === "cancelled" ? "cancelado" : "erro");
        setTimeout(() => {
          setRunning(false); setRunStep(-1);
          const id = run.id || ("#" + (1042 + (++rc.current)));
          setRuns((r) => [{
            id, status: statusLabel, when: "agora",
            dur: ((run.durationMs || 0) / 1000).toFixed(1) + " s",
            trigger: firstConn, steps: run.steps || []
          }, ...r]);
          showToast(ok ? "Execução real concluída — enviado aos conectores" : ("Falha: " + ((run.error && run.error.message) || "erro na execução")), ok ? "ok" : "warn");
        }, 350);
      } catch (e) {
        clearInterval(runTimer.current);
        setRunning(false); setRunStep(-1);
        showToast(e.message || "Falha ao executar o workflow", "warn");
      }
      return;
    }

// FALLBACK (flow ainda nao salvo, sem id): apenas simulacao visual.
    startAnim(760, () => {
      setTimeout(() => {
        setRunning(false); setRunStep(-1);
        const id = "#" + (1042 + (++rc.current));
        setRuns((r) => [{ id, status: "sucesso", when: "agora", dur: (0.6 + total * 0.3).toFixed(1) + " s", trigger: firstConn }, ...r]);
        showToast("Simulação concluída (salve/publique o flow para executar de verdade)", "ok");
      }, 700);
    });
  };
  useEffectW(() => () => clearInterval(runTimer.current), []);

// Publica de verdade: cria versao imutavel e habilita o agendador (cron) a rodar
  // o flow automaticamente. Sem id (flow nao salvo), nao ha o que publicar.
  const publishFlow = async () => {
    if (publishing) return;
    if (!blueprint.id) { showToast("Salve o flow (gere pelo chat) antes de publicar", "warn"); return; }
    setPublishing(true);
    try {
      const r = await kbWorkflows.publish(blueprint.id);
      setPublished(true);
      showToast(`Publicado (v${r.version}). O agendador roda no horário configurado.`, "ok");
    } catch (e) {
      const hasErr = e.data && Array.isArray(e.data.issues) && e.data.issues.some((i) => i.severity === "error");
      showToast(hasErr ? "Corrija os erros de validação antes de publicar." : (e.message || "Falha ao publicar"), "warn");
    } finally { setPublishing(false); }
  };

return (
    <div className={"kb-workflow" + (fullscreen ? " fullscreen" : "")}>
      <header className="kb-wtopbar">
        <div className="kb-wtop-left">
          <button className="kb-back" onClick={onBack} data-tip="Voltar"><Icon name="chevLeft" size={18} /></button>
          <span className="kb-wname">{blueprint.name}</span>
          <button className="kb-wtag"><Icon name="tag" size={13} /> {blueprint.tag}</button>
          <button className="kb-wtag add"><Icon name="plus" size={13} /> tag</button>
        </div>
        <div className="kb-wtop-center">
          <button className={"kb-wtab" + (tab === "editor" ? " active" : "")} onClick={() => setTab("editor")}>Editor</button>
          <button className={"kb-wtab" + (tab === "runs" ? " active" : "")} onClick={() => setTab("runs")}>Execuções{runs.length ? ` · ${runs.length}` : ""}</button>
        </div>
        <div className="kb-wtop-right">
          <span className="kb-wstatus">{building ? "gerando…" : running ? "executando…" : published ? "publicado · agendador ativo" : "rascunho · salvo localmente"}</span>
          <button className="kb-langpill"><Icon name="globe" size={13} /> PT</button>
          <button className={"kb-wbtn ghost" + (running || building ? " disabled" : "")} onClick={runWorkflow}>
            {running ? <OliveLoader size={15} speed={1.6} /> : <Icon name="play" size={15} />} Executar
          </button>
          <button className={"kb-wbtn primary" + (publishing ? " disabled" : "")} onClick={publishFlow}>
            {publishing ? <OliveLoader size={15} speed={1.6} /> : <Icon name="share" size={15} />} {published ? "Publicado" : "Publicar"}
          </button>
        </div>
      </header>
      <div className="kb-wbody">
        {tab === "editor" ? (
          <>
            <WorkflowConnectorsPanel open={connOpen} onToggle={() => setConnOpen((o) => !o)} activeConn={activeConn} connStates={connStates} />
            <div className="kb-wcanvas-wrap">
              <WorkflowCanvas nodes={nodes} revealed={revealed} building={building} runStep={runStep}
                positions={positions} setPositions={setPositions} fitNonce={fitNonce}
                onDropConnector={dropConnector} onOpenSettings={setSettingsNode} nodeCreds={nodeCreds}
                fullscreen={fullscreen} onToggleFullscreen={() => setFullscreen((f) => !f)} />
              <WorkflowContextPanel nodeCount={revealed} connectors={activeConn.filter((id) => connStates[id]).length} />
              <div className="kb-canvas-topleft">
                {!connOpen && <button className="kb-wconn-reopen" onClick={() => setConnOpen(true)}><Icon name="connect" size={15} /> Conectores</button>}
                <div className="kb-canvas-badge"><ProviderMark id={provider} size={13} /> {PROVIDERS[provider].model}</div>
              </div>
            </div>
            <WorkflowAIPanel provider={provider} onProvider={onProvider} messages={msgs} onSend={send} />
          </>
        ) : (
          <RunsTab runs={runs} nodes={nodes.slice(0, revealed)} />
        )}
      </div>
      {settingsNode && <NodeSettingsModal node={settingsNode} saved={nodeCreds[settingsNode.id]} onSave={saveCreds} onClose={() => setSettingsNode(null)} />}
      {toast && <div className={"kb-toast " + (toast.kind || "")}><Icon name={toast.kind === "warn" ? "bolt" : "check"} size={16} /> {toast.text}</div>}
    </div>
  );
}

Object.assign(window, { WorkflowPage });

/* ===== pages.jsx ===== */
// pages.jsx — section screens (light app shell): Flows, Connect, Runs, Models,
// Agents, History, Settings, Upgrade
const { useState: useStateP, useEffect: useEffectP } = React;

function SectionShell({ title, subtitle, actions, children, eyebrow }) {
  return (
    <main className="kb-section">
      <header className="kb-sec-head">
        <div className="kb-sec-headtxt">
          {eyebrow && <span className="kb-sec-eyebrow">{eyebrow}</span>}
          <h1 className="kb-sec-title">{title}</h1>
          {subtitle && <p className="kb-sec-sub">{subtitle}</p>}
        </div>
        {actions && <div className="kb-sec-actions">{actions}</div>}
      </header>
      <div className="kb-sec-scroll"><div className="kb-sec-body">{children}</div></div>
    </main>
  );
}

// ---------------- Flows ----------------
function FlowsPage({ onOpen, onNew, onDelete, flows = [] }) {
  const [q, setQ] = useStateP("");
  const [busyDelete, setBusyDelete] = useStateP("");
  const list = flows.filter((f) => f.name.toLowerCase().includes(q.toLowerCase()));
  const remove = async (e, flow) => {
    e.stopPropagation();
    if (busyDelete) return;
    const ok = window.confirm(`Excluir o flow "${flow.name}"? Workflows publicados serão arquivados.`);
    if (!ok) return;
    setBusyDelete(flow.id);
    try {
      await onDelete(flow);
    } finally {
      setBusyDelete("");
    }
  };
  return (
    <SectionShell title="Flows" subtitle="Seus workflows de automação."
      actions={<button className="kb-btn primary" onClick={onNew}><Icon name="plus" size={16} stroke={2.2} /> Novo workflow</button>}>
      <div className="kb-toolbar">
        <div className="kb-search inline"><Icon name="search" size={15} /><input value={q} onChange={(e) => setQ(e.target.value)} placeholder="Buscar workflows" /></div>
        <span className="kb-count">{flows.filter((f) => f.status === "ativo").length} ativos · {flows.length} no total</span>
      </div>
      {flows.length === 0 && (
        <div className="kb-empty-chats">Nenhum workflow ainda. Crie o primeiro a partir de um chat ou clique em “Novo workflow”.</div>
      )}
      <div className="kb-flowgrid">
        {list.map((f) => (
          <div key={f.id} className="kb-flowcard" role="button" tabIndex={0} onClick={() => onOpen(f)}
            onKeyDown={(e) => { if (e.key === "Enter") onOpen(f); }}>
            <div className="kb-flowcard-top">
              <span className="kb-flow-cons">{f.connectors.map((id, i) => <Connector key={i} id={id} size={28} />)}</span>
              <span style={{ display: "flex", alignItems: "center", gap: 6 }}>
                <StatusPill s={f.status} />
                <button className="kb-btn tiny ghost" title="Excluir flow" onClick={(e) => remove(e, f)} disabled={busyDelete === f.id}>
                  <Icon name="trash" size={14} />
                </button>
              </span>
            </div>
            <div className="kb-flow-name">{f.name}</div>
            <div className="kb-flow-meta">
              <span><Icon name="flows" size={13} /> {f.nodes} nós</span>
              <span><Icon name="runs" size={13} /> {f.runs} exec.</span>
              <span><Icon name="clock" size={13} /> {f.lastRun}</span>
            </div>
            <span className="kb-flow-tag">#{f.tag}</span>
          </div>
        ))}
      </div>
    </SectionShell>
  );
}

// ---------------- Connect ----------------
// Modal de conexao real, dirigido pela config do conector (/api/connectors).
// `connectorId` aqui e o id do BACKEND (ex.: slack_webhook).
function ConnectorModal({ connectorId, catalog, onClose, onConnected, returnTo, forceReconnect }) {
  const cfg = (catalog || []).find((c) => c.id === connectorId) || null;
  const name = (cfg && cfg.name) || connectorId;
  const method = (cfg && cfg.effectiveMethod) || "credentials";
  const fields = (cfg && cfg.fields) || [];
  const [vals, setVals] = useStateP({});
  const [busy, setBusy] = useStateP(false);
  const [err, setErr] = useStateP("");
  const [done, setDone] = useStateP(!!(cfg && cfg.connected) && !forceReconnect);
  const [displayName, setDisplayName] = useStateP((cfg && cfg.displayName) || "");

const setVal = (k, v) => setVals((s) => ({ ...s, [k]: v }));

const errBox = err ? (
    <div style={{ color: "#9B3D27", background: "#FBEFEB", border: "1px solid #E7C3B8", borderRadius: 10, padding: "9px 11px", fontSize: 13, margin: "4px 0 12px" }}>{err}</div>
  ) : null;

return (
    <div className="kb-modal-scrim" onClick={onClose}>
      <div className="kb-modal" onClick={(e) => e.stopPropagation()}>
        <button className="kb-modal-x" onClick={onClose}><Icon name="x" size={18} /></button>
        <div className="kb-modal-head">
          <Connector id={frontConnectorId(connectorId)} size={52} />
          <div><h3 className="kb-modal-title">{name}</h3>
            <span className={"kb-conncard-state" + (done ? " on" : "")}>
              {done ? <><Icon name="check" size={12} /> conectado</> : forceReconnect ? "reautorizar" : "não conectado"}</span>
          </div>
        </div>

{done ? (
          <>
            <p className="kb-modal-desc">{displayName ? `Conectado como ${displayName}.` : "Conector conectado e pronto para uso nos seus workflows."}</p>
            <div className="kb-modal-actions">
              <button className="kb-btn ghost" onClick={onClose}>Fechar</button>
              <button className="kb-btn danger-out" onClick={disconnect} disabled={busy}><Icon name="power" size={15} /> Desconectar</button>
            </div>
          </>
        ) : method === "oauth2" ? (
          (cfg && cfg.oauthAvailable) ? (
            <>
              <p className="kb-modal-desc">{forceReconnect ? `Reautorize o Kobar Flows para renovar os tokens e permissoes de ${name}.` : `Autorize o Kobar Flows a acessar sua conta ${name}. Você poderá revogar o acesso quando quiser.`}</p>
              {errBox}
              <button className="kb-btn primary full" onClick={authorize} disabled={busy}>
                <Icon name="connect" size={16} /> {busy ? "Abrindo…" : forceReconnect ? `Reautorizar ${name}` : `Autorizar com ${name}`}
              </button>
            </>
          ) : (
            <p className="kb-modal-desc">
              A conexão OAuth de {name} ainda não está configurada no servidor.
              Configure {(cfg && cfg.missingEnv && cfg.missingEnv.length) ? cfg.missingEnv.join(", ") : "as credenciais OAuth do provedor"} para habilitar.
            </p>
          )
        ) : (
          <>
            <p className="kb-modal-desc">Informe as credenciais para conectar {name}. Elas são validadas e guardadas criptografadas no seu ambiente.</p>
            <div className="kb-modal-fields">
              {fields.map((f) => (
                <label className="kb-field" key={f.k}>
                  <span className="kb-field-label">{f.label}</span>
                  <span className="kb-field-box">
                    <Icon name={f.secret ? "lock" : "edit"} size={16} className="kb-field-ic" />
                    <input type={f.secret ? "password" : (f.type === "url" ? "url" : "text")} placeholder={f.placeholder || ""}
                      value={vals[f.k] || ""} onChange={(e) => setVal(f.k, e.target.value)} autoFocus={f === fields[0]} />
                  </span>
                  {f.help && <span style={{ fontSize: 11.5, color: "#8A9384", marginTop: 4, display: "block" }}>{f.help}</span>}
                </label>
              ))}
            </div>
            {errBox}
            <button className="kb-btn primary full" onClick={submit} disabled={busy}>
              <Icon name="connect" size={16} /> {busy ? "Conectando…" : `Conectar ${name}`}
            </button>
          </>
        )}
      </div>
    </div>
  );
}

// ---------------- Runs ----------------
const STEP_STATUS = { success: "ok", failed: "err", error: "err", running: "run", pending: "draft", skipped: "draft" };

// ---------------- Agents ----------------
const ALL_MODELS = MODEL_CATALOG.flatMap((m) => m.models);

const toPayload = (data) => ({
    name: data.name,
    desc: data.desc,
    model: data.model,
    status: data.status || "ativo",
    skills: data.skillIds || data.skills || [],
    instructions: data.instructions || ""
  });

if (openId) {
    const agent = agents.find((a) => a.id === openId);
    if (agent) return (
      <>
        <AgentDetail agent={agent} onBack={() => setOpenId(null)} onToggleStatus={toggleStatus} onEdit={() => setEditId(agent.id)} onDelete={deleteAgent} />
        {editingAgent && <AgentEditorModal agent={editingAgent} onClose={() => setEditId(null)} onSubmit={saveEdit} />}
      </>
    );
  }

return (
    <SectionShell title="Agentes" subtitle="Agentes de IA com habilidades e modelos próprios."
      actions={<button className="kb-btn primary" onClick={() => setCreating(true)}><Icon name="plus" size={16} stroke={2.2} /> Novo agente</button>}>
      <div className="kb-agentgrid">
        {agents.map((a) => (
          <button key={a.id} className="kb-agentcard" onClick={() => setOpenId(a.id)}>
            <span className="kb-agentcard-ava"><OliveMark size={34} /></span>
            <div className="kb-agentcard-body">
              <div className="kb-agentcard-top"><span className="kb-agentcard-name">{a.name}</span><StatusPill s={a.status} /></div>
              <p className="kb-agentcard-desc">{a.desc}</p>
              <div className="kb-agentcard-meta">
                <span><Icon name="models" size={13} /> {a.model}</span>
                <span><Icon name="skills" size={13} /> {((a.skillIds || a.skills) || []).length} skills</span>
              </div>
            </div>
            <Icon name="chevRight" size={18} className="kb-agentcard-go" />
          </button>
        ))}
      </div>
      {creating && <AgentEditorModal onClose={() => setCreating(false)} onSubmit={create} />}
    </SectionShell>
  );
}

// ---------------- History ----------------
function HistoryPage() {
  return (
    <SectionShell title="Histórico" subtitle="Atividade recente na sua conta.">
      <div className="kb-timeline">
        {HISTORY.map((h) => (
          <div key={h.id} className="kb-tl-item">
            <span className={"kb-tl-ic" + (h.bad ? " bad" : "")}><Icon name={h.icon} size={16} /></span>
            <span className="kb-tl-text">{h.text}</span>
            <span className="kb-tl-when">{h.when}</span>
          </div>
        ))}
      </div>
    </SectionShell>
  );
}

// ---------------- Settings ----------------
const USAGE_LABELS = {
  ai_calls: "Chamadas de IA", chat_messages: "Mensagens de chat",
  web_searches: "Buscas online", workflow_runs: "Execuções"
};

// ---------------- Upgrade / Plans ----------------
function UpgradePage({ onBack }) {
  const [credits, setCredits] = useStateP(null);
  const [packs, setPacks] = useStateP([]);
  const [busy, setBusy] = useStateP("");
  const [err, setErr] = useStateP("");

useEffectP(() => {
    let alive = true;
    kbBilling.credits().then((d) => {
      if (!alive) return;
      setCredits(d.balance || null);
      setPacks(d.packs || []);
    }).catch(() => {});
    return () => { alive = false; };
  }, []);

const totalCredits = credits && credits.total != null ? credits.total : null;
  const fmt = (n) => (n < 0 ? "ilimitado" : Number(n).toLocaleString("pt-BR"));

return (
    <SectionShell eyebrow="PLANOS" title="Escolha o plano ideal" subtitle="Comece de graça e evolua conforme suas automações crescem."
      actions={<button className="kb-btn ghost" onClick={onBack}><Icon name="chevLeft" size={15} /> Voltar</button>}>
      {err && <div className="kb-banner err" style={{ marginBottom: 14 }}>{err}</div>}
      <div className="kb-plans">
        {PLANS.map((p) => (
          <div key={p.id} className={"kb-plan" + (p.popular ? " popular" : "") + (p.current ? " current" : "")}>
            {p.popular && <span className="kb-plan-badge">Mais popular</span>}
            <div className="kb-plan-head">
              <span className="kb-plan-name">{p.name}</span>
              <span className="kb-plan-tagline">{p.tagline}</span>
            </div>
            <div className="kb-plan-price">{p.price}<em>{p.per}</em></div>
            <ul className="kb-plan-feats">
              {p.features.map((f, i) => <li key={i}><Icon name="check" size={15} /> {f}</li>)}
            </ul>
            <button className={"kb-btn full " + (p.current ? "ghost" : p.popular ? "primary" : "outline")}
              disabled={p.current || busy === "plan-" + p.id || p.id === "free"}
              onClick={() => p.id !== "free" && onPlan(p.id)}>
              {p.current ? "Plano atual" : p.id === "free" ? "Grátis" : (busy === "plan-" + p.id ? "Redirecionando…" : "Fazer upgrade")}
            </button>
          </div>
        ))}
      </div>

{/* Créditos de IA na nuvem */}
      <div className="kb-credits">
        <div className="kb-credits-head">
          <div>
            <h3 className="kb-credits-title"><Icon name="spark" size={17} /> Créditos de IA na nuvem</h3>
            <p className="kb-credits-sub">Modelos locais (Ollama) são ilimitados e não consomem créditos. Modelos na nuvem (OpenAI, Claude, Gemini, DeepSeek) consomem créditos pelo uso real.</p>
          </div>
          <div className="kb-credits-balance">
            <span className="kb-credits-num">{totalCredits == null ? "—" : fmt(totalCredits)}</span>
            <span className="kb-credits-lbl">créditos disponíveis</span>
            {credits && credits.monthly != null && credits.monthly >= 0 && (
              <span className="kb-credits-split">{fmt(credits.monthly)} do plano · {fmt(credits.wallet || 0)} comprados</span>
            )}
          </div>
        </div>
        <div className="kb-credits-packs">
          {packs.map((pk) => (
            <div key={pk.id} className="kb-pack">
              <span className="kb-pack-credits">{Number(pk.credits).toLocaleString("pt-BR")} créditos</span>
              {pk.bonus > 0 && <span className="kb-pack-bonus">+{pk.bonus}% bônus</span>}
              <span className="kb-pack-price">R$ {pk.amountBRL}</span>
              <button className="kb-btn outline full" disabled={busy === "pack-" + pk.id} onClick={() => onBuy(pk.id)}>
                {busy === "pack-" + pk.id ? "Redirecionando…" : "Comprar"}
              </button>
            </div>
          ))}
        </div>
      </div>
    </SectionShell>
  );
}

Object.assign(window, {
  StatusPill, SectionShell, FlowsPage, ConnectPage, RunsPage,
  ModelsPage, AgentsPage, HistoryPage, SettingsPage, UpgradePage,
});

/* ===== models-admin.jsx ===== */
// models-admin.jsx — catalogo dinamico da API + preview por usuario (admin)
function normalizeModelEntries(models) {
  return (models || []).map((m) => {
    if (typeof m === "string") return { id: m, name: m };
    if (!m || !m.id) return null;
    return {
      id: m.id,
      name: m.name || m.id,
      supportsThinking: !!m.supportsThinking,
      supportsWebSearch: !!m.supportsWebSearch,
      supportsVision: !!m.supportsVision
    };
  }).filter(Boolean);
}

function mapProviderFromApi(p) {
  const providerId = p.id || p.provider;
  const entries = normalizeModelEntries(p.models);
  const ids = entries.map((m) => m.id);
  const connected = p.connected != null ? p.connected : (p.status === "connected" || p.hasApiKey === true);
  return {
    provider: providerId,
    label: p.label,
    kind: p.kind,
    short: p.short,
    color: p.color,
    connected,
    status: p.status || (connected ? "connected" : "disconnected"),
    hasApiKey: !!p.hasApiKey,
    apiKeyPreview: p.apiKeyPreview || null,
    defaultModel: p.defaultModel || ids[0] || "",
    enabledModels: Array.isArray(p.enabledModels) ? p.enabledModels : [],
    isDefault: !!p.isDefault,
    models: ids,
    modelEntries: entries,
    webSearchModels: entries.filter((m) => m.supportsWebSearch).map((m) => m.id),
    thinkingModels: entries.filter((m) => m.supportsThinking).map((m) => m.id)
  };
}

function chatVisibleModels(row) {
  if (!row || (!row.connected && row.status !== "connected")) return [];
  const entries = row.modelEntries || (row.models || []).map((id) => ({ id, name: id }));
  const enabledIds = row.enabledModels && row.enabledModels.length ? row.enabledModels : row.models || [];
  return entries.filter((m) => enabledIds.includes(m.id));
}

const previewMember = (orgMembers || []).find((member) => member.id === selectedUserId) || null;
  const previewModels = list
    .filter((row) => row.connected || row.status === "connected")
    .flatMap((row) => chatVisibleModels(row).map((entry) => ({
      id: entry.id,
      label: modelDisplayLabel(row.modelEntries, entry.id),
      provider: row.provider
    })));

return (
    <SectionShell title={isAdmin ? "Modelos — Administracao" : "Modelos"} subtitle={isAdmin ? "Conecte provedores e escolha quais modelos ficam disponiveis para os usuarios." : "Escolha o modelo de cada provedor — ele aparece no seletor do chat."}
      actions={notice ? <span className="kb-count big">{notice}</span> : <span className="kb-count big">{loading ? "Carregando..." : `${list.length} provedores`}</span>}>
      {isAdmin && (
        <div className="kb-model-admin-bar" style={{ display: "flex", gap: 12, alignItems: "center", marginBottom: 16, flexWrap: "wrap" }}>
          <label className="kb-field" style={{ minWidth: 280, flex: "1 1 280px" }}>
            <span className="kb-field-label">Visualizar como usuario</span>
            <span className="kb-field-box">
              <select value={selectedUserId} onChange={(e) => setSelectedUserId(e.target.value)} style={{ width: "100%", border: 0, background: "transparent", padding: "10px 12px" }}>
                <option value="">Configuracao da organizacao (todos)</option>
                {(orgMembers || []).map((member) => (
                  <option key={member.id} value={member.id}>
                    {member.name}{member.id === currentUserId ? " (voce)" : ""} · {member.email}
                  </option>
                ))}
              </select>
            </span>
          </label>
          {previewMember && (
            <div className="kb-count big" style={{ alignSelf: "flex-end" }}>
              {previewModels.length} modelos visiveis para {previewMember.name}
            </div>
          )}
        </div>
      )}
      <div className="kb-modelgrid">
        {list.map((m) => {
          const p = PROVIDERS[m.provider] || { label: m.label || m.provider, kind: m.kind || "cloud", placeholder: "API key" };
          const models = m.models || [];
          const entries = m.modelEntries || models.map((id) => ({ id, name: id }));
          const selected = (modelChoice && modelChoice[m.provider]) || m.defaultModel || models[0];
          const isDefaultProvider = provider === m.provider;
          const open = expanded === m.provider;
          const enabled = m.enabledModels && m.enabledModels.length ? m.enabledModels : models;
          const visibleToUser = chatVisibleModels(m);
          return (
            <div key={m.provider} className={"kb-modelcard" + (isDefaultProvider ? " is-default" : "")}>
              <div className="kb-modelcard-head">
                <span className="kb-modelcard-ic"><ProviderMark id={m.provider} size={22} /></span>
                <div className="kb-modelcard-txt">
                  <span className="kb-modelcard-name">{p.label || m.label || m.provider}</span>
                  <span className={"kb-prov-tag " + (p.kind || m.kind)}>{models.length} modelos · {(p.kind || m.kind) === "local" ? "no dispositivo" : "Cloud API"}</span>
                </div>
                <span className={"kb-conncard-state" + (m.connected ? " on" : "")}>{m.connected ? <><Icon name="check" size={12} /> ativo</> : "configurar"}</span>
              </div>

<div className="kb-modelcard-field">
                <label className="kb-modelcard-flabel">Modelo padrao do provedor</label>
                <ModelSelect models={models} modelEntries={entries} value={selected} disabled={!m.connected || models.length === 0}
                  onChange={(mod) => isAdmin ? setDefaultModel(m, mod) : onModelChoice(m.provider, mod)} />
              </div>

{isAdmin && previewMember && m.connected && (
                <div className="kb-modelcard-field">
                  <label className="kb-modelcard-flabel">Visivel para {previewMember.name}</label>
                  <div style={{ fontSize: 12.5, color: "var(--ink-soft,#6B6560)", lineHeight: 1.5 }}>
                    {visibleToUser.length
                      ? visibleToUser.map((entry) => modelDisplayLabel(entries, entry.id)).join(" · ")
                      : "Nenhum modelo liberado neste provedor."}
                  </div>
                </div>
              )}

{isAdmin && open && (
                <div style={{ borderTop: "1px solid var(--line,#E4DED5)", marginTop: 12, paddingTop: 12, display: "flex", flexDirection: "column", gap: 12 }}>
                  {m.apiKeyPreview && (
                    <div className="kb-set-row"><span>Chave salva</span><strong title="Preview mascarado">{m.apiKeyPreview}</strong></div>
                  )}
                  <label className="kb-field">
                    <span className="kb-field-label">{m.provider === "ollama" ? "URL/API key do Ollama" : "Chave de API"}</span>
                    <span className="kb-field-box">
                      <Icon name="lock" size={16} className="kb-field-ic" />
                      <input type="password" placeholder={p.placeholder || "API key"} value={keys[m.provider] || ""} onChange={(e) => setKeys((s) => ({ ...s, [m.provider]: e.target.value }))} />
                    </span>
                  </label>
                  <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
                    <button className="kb-btn tiny ghost" onClick={() => testKey(m)} disabled={busy === m.provider + ":test"}>{busy === m.provider + ":test" ? "Testando..." : "Testar"}</button>
                    <button className="kb-btn tiny primary" onClick={() => saveKey(m)} disabled={busy === m.provider + ":save_key"}>{busy === m.provider + ":save_key" ? "Salvando..." : "Salvar conexao"}</button>
                    {m.connected && <button className="kb-btn tiny danger-out" onClick={() => removeKey(m)} disabled={busy === m.provider + ":remove_key"}>Desconectar</button>}
                  </div>
                  <div>
                    <label className="kb-modelcard-flabel">Modelos liberados para usuarios</label>
                    <div style={{ display: "flex", flexDirection: "column", gap: 6, maxHeight: 260, overflow: "auto", paddingRight: 4 }}>
                      {models.map((modelId) => {
                        const on = enabled.includes(modelId);
                        return (
                          <button key={modelId} className={"kb-mselect-opt" + (on ? " active" : "")}
                            style={{ border: "1px solid var(--line,#E4DED5)", borderRadius: 8 }}
                            onClick={() => toggleModel(m, modelId)}>
                            <span>{modelDisplayLabel(entries, modelId)}</span>
                            {on ? <Icon name="check" size={15} /> : <Icon name="plus" size={15} />}
                          </button>
                        );
                      })}
                    </div>
                  </div>
                </div>
              )}

<div className="kb-modelcard-foot">
                {isDefaultProvider ? (
                  <span className="kb-modelcard-default"><Icon name="check" size={14} /> Provedor padrao</span>
                ) : m.connected ? (
                  <button className="kb-btn tiny ghost" onClick={() => onProvider(m.provider)}>Definir como padrao do chat</button>
                ) : <span />}
                {isAdmin ? (
                  <button className={"kb-btn tiny " + (open ? "primary" : "ghost")} onClick={() => setExpanded(open ? null : m.provider)}>
                    {open ? "Fechar" : (m.connected ? "Gerenciar" : "Conectar")}
                  </button>
                ) : (
                  <button className={"kb-btn tiny " + (m.connected ? "ghost" : "primary")} disabled={!m.connected}>
                    {m.connected ? "Disponivel" : "Indisponivel"}
                  </button>
                )}
              </div>
            </div>
          );
        })}
      </div>
    </SectionShell>
  );
}

Object.assign(window, { mapProviderFromApi, ModelsPage, ModelSelect });

/* ===== app.jsx ===== */
// app.jsx — top-level state + routing across all sections
const { useState: useStateA, useRef: useRefA, useEffect: useEffectA } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "homeLayout": "A",
  "accent": "#B8734A",
  "loaderSpeed": 1.3,
  "showTexture": true
}/*EDITMODE-END*/;

// ---- mapeamento de dados reais (bootstrap) para o formato das telas ----
const STATUS_FLOW = { published: "ativo", paused: "pausado", draft: "rascunho", archived: "rascunho" };
// conectores do backend -> ids de icone do front
const CONNECTOR_ALIAS = {
  http_request: "http", google_sheets_append: "sheets", slack_webhook: "slack",
  gmail: "gmail", notion: "notion", github: "github", stripe: "stripe",
  discord: "discord", telegram: "telegram", webhook: "webhook", schedule: "schedule",
  google_drive: "gdrive", google_calendar: "gcal",
  microsoft_outlook: "outlook", microsoft_teams: "teams", microsoft_excel: "m365",
  hubspot: "hubspot", airtable: "airtable", trello: "trello"
};
const RUN_STATUS = { success: "sucesso", error: "erro", running: "em execução", queued: "em execução", cancelled: "erro" };

function aliasConnector(id) { return CONNECTOR_ALIAS[id] || id; }

function fmtDuration(ms) {
  if (ms == null) return "—";
  return (ms / 1000).toFixed(1).replace(".", ",") + " s";
}

function mapBlueprint(wf) {
  return {
    id: wf.id,
    name: wf.name,
    tag: wf.tag || "rascunho",
    nodes: (wf.nodes || []).map((n) => ({
      id: n.id, kind: n.kind, title: n.title, sub: n.operationId, connector: aliasConnector(n.connectorId),
      // preserva os dados reais do no para execucao/credenciais (nao re-pedir ao usuario)
      connectorId: n.connectorId, operationId: n.operationId,
      config: n.config || {}, credentialRef: n.credentialRef || null
    })),
    edges: wf.edges || []
  };
}

function firstName(name) { return (name || "").trim().split(/\s+/)[0] || ""; }

// Carrega os modelos realmente disponiveis na API por provedor.
  const refreshModels = async () => {
    try {
      const res = await kbApi.authFetch("/api/models", { method: "GET" });
      if (!res.ok) return [];
      const data = await res.json();
      const toIds = (arr) => (arr || []).map((m) => (typeof m === "string" ? m : (m && m.id))).filter(Boolean);
      const cat = (data.providers || []).map((p) => ({
        provider: p.id, label: p.label, kind: p.kind, short: p.short, color: p.color,
        // Conectado = status do servidor (que ja exige chave real). Nao confiar em
        // p.connected do meta estatico do provedor, que vinha sempre true.
        connected: p.status === "connected",
        status: p.status || "disconnected",
        hasApiKey: !!p.hasApiKey,
        defaultModel: p.defaultModel,
        enabledModels: p.enabledModels || [],
        models: toIds(p.models),
        webSearchModels: toIds(p.webSearchModels),
        thinkingModels: toIds(p.thinkingModels)
      }));
      cat.forEach((p) => {
        if (PROVIDERS[p.provider]) {
          PROVIDERS[p.provider].model = p.defaultModel || PROVIDERS[p.provider].model;
          PROVIDERS[p.provider].kind = p.kind || PROVIDERS[p.provider].kind;
        }
      });
      setModelsCatalog(cat);
      window.MODEL_CATALOG = cat.length ? cat : window.MODEL_CATALOG;
      // Se o provedor atual nao esta conectado, troca para o primeiro conectado
      // (com modelos), para o chat nunca abrir num provedor sem chave.
      const connected = cat.filter((c) => c.connected && c.models.length > 0);
      if (connected.length) {
        setProvider((cur) => {
          const curOk = connected.some((c) => c.provider === cur);
          const next = curOk ? cur : connected[0].provider;
          const nextEntry = connected.find((c) => c.provider === next);
          if (nextEntry && nextEntry.defaultModel) {
            setModelChoice((mc) => (mc[next] ? mc : { ...mc, [next]: nextEntry.defaultModel }));
          }
          return next;
        });
      }
      return cat;
    } catch (e) { return []; }
  };

// Carrega catalogo de conectores (config + status) e atualiza o conjunto conectado.
  const refreshConnectors = async () => {
    try {
      const data = await kbConnectors.list();
      const items = data.connectors || [];
      setConnectorCatalog(items);
      setConnectedIds(new Set(items.filter((c) => c.connected).map((c) => c.id)));
      return items;
    } catch (e) { return []; }
  };

useEffectA(() => {
    document.documentElement.style.setProperty("--accent", t.accent);
    document.documentElement.style.setProperty("--loader-speed", String(t.loaderSpeed));
    document.documentElement.style.setProperty("--texture-on", t.showTexture ? "1" : "0");
  }, [t.accent, t.loaderSpeed, t.showTexture]);

useEffectA(() => {
    const handler = (event) => {
      if (event.origin !== window.location.origin) return;
      if (!event.data || event.data.type !== "kobar:connector") return;
      refreshConnectors();
      if (event.data.status === "ok" && event.data.connector) {
        onConnectorChanged(event.data.connector, true);
        const pendingPrompt = pendingReconnectPromptRef.current;
        pendingReconnectPromptRef.current = "";
        if (pendingPrompt && sendRef.current) {
          setTimeout(() => sendRef.current(pendingPrompt), 450);
        }
      }
    };
    window.addEventListener("message", handler);
    return () => window.removeEventListener("message", handler);
  }, []);

// Carrega o estado real da conta (usuario + dados) a partir do backend.
  const loadBootstrap = async () => {
    const res = await kbApi.authFetch("/api/bootstrap", { method: "GET" });
    if (!res.ok) throw new Error("unauthenticated");
    const boot = await res.json();
    const session = kbApi.getSession();
    const sessUser = (session && session.user) || {};
    setUser({
      id: boot.user.id,
      name: boot.user.name || sessUser.name || "",
      email: boot.user.email || sessUser.email || "",
      org: boot.user.org || "Workspace",
      plan: boot.plan || "Free"
    });
    setChats(boot.conversations || []);
    setFlows(mapFlows(boot.workflows, boot.runs));
    setRuns(mapRuns(boot.runs, boot.workflows));
    setAgents(boot.agents || []);
    setIsAdmin(!!boot.isAdmin);
    // status inicial de conexoes a partir do bootstrap (sera refinado por refreshConnectors)
    const connConns = boot.connectorConnections || [];
    setConnectedIds(new Set(connConns.filter((c) => c.status === "connected").map((c) => c.connectorId)));
    setAuthed(true);
    refreshConnectors();
    refreshModels();
    return boot;
  };

// Verifica a sessao guardada ao iniciar.
  useEffectA(() => {
    let active = true;
    (async () => {
      const session = kbApi.getSession();
      if (!session || !session.accessToken) { if (active) { setAuthed(false); setAuthReady(true); } return; }
      try {
        await loadBootstrap();
      } catch (e) {
        kbApi.clearSession();
        if (active) setAuthed(false);
      } finally {
        if (active) setAuthReady(true);
      }
    })();
    return () => { active = false; };
  }, []);

const onAuth = async () => {
    setAuthReady(false);
    try { await loadBootstrap(); }
    catch (e) { kbApi.clearSession(); setAuthed(false); }
    finally { setAuthReady(true); }
  };

const openEditor = (bp) => { setOpenFlow(bp); setView("editor"); };

// Abre um flow pelo id, buscando a definicao COMPLETA (nos/edges/config/credenciais)
  // no backend. Usado pelo menu de Workflows e pelo CTA do chat (inclusive ao reabrir
  // do historico), garantindo que o canvas sempre receba o grafo montado.
  const openFlowById = async (id) => {
    if (!id) return;
    // Busca a definicao ANTES de abrir o editor: o WorkflowPage inicializa os nos
    // apenas na montagem, entao precisamos do grafo pronto antes de montar.
    try {
      const res = await kbApi.authFetch("/api/workflows/" + encodeURIComponent(id));
      const data = await res.json().catch(() => ({}));
      if (res.ok && data.workflow) openEditor(mapBlueprint(data.workflow));
      else window.alert((data && data.error) || "Não foi possível carregar este workflow.");
    } catch (e) { window.alert("Falha ao carregar o workflow."); }
  };

// Abre o modal de conexao para um conector (id do backend).
  const openConnect = (connectorId, opts) => {
    if (opts && opts.forceReconnect && lastPromptRef.current) {
      pendingReconnectPromptRef.current = lastPromptRef.current;
    }
    setConnectModal({ connectorId, forceReconnect: !!(opts && opts.forceReconnect) });
  };

// Auto-continuar: quando todos os conectores pendentes ficam conectados,
  // reavalia o workflow no backend e injeta a confirmacao "tudo pronto".
  const runContinue = async (workflow) => {
    try {
      const r = await kbChat.continueWorkflow(workflow);
      const finalWf = r.workflow || workflow;
      setMessages((m) => [...m, {
        id: nid(), role: "ai", text: r.reply || "Tudo conectado! Seu workflow está pronto.",
        cta: {
          title: "Abrir no editor de workflows",
          sub: `${(finalWf.nodes || []).length} nós · pronto para revisar`,
          onClick: () => openEditor(mapBlueprint(finalWf))
        }
      }]);
    } catch (e) { /* silencioso */ }
  };

// Chamado pelo modal ao conectar/desconectar um conector.
  const onConnectorChanged = (connectorId, connected) => {
    setConnectorCatalog((cat) => cat.map((c) => c.id === connectorId ? { ...c, connected } : c));
    setConnectedIds((prev) => {
      const next = new Set(prev);
      if (connected) next.add(connectorId); else next.delete(connectorId);
      // dispara auto-continuar se completou os pendentes
      if (connected && pendingConn && pendingConn.required.every((id) => next.has(id))) {
        const wf = pendingConn.workflow;
        setPendingConn(null);
        setTimeout(() => runContinue(wf), 250);
      }
      return next;
    });
    setConnectModal(null);
  };

const newChat = () => { setMessages([]); setActiveChat(null); setChatTitle("Novo chat"); setView("chats"); };

const nav = (id) => setView(id);
  const railActive = view === "editor" ? "flows" : view;

if (!authReady) {
    return (
      <div className="kb-bootsplash" style={{ display: "grid", placeItems: "center", minHeight: "100vh" }}>
        <OliveLoader size={48} speed={1.4} />
      </div>
    );
  }

if (!authed) return <AuthScreen onAuth={onAuth} />;

const userName = firstName(user && user.name);

return (
    <div className={"kb-app" + (view === "editor" ? " on-workflow" : "")}>
      <TatreezTexture id="tatreez" opacity={0.5} />
      <CircuitTexture id="circuit" opacity={0.55} />

<IconRail active={railActive} onNav={nav} onHome={newChat}
        expanded={railExpanded} onToggleExpand={() => setRailExpanded((e) => !e)}
        onUpgrade={() => setView("upgrade")} user={user} onLogout={logout} />

{view === "chats" && (
        <>
          <ChatListPanel chats={chats} activeChat={activeChat} onSelectChat={selectChat} onNew={newChat}
            onPin={pinChat} onRename={renameChat} onDelete={deleteChat} onDeleteAll={deleteAllChats} onNav={nav}
            onUpgrade={() => setView("upgrade")} collapsed={collapsed} onToggle={() => setCollapsed((c) => !c)}
            planName={user && user.plan} />
          <main className="kb-main">
            {collapsed && (
              <button className="kb-reopen" onClick={() => setCollapsed(false)} data-tip="Abrir conversas">
                <Icon name="panel" size={18} />
              </button>
            )}
            <ChatHome variant={t.homeLayout} provider={provider} onProvider={setProvider}
              onSend={send} messages={messages} chatTitle={chatTitle} userName={userName}
              webSearchOn={webSearchOn} onWebSearch={setWebSearchOn}
              thinkingOn={thinkingOn} onThinking={setThinkingOn} modelChoice={modelChoice}
              connectedIds={connectedIds} onConnect={openConnect}
              onOpenFlow={(wf) => openFlowById(wf.id)} />
          </main>
        </>
      )}

{view === "editor" && (
        <WorkflowPage key={(openFlow && openFlow.id) || "blank"} blueprint={openFlow || BLANK_BLUEPRINT} provider={provider} onProvider={setProvider}
          onBack={() => setView("flows")} />
      )}

{view === "flows" && <FlowsPage flows={flows} onOpen={(f) => openFlowById(f.id)} onNew={() => openEditor(BLANK_BLUEPRINT)} onDelete={deleteFlow} />}
      {view === "connect" && <ConnectPage connectors={connectorCatalog} onConnected={onConnectorChanged} />}
      {view === "runs" && <RunsPage runs={runs} />}
      {view === "models" && <ModelsPage provider={provider} onProvider={setProvider} catalog={modelsCatalog}
        isAdmin={isAdmin} onCatalogChange={setModelsCatalog} onRefresh={refreshModels}
        currentUserId={user && user.id}
        modelChoice={modelChoice} onModelChoice={(p, m) => setModelChoice((s) => ({ ...s, [p]: m }))} />}
      {view === "agents" && <AgentsPage initialAgents={agents} />}
      {view === "history" && <HistoryPage />}
      {view === "settings" && <SettingsPage provider={provider} onUpgrade={() => setView("upgrade")} user={user} isAdmin={isAdmin} onModels={() => setView("models")} />}
      {view === "upgrade" && <UpgradePage onBack={() => setView("settings")} />}

{connectModal && (
        <ConnectorModal connectorId={connectModal.connectorId} catalog={connectorCatalog}
          returnTo="/?v=exact&view=chats" forceReconnect={connectModal.forceReconnect}
          onConnected={onConnectorChanged} onClose={() => setConnectModal(null)} />
      )}

<TweaksPanel>
        <TweakSection label="Layout da home" />
        <TweakRadio label="Estilo" value={t.homeLayout}
          options={[{ value: "A", label: "Minimal" }, { value: "B", label: "Conector" }]}
          onChange={(v) => setTweak("homeLayout", v)} />
        <TweakSection label="Marca" />
        <TweakColor label="Cor de destaque" value={t.accent}
          options={["#B8734A", "#384636", "#11161D"]}
          onChange={(v) => setTweak("accent", v)} />
        <TweakToggle label="Textura tatreez/circuito" value={t.showTexture}
          onChange={(v) => setTweak("showTexture", v)} />
        <TweakSection label="Animação" />
        <TweakSlider label="Velocidade do loader Olive" value={t.loaderSpeed} min={0.6} max={2.2} step={0.1}
          onChange={(v) => setTweak("loaderSpeed", v)} />
      </TweaksPanel>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);