/* global React, Icon, Badge, PageHead, KTile, Bar, ModulePage */ /* ============================================================ Modules2 — Modelos · MCPs · ROI/Custo · Novo agente ============================================================ */ const Icon2 = window.Icon, Badge2 = window.Badge, PageHead2 = window.PageHead, KTile2 = window.KTile, Bar2 = window.Bar, ModulePage2 = window.ModulePage; const GridFx2 = window.GridFx; const { useState: useS2, useEffect: useE2, useRef: useR2 } = React; // =================== PARQUE DE MODELOS — design NN.ai (Parque de Modelos.dc.html) =================== const MODEL_FLEET = [ { color: "#5fd0a6", glow: "rgba(95,208,166,.3)", tileBd: "rgba(95,208,166,.34)", name: "GPT-4o", spec: "OpenAI · contexto 128K", speed: "Rápido", tokens: "1,84M", pct: "59%", custo: "R$ 92,40", acion: "412", preco: "R$ 10,00", tags: [["a", "Processamento de Notas Fiscais"], ["r", "Conciliação Contábil"], ["r", "Triagem de Currículos"], ["r", "Geração de Contratos"], ["r", "Atendimento ao Cliente"]] }, { color: "#e0875f", glow: "rgba(224,135,95,.3)", tileBd: "rgba(224,135,95,.34)", name: "Claude Sonnet 4", spec: "Anthropic · contexto 200K", speed: "Equilibrado", tokens: "980,0k", pct: "31%", custo: "R$ 141,30", acion: "188", preco: "R$ 15,00", tags: [["a", "Conciliação Contábil"], ["r", "Processamento de Notas Fiscais"]] }, { color: "#6e9ff0", glow: "rgba(110,159,240,.3)", tileBd: "rgba(110,159,240,.34)", name: "Gemini 1.5 Pro", spec: "Google · contexto 1M", speed: "Rápido", tokens: "2,31M", pct: "74%", custo: "R$ 22,70", acion: "96", preco: "R$ 5,00", tags: [["a", "Triagem de Currículos"]] }, { color: "#7d83f0", glow: "rgba(125,131,240,.3)", tileBd: "rgba(125,131,240,.34)", name: "DeepSeek V3", spec: "DeepSeek · contexto 64K", speed: "Econômico", tokens: "540,0k", pct: "17%", custo: "R$ 4,30", acion: "58", preco: "R$ 1,10", tags: [["a", "Geração de Contratos"]] }, { color: "#a78bf5", glow: "rgba(167,139,245,.3)", tileBd: "rgba(167,139,245,.34)", name: "Llama 3.1 70B", spec: "Local · on-premise · contexto 128K", speed: "Privado", tokens: "3,12M", pct: "100%", custo: "local", acion: "1.287", preco: "—", tags: [["a", "Atendimento ao Cliente"]] }, ]; function NnMetric2({ accent, icon, label, value, sub, valueSize = 44 }) { return (
{icon} {label}
{value}
{sub && {sub}}
); } function ModelsModule({ agents, t, dark, onSelect }) { const cube = ; const cpuI = ; const coinsI = ; const dollarI = ; return (
{/* page header */}

Parque de Modelos

Quais LLMs sustentam cada agente, quanto consomem e custam. Misture nuvem e on-premise conforme a sensibilidade do dado.

{/* metric cards */}
{/* model grid */}
{MODEL_FLEET.map((m) => (
{cube}

{m.name}

{m.spec}

{m.speed}
Tokens hoje {m.tokens}
{[["CUSTO HOJE", m.custo], ["ACION.", m.acion], ["R$/1M OUT", m.preco]].map(([l, v]) => (
{l}
{v}
))}
{m.tags.map(([kind, label], i) => kind === "a" ? ( {label} ) : ( reserva de {label} ))}
))}
); } // =================== CATÁLOGO DE MCPs — design NN.ai (Catálogo de MCPs.dc.html) =================== const MCP_ICO = { scan: <>, doc: <>, db: <>, ledger: <>, bank: <>, filePerson: <>, people: <>, briefcase: <>, pen: <>, lock: <>, chat: <>, book: <>, crm: <>, mail: <>, drive: <>, }; const McpIco = ({ k, size = 22 }) => {MCP_ICO[k] || MCP_ICO.doc}; const MCP_ST = { ok: { status: "Operacional", color: "#5fd0a6", bg: "rgba(95,208,166,.08)", bd: "rgba(95,208,166,.26)", glow: "rgba(95,208,166,.55)", connBd: "rgba(95,208,166,.4)" }, warn: { status: "Atenção", color: "#e3b25b", bg: "rgba(227,178,91,.08)", bd: "rgba(227,178,91,.28)", glow: "rgba(227,178,91,.55)", connBd: "rgba(227,178,91,.4)" }, fail: { status: "Falha", color: "#e07a82", bg: "rgba(224,122,130,.1)", bd: "rgba(224,122,130,.32)", glow: "rgba(224,122,130,.6)", connBd: "rgba(224,122,130,.45)" }, }; const MCP_AG = { P: { l: "P", c: "#7fb4e6", g: "rgba(127,180,230,.4)" }, C: { l: "C", c: "#9d97f0", g: "rgba(157,151,240,.4)" }, T: { l: "T", c: "#5fd0a6", g: "rgba(95,208,166,.4)" }, G: { l: "G", c: "#e0b07f", g: "rgba(224,176,127,.4)" }, A: { l: "A", c: "#6ec5e0", g: "rgba(110,197,224,.4)" } }; const MCP_CONNECTED = [ ["OCR Documentos", "Documentos · 412 cham./dia · 180 ms", "ok", 4, ["P"], "scan"], ["SEFAZ · NF-e", "Fiscal · 412 cham./dia · 320 ms", "ok", 4, ["P"], "doc"], ["TOTVS Protheus", "ERP · 600 cham./dia · 225 ms", "ok", 5, ["P", "C"], "db"], ["Plano de Contas", "Contábil · 188 cham./dia · 90 ms", "ok", 3, ["C"], "ledger"], ["Open Finance", "Bancário · 188 cham./dia · 1,80 s", "warn", 4, ["C"], "bank"], ["Parser de CV", "RH · 96 cham./dia · 140 ms", "ok", 4, ["T"], "filePerson"], ["ATS · LinkedIn", "RH · 96 cham./dia · 420 ms", "ok", 4, ["T"], "people"], ["Banco de Vagas", "RH · 96 cham./dia · 110 ms", "ok", 3, ["T"], "briefcase"], ["Templates Jurídicos", "Jurídico · 58 cham./dia · 70 ms", "ok", 4, ["G"], "doc"], ["Assinatura Digital", "Jurídico · 58 cham./dia · 260 ms", "ok", 4, ["G"], "pen"], ["Cofre de Documentos", "Documentos · 58 cham./dia · 150 ms", "ok", 4, ["G"], "lock"], ["WhatsApp API", "Comunicação · 1.287 cham./dia · —", "fail", 4, ["A"], "chat"], ["Base de Conhecimento", "Conhecimento · 1.287 cham./dia · 120 ms", "ok", 3, ["A"], "book"], ["CRM", "CRM · 1.287 cham./dia · 300 ms", "ok", 4, ["A"], "crm"], ["E-mail", "Comunicação · 640 cham./dia · 180 ms", "ok", 3, ["A"], "mail"], ]; const MCP_AVAIL = [["Receita Federal", "Fiscal", "bank", 5], ["Banco Central · PIX", "Bancário", "bank", 4], ["Google Drive", "Documentos", "drive", 6], ["Slack", "Comunicação", "chat", 4]]; function McpStepIcon({ state }) { if (state === "done") return ; if (state === "fail") return ; if (state === "running") return ; return ; } function mcpStepStyle(state) { if (state === "done") return { ringBg: "rgba(95,208,166,.1)", ringBd: "rgba(95,208,166,.34)", ringColor: "#5fd0a6", labelColor: "#fff", subColor: "rgba(207,207,207,.55)" }; if (state === "fail") return { ringBg: "rgba(224,122,130,.12)", ringBd: "rgba(224,122,130,.4)", ringColor: "#f09aa1", labelColor: "#fff", subColor: "#f09aa1" }; if (state === "running") return { ringBg: "rgba(174,203,224,.1)", ringBd: "rgba(174,203,224,.4)", ringColor: "#aecbe0", labelColor: "#fff", subColor: "#aecbe0" }; return { ringBg: "rgba(255,255,255,.02)", ringBd: "#26262a", ringColor: "#54545a", labelColor: "rgba(207,207,207,.45)", subColor: "rgba(207,207,207,.3)" }; } function TestConnectionModal({ mcp, onClose }) { const [step, setStep] = useS2(0); const [status, setStatus] = useS2("running"); const timer = useR2(null); const fail = mcp.name === "WhatsApp API"; const labels = ["Autenticação da chave", "Handshake com o endpoint", "Descoberta de tools", "Chamada de exemplo", "Validação da resposta"]; const lats = ["118 ms", "174 ms", "92 ms", "236 ms", "58 ms"]; const run = React.useCallback(() => { clearTimeout(timer.current); setStep(0); setStatus("running"); const tick = (i) => { timer.current = setTimeout(() => { if (fail && i === 2) { setStep(1); setStatus("fail"); return; } const done = i >= labels.length; setStep(i); setStatus(done ? "done" : "running"); if (!done) tick(i + 1); }, i === 1 ? 420 : 720); }; tick(1); }, [fail, labels.length]); useE2(() => { run(); return () => clearTimeout(timer.current); }, [run]); const stateOf = (i) => { if (status === "fail" && i === step) return "fail"; if (i < step) return "done"; if (i === step && status === "running") return "running"; return "pending"; }; const ok = status === "done"; const failed = status === "fail"; const resultColor = ok ? "#7fe0bc" : "#f09aa1"; const IconComp = window.McpCatalogIcon; return (
e.stopPropagation()} style={{ width: "100%", maxWidth: 540, maxHeight: "88vh", display: "flex", flexDirection: "column", borderRadius: 22, background: "linear-gradient(180deg,#111113,#0a0a0c)", border: "1px solid #232327", boxShadow: "0 40px 100px rgba(0,0,0,.66), inset 0 1px 0 rgba(255,255,255,.04)", overflow: "hidden", animation: "nnModalIn .4s cubic-bezier(.22,1,.36,1)" }}>
{IconComp ? : }
Teste de conexão

{mcp.name}

{labels.map((label, i) => { const st = stateOf(i); const sty = mcpStepStyle(st); const sub = st === "done" ? lats[i] : st === "running" ? "..." : st === "fail" ? "timeout" : ""; return (
{label}
{sub}
); })} {(ok || failed) && (
{ok ? "Conexão saudável" : "Falha na conexão"}
{ok ? "Todos os checks passaram com sucesso." : "Endpoint não respondeu (timeout após 30 s)."}
{ok && (
LATÊNCIA TOTAL
678 ms
TOOLS VERIFICADAS
{mcp.tools} / {mcp.tools}
)}
{ok ? '{\n "ok": true,\n "tool": "ping",\n "latency_ms": 236,\n "result": "pong"\n}' : '{\n "ok": false,\n "error": "ECONNREFUSED",\n "detail": "no response from host",\n "retries": 3\n}'}
)}
{ok || failed ? : }{ok ? "Teste concluído" : failed ? "Teste falhou" : "Executando teste..."}
); } function scopesForConnect(cat) { const map = { "Fiscal": ["nfe.read", "nfe.issue", "sefaz.query"], "Bancário": ["accounts.read", "pix.send", "transactions.read"], "Documentos": ["files.read", "files.write", "folders.list"], "Comunicação": ["messages.send", "channels.read", "users.read"], }; return map[cat] || ["read", "write"]; } function ConnectMcpModal({ item, onClose }) { const [phase, setPhase] = useS2("form"); const [step, setStep] = useS2(0); const timer = useR2(null); const IconComp = window.McpCatalogIcon; const steps = ["Enviando credenciais", "Estabelecendo conexão segura", "Verificando permissões"]; useE2(() => () => clearTimeout(timer.current), []); const doConnect = () => { clearTimeout(timer.current); setPhase("connecting"); setStep(0); const tick = (i) => { timer.current = setTimeout(() => { const done = i >= steps.length; setStep(i); if (done) setPhase("done"); else tick(i + 1); }, 760); }; tick(1); }; return (
e.stopPropagation()} style={{ width: "100%", maxWidth: 520, maxHeight: "88vh", display: "flex", flexDirection: "column", borderRadius: 22, background: "linear-gradient(180deg,#111113,#0a0a0c)", border: "1px solid #232327", boxShadow: "0 40px 100px rgba(0,0,0,.66), inset 0 1px 0 rgba(255,255,255,.04)", overflow: "hidden", animation: "nnModalIn .4s cubic-bezier(.22,1,.36,1)" }}>
{IconComp ? : }
Conectar integração

{item.name}

{phase === "form" && (

Informe a chave de API de {item.name} para autorizar a NN a acessar este serviço. Você pode revogar o acesso a qualquer momento.

Permissões solicitadas
{scopesForConnect(item.cat).map((s) =>
{s}
)}
)} {phase === "connecting" && (
{steps.map((label, i) => { const st = i < step ? "done" : (i === step ? "running" : "pending"); const sty = mcpStepStyle(st); return
{label}
; })}
)} {phase === "done" && (

{item.name} conectado

A integração está ativa e {item.tools} tools já estão disponíveis para os agentes.

)}
{phase === "form" && <>} {phase === "connecting" && } {phase === "done" && }
); } function McpsModule({ agents, t, dark, onSelect, onEditCreds }) { const totalTools = MCP_CONNECTED.reduce((s, m) => s + m[3], 0); const fails = MCP_CONNECTED.filter((m) => m[2] === "fail").length; const [testMcp, setTestMcp] = useS2(null); const [connectMcp, setConnectMcp] = useS2(null); return (

Catálogo de MCPs

Cada MCP é uma caixa de ferramentas: conecte uma vez e ela expõe várias tools — as ferramentas que dão poderes ao agente. Abra um MCP para ver o que tem dentro.

} label="CAIXAS CONECTADAS" value={MCP_CONNECTED.length} sub="MCPs em escopo global" /> } label="FERRAMENTAS (TOOLS)" value={totalTools} sub="expostas pelas caixas" />
COM FALHA
{fails}
exige reconexão

Conectadas

{MCP_CONNECTED.length}
{MCP_CONNECTED.map(([name, meta, sev, tools, ags, ic]) => { const S = MCP_ST[sev]; const mcpPayload = { name, meta, status: sev, tools, icon: ic, catalogIcon: ic }; return (

{name}

{meta}

{S.status} {tools}
USADA POR
{ags.map((k) => { const a = MCP_AG[k]; return {a.l}; })}
); })}

Disponíveis para conectar

{MCP_AVAIL.map(([name, cat, ic, tools]) => (

{name}

{cat}

))}
{testMcp && setTestMcp(null)} />} {connectMcp && setConnectMcp(null)} />}
); } // =================== ROI & CUSTO — design NN.ai (ROI & Custo.dc.html) =================== const ROI_CHIPS = [["Toda a operação", "transparent"], ["Processamento de Notas Fiscais", "#7fb4e6"], ["Conciliação Contábil", "#9d97f0"], ["Triagem de Currículos", "#5fd0a6"], ["Geração de Contratos", "#e0b07f"], ["Atendimento ao Cliente", "#6ec5e0"]]; const ROI_AGENTS = [ { name: "Processamento de Notas Fiscais", color: "#7fb4e6", glow: "rgba(127,180,230,.5)", custo: "R$ 2.710,00", orc: "R$ 4.000,00", pct: "68%", economia: "R$ 18.705,60", bar: "#5fd0a6", barFrom: "rgba(95,208,166,.4)" }, { name: "Conciliação Contábil", color: "#9d97f0", glow: "rgba(157,151,240,.5)", custo: "R$ 4.180,00", orc: "R$ 5.000,00", pct: "84%", economia: "R$ 12.080,70", bar: "#e3b25b", barFrom: "rgba(227,178,91,.4)" }, { name: "Triagem de Currículos", color: "#5fd0a6", glow: "rgba(95,208,166,.5)", custo: "R$ 690,00", orc: "R$ 1.500,00", pct: "46%", economia: "R$ 10.521,90", bar: "#5fd0a6", barFrom: "rgba(95,208,166,.4)" }, { name: "Geração de Contratos", color: "#e0b07f", glow: "rgba(224,176,127,.5)", custo: "R$ 132,00", orc: "R$ 800,00", pct: "17%", economia: "R$ 7.404,30", bar: "#5fd0a6", barFrom: "rgba(95,208,166,.4)" }, { name: "Atendimento ao Cliente", color: "#6ec5e0", glow: "rgba(110,197,224,.5)", custo: "R$ 420,00", orc: "R$ 700,00", pct: "60%", economia: "R$ 24.161,40", bar: "#5fd0a6", barFrom: "rgba(95,208,166,.4)" }, ]; function RoiModule({ agents, t, dark, onSelect }) { const [chartFilter, setChartFilter] = useS2("Toda a operação"); const [threshold, setThreshold] = useS2("90%"); const [emailOn, setEmailOn] = useS2(true); const [whatsOn, setWhatsOn] = useS2(false); const kpi = (special, accentBar, icon, label, value, sub, subColor) => (
{icon}{label}
{value}
{sub}
); const ibox = (accent, svg) => {svg}; const toggle = (on, setOn) => ( setOn((v) => !v)} style={{ width: 40, height: 23, borderRadius: 200, position: "relative", cursor: "pointer", background: on ? "rgba(174,203,224,.9)" : "#26262a", border: `1px solid ${on ? "transparent" : "#303034"}`, boxShadow: on ? "0 0 12px rgba(174,203,224,.4)" : "none", flex: "none" }}> ); // ---- dados do gráfico conforme o filtro selecionado ---- const parseBRL = (s) => Number(String(s).replace(/[^\d,]/g, "").replace(",", ".")); const fmtBRL2 = (v) => "R$ " + v.toLocaleString("pt-BR", { minimumFractionDigits: 2, maximumFractionDigits: 2 }); const fmtK = (v) => { if (!v) return "0"; const k = v / 1000; return (k >= 10 ? Math.round(k).toString() : k.toFixed(1).replace(/\.0$/, "")).replace(".", ",") + "k"; }; const totalCusto = ROI_AGENTS.reduce((s, a) => s + parseBRL(a.custo), 0); const cd = (() => { let proj, orc, color; if (chartFilter === "Toda a operação") { proj = totalCusto; orc = 12000; color = "#72b2e6"; } else { const a = ROI_AGENTS.find((x) => x.name === chartFilter) || ROI_AGENTS[0]; proj = parseBRL(a.custo); orc = parseBRL(a.orc); color = a.color; } const gasto = proj * 0.6, saldo = orc - proj; const axisMax = orc / 0.857; // mantém o teto sempre em ~86% da altura const yMap = (v) => 250 - Math.max(0, Math.min(1.04, v / axisMax)) * 230; const xDay = (d) => 44 + ((d - 1) / 29) * 620; const solid = [1, 3, 5, 7, 9, 11, 13, 15, 17, 18].map((d) => `${xDay(d).toFixed(0)},${yMap(gasto * Math.pow((d - 1) / 17, 1.15)).toFixed(1)}`); const dash = [18, 21, 24, 27, 30].map((d) => `${xDay(d).toFixed(0)},${yMap(gasto + (proj - gasto) * ((d - 18) / 12)).toFixed(1)}`); return { color, gasto, proj, orc, saldo, axisMax, solidStr: solid.join(" "), areaStr: `${solid.join(" ")} 407,250 44,250`, dashStr: dash.join(" "), hojeY: yMap(gasto), endY: yMap(proj), pctOrc: orc ? Math.round((proj / orc) * 100) : 0 }; })(); return (

ROI & Custo

O business case da camada agêntica: valor gerado (tempo economizado) versus o custo de modelos e infraestrutura.

{kpi(true, "rgba(95,208,166,.5)", ibox("#7fe0bc", ), "ECONOMIA / MÊS", "R$ 72.873,90", "a R$ 90/h de analista")} {kpi(false, "rgba(224,122,130,.4)", ibox("#f09aa1", ), "CUSTO / MÊS", "R$ 8.132,00", "API + infraestrutura")} {kpi(false, "rgba(174,203,224,.45)", ibox("#aecbe0", ), "ROI", "9.0×", "retorno sobre o custo")} {kpi(false, "rgba(174,203,224,.45)", ibox("#aecbe0", ), "EQUIVALENTE", "5.1 FTE", "187 h/sem economizadas")}

Valor líquido de R$ 64.741,90/mês. Cada R$ 1 investido na camada agêntica devolve aproximadamente R$ 8.96 em horas de equipe.

Custo previsto vs. orçamento

Ciclo Junho · 2026 · dia 18/30
{/* CHART CARD */}
{ROI_CHIPS.map(([label, dot]) => { const on = label === chartFilter; return setChartFilter(label)} style={{ display: "inline-flex", alignItems: "center", gap: 8, height: 32, padding: "0 14px", borderRadius: 200, fontSize: 12.5, fontWeight: 600, color: on ? "#e8eff6" : "rgba(226,225,223,.8)", background: on ? "rgba(174,203,224,.12)" : "rgba(255,255,255,.02)", border: `1px solid ${on ? "rgba(174,203,224,.26)" : "#26262a"}` }}>{label}; })}
{[[24, 1], [90, .714], [141, .493], [198, .243], [254, 0]].map(([yy, f]) => {fmtK(f * cd.axisMax)})} 1612182430 {`TETO ${fmtBRL2(cd.orc)}`} HOJE
GASTO ATÉ HOJE
{fmtBRL2(cd.gasto)}
dia 18 de 30
PROJEÇÃO FIM DO CICLO
{fmtBRL2(cd.proj)}
{cd.pctOrc}% do orçamento
SALDO DO ORÇAMENTO
= 0 ? "#7fe0bc" : "#f09aa1", marginTop: 6 }}>{fmtBRL2(cd.saldo)}
{cd.saldo >= 0 ? "folga prevista" : "acima do orçamento"}
{/* ALERTS CARD */}

Alertas de orçamento

Aviso automático quando a projeção atinge o limite.

DISPARAR EM
{["75%", "90%", "100%"].map((th) => { const on = th === threshold; return setThreshold(th)} style={{ flex: 1, display: "flex", alignItems: "center", justifyContent: "center", height: 34, borderRadius: 8, fontSize: 12.5, fontWeight: on ? 700 : 600, color: on ? "#e8eff6" : "#76767c", background: on ? "rgba(174,203,224,.12)" : "transparent", border: `1px solid ${on ? "rgba(174,203,224,.24)" : "transparent"}`, cursor: "pointer" }}>{th}; })}
NOTIFICAR POR
E-mail do responsável {toggle(emailOn, setEmailOn)}
WhatsApp · gestor {toggle(whatsOn, setWhatsOn)}
NO LIMITE (90%) 0 agentes
Nenhum agente acima de 90% do orçamento.

Orçamento por agente

AGENTECUSTO / MÊSORÇAMENTOCONSUMOECONOMIA
{ROI_AGENTS.map((a) => (
{a.name} {a.custo} {a.orc} {a.pct} {a.economia}
))}
); } // =================== NOVO AGENTE (modal) — design NN.ai =================== const NA_TEMPLATES = [ { name: "Classificação de Documentos", desc: "OCR + extração e categorização de qualquer documento recebido.", d: "M4 8V6a2 2 0 0 1 2-2h2M16 4h2a2 2 0 0 1 2 2v2M20 16v2a2 2 0 0 1-2 2h-2M8 20H6a2 2 0 0 1-2-2v-2M7 12h10" }, { name: "Cobrança & Inadimplência", desc: "Detecta atrasos, gera régua de cobrança e dispara lembretes.", d: "M12 2v20M16.5 6.5A4 4 0 0 0 12 4.5h-.8a3.2 3.2 0 0 0 0 6.4h1.6a3.2 3.2 0 0 1 0 6.4H11A4 4 0 0 1 7 16" }, { name: "Onboarding de Clientes", desc: "Coleta documentos, valida cadastro e abre a conta do cliente.", d: "M9 8a3 3 0 1 0 0-.01M3 20c0-3.3 2.7-5.5 6-5.5s6 2.2 6 5.5M16 4.5a3 3 0 0 1 0 5.8M21 20c0-2.4-1.4-4.2-3.5-5" }, { name: "Análise de Contratos", desc: "Lê contratos, extrai cláusulas de risco e resume obrigações.", d: "M7 3h7l4 4v14H7zM13 3v5h5M10 13h5M10 16.5h5" }, { name: "Relatórios Gerenciais", desc: "Consolida dados e gera relatórios executivos sob demanda.", d: "M3 13h3l2.5 6 4-15 2.5 9H21" }, { name: "Agente em branco", desc: "Comece do zero e componha as tools manualmente.", d: "M12 5v14M5 12h14", dashed: true }, ]; function NewAgentModal({ t, dark, onClose, onCreate }) { const [tpl, setTpl] = useS2(null); const hasPick = tpl !== null; return (
e.stopPropagation()} style={{ width: "100%", maxWidth: 920, maxHeight: "88vh", display: "flex", flexDirection: "column", borderRadius: 22, background: "linear-gradient(180deg,#111113,#0a0a0c)", border: "1px solid #232327", boxShadow: "0 40px 100px rgba(0,0,0,.66), inset 0 1px 0 rgba(255,255,255,.04)", overflow: "hidden" }}>

Novo agente

Comece a partir de um template ou do zero.

Escolha um ponto de partida
{NA_TEMPLATES.map((x, i) => { const on = tpl === i; return (
setTpl(i)} className="nn-tpl" style={{ position: "relative", padding: 20, borderRadius: 16, background: "rgba(255,255,255,.018)", border: `1px solid ${on ? "rgba(174,203,224,.55)" : "#1f1f22"}`, boxShadow: on ? "0 0 0 1px rgba(174,203,224,.35), 0 18px 44px rgba(0,0,0,.5), 0 0 34px rgba(58,143,220,.14)" : "none", cursor: "pointer" }}> {on && }

{x.name}

{x.desc}

); })}
{hasPick ? `Template selecionado · ${NA_TEMPLATES[tpl].name}` : "Selecione um ponto de partida"}
); } Object.assign(window, { ModelsModule, McpsModule, RoiModule, NewAgentModal, McpCatalogIcon: McpIco });