diff --git a/Dockerfile b/Dockerfile
index 89d9a9a..4c426e0 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -1,11 +1,11 @@
FROM node:22-bookworm-slim AS base
WORKDIR /app
-COPY --chown=node:node package.json server.mjs ./
+COPY --chown=node:node package.json server.mjs studio.mjs ./
COPY --chown=node:node public ./public
RUN mkdir /app/data && chown node:node /app/data
FROM base AS test
-COPY --chown=node:node auth.test.mjs ./
+COPY --chown=node:node auth.test.mjs studio.test.mjs ./
USER node
RUN npm test
diff --git a/README.md b/README.md
index c3c3f32..25359ac 100644
--- a/README.md
+++ b/README.md
@@ -1,28 +1,51 @@
# TS6 Botflow
-Primeira experiência local: login Discord, conta do dono, sessão persistente e painel XanaX. Logótipos copiados sem alterações do projeto existente. As pastas de origem permanecem intactas.
+Painel local XanaX para gerir bots TeamSpeak, com login Discord e editor visual de flows. Mant?m os log?tipos originais e o tema flat roxo. As pastas dos projetos de origem permanecem intactas.
-O editor de flows e o motor de bots ainda não estão implementados nesta versão. Nenhuma ligação ao TeamSpeak é feita.
+## Funcionalidades
+
+- Dashboard com bots, flows e execu??es guardados na base de dados.
+- Editor com blocos arrast?veis, liga??es, condi??es, propriedades, zoom e grava??o.
+- Blocos: temporizador, in?cio manual, informa??es do servidor, clientes, ordena??o, limite, prepara??o de texto, edi??o da descri??o de canal, mensagem, espera e registo.
+- Simula??o identificada com dados de exemplo, sem enviar pedidos ao TeamSpeak.
+- Execu??o manual ou por temporizador, com hist?rico e resultado de cada passo. Um bot n?o executa duas vezes em simult?neo.
+- Liga??es WebQuery, teste de liga??o e API keys cifradas em repouso.
+- Vari?veis por bot, acess?veis como `{{variables.nome}}`. Outros valores: `{{server.virtualserver_clientsonline}}`, `{{count}}`, `{{top}}`, `{{text}}` e `{{time}}`.
+
+O primeiro arranque cria um rascunho **Estat?sticas**, desativado, para atualizar a descri??o do canal **21** a cada 30 segundos. O top inicial ordena as pessoas atualmente online pela data de entrada; n?o ? um ranking hist?rico de tempo acumulado.
+
+Esta vers?o n?o inclui reprodu??o de m?sica, eventos SSH, webhooks, edi??o de permiss?es nem gest?o de perfis pelo painel. Cada bot tem um flow. O editor disponibiliza os blocos implementados acima.
## Docker / Portainer
-Para **Web editor com imagem construida no Gitea**, seguir [deploy/README.md](deploy/README.md). O workflow `.gitea/workflows/container.yaml` testa e publica a imagem a cada push em main. As stacks prontas estao em `deploy/runner-stack.yaml` e `deploy/bot-stack.yaml`.
+Para Web editor com imagem constru?da no Gitea, consultar [deploy/README.md](deploy/README.md) e usar [deploy/bot-stack.yaml](deploy/bot-stack.yaml). Cada push em `main` executa os testes e publica a imagem. Depois do workflow verde, atualizar a stack no Portainer com download da imagem e recria??o do container. Restart sozinho n?o descarrega a nova imagem.
-Para construcao local por Docker Compose, usar `compose.yaml` a partir deste repositório. O serviço é construído pelo Dockerfile, porta 3080, volume persistente `botflow-data`.
+Para construir localmente com Docker Compose, usar `compose.yaml`. A aplica??o escuta na porta 3080 e preserva os dados num volume montado em `/app/data`.
-Configurar as quatro variáveis nas Environment variables da stack (ou copiar `.env.example` para `.env` quando executado por Docker Compose):
+Vari?veis de ambiente:
-- `APP_URL`: endereço usado no navegador, por exemplo `http://192.168.88.99:3080`.
-- `DISCORD_CLIENT_ID`: ID da aplicação Discord.
-- `DISCORD_CLIENT_SECRET`: segredo OAuth da aplicação, nunca o token de um bot.
-- `OWNER_DISCORD_ID`: ID **numérico** da tua conta Discord, não o nome `bxio`.
+- `APP_URL`: endere?o do navegador, por exemplo `http://192.168.88.99:3080`.
+- `DISCORD_CLIENT_ID`: ID da aplica??o Discord.
+- `DISCORD_CLIENT_SECRET`: segredo OAuth da aplica??o.
+- `OWNER_DISCORD_ID`: ID num?rico da conta do dono.
+- `ALLOWED_DISCORD_IDS`: IDs de leitores separados por v?rgulas. Por defeito, `723613831196311603`; valor vazio remove todos os leitores.
-No Discord Developer Portal, OAuth2 → Redirects, adicionar exatamente `http://192.168.88.99:3080/auth/discord/callback` (ajustar se APP_URL mudar). É possível aproveitar a aplicação Discord existente adicionando esse redirect; manter os redirects antigos.
+No Discord Developer Portal, adicionar o redirect exato `http://192.168.88.99:3080/auth/discord/callback`, ajustando ao `APP_URL`. O navegador e o container precisam de Internet para o OAuth; o site pode continuar apenas na rede local.
-Para copiar o ID: Discord → Definições → Avançadas → Modo de programador; clicar com o botão direito na tua conta → Copiar ID do utilizador.
+O **Dono** pode configurar, guardar, simular e executar. O **Leitor** pode consultar. Outras contas s?o recusadas; as permiss?es s?o tamb?m verificadas no servidor.
-O navegador e o container precisam de Internet para o OAuth Discord. O painel não precisa de estar publicado na Internet. A rede local precisa de conseguir aceder à porta 3080. A conta OWNER_DISCORD_ID entra como Dono. O ID 723613831196311603 também está autorizado como Leitor por defeito. ALLOWED_DISCORD_IDS permite substituir a lista de leitores (IDs separados por vírgulas; valor vazio remove todos). Outras contas são recusadas. A gestão de utilizadores pelo painel ainda não está implementada.
+## Ligar ao TeamSpeak
-Local: Node 22.15+, definir as mesmas variáveis e executar `npm start`. Testes: `npm test`.
+Entrar com a conta do dono. Em **Liga??es**, configurar o endere?o WebQuery HTTP/HTTPS, o ID do servidor virtual e a API key TeamSpeak. Por exemplo, `http://teamspeak6:10080` funciona quando ambos os containers partilham uma rede Docker com esse nome resolv?vel. Testar a liga??o, escolher esse servidor na configura??o do bot, simular e s? depois ativar.
-Sessões HttpOnly/SameSite, estado OAuth de uso único, credenciais no ambiente e armazenamento SQLite no volume. Em HTTP local os cookies não têm Secure; usar HTTPS quando houver publicação. Não adicionar `.env` nem dados ao Git.
+O temporizador aceita intervalos a partir de um segundo. A execu??o seguinte aguarda a conclus?o da anterior; pedidos de rede e blocos de espera podem prolongar o intervalo efetivo. A configura??o de permiss?es e prote??o contra flood do TeamSpeak deve permitir os pedidos do bot.
+
+Sess?es e flows usam SQLite no volume. A chave de cifra das API keys fica em `/app/data/credentials.key`; preservar o volume completo nas c?pias de seguran?a. O hist?rico ret?m as ?ltimas 500 execu??es. N?o adicionar `.env` nem dados ao Git.
+
+## Desenvolvimento e valida??o
+
+Node 22.15+, mesmas vari?veis de ambiente e `npm start`. Executar `npm test` para verificar autentica??o, restri??es de acesso, persist?ncia, simula??o e execu??o WebQuery com transporte de teste. O build Docker executa os testes antes da publica??o.
+
+O editor foi verificado em navegador desktop e m?vel. A execu??o no TeamSpeak real depende da liga??o e API key configuradas na instala??o; os testes locais n?o alteram o servidor real.
+
+A fonte Public Sans ? distribu?da em `public/fonts` com a licen?a OFL. Os log?tipos foram copiados sem altera??es do projeto existente.
diff --git a/package.json b/package.json
index 8e186f2..4f3a060 100644
--- a/package.json
+++ b/package.json
@@ -1 +1 @@
-{"name":"ts6-botflow","version":"0.1.0","private":true,"type":"module","scripts":{"start":"node --experimental-sqlite server.mjs","test":"node --experimental-sqlite --test"},"engines":{"node":">=22.15"}}
+{"name":"ts6-botflow","version":"0.2.0","private":true,"type":"module","scripts":{"start":"node --experimental-sqlite server.mjs","test":"node --experimental-sqlite --test"},"engines":{"node":">=22.15"}}
diff --git a/public/app.js b/public/app.js
index 2603f00..2aa3d8b 100644
--- a/public/app.js
+++ b/public/app.js
@@ -1,33 +1,50 @@
-const app = document.querySelector('#app');
-const errors = { denied: 'Esta conta não está autorizada a entrar no painel.', authentication: 'O login expirou ou foi cancelado. Tenta novamente.', configuration: 'Falta configurar o Discord e o ID numérico do dono no Docker.' };
-async function boot() {
- const response = await fetch('/api/me');
- if (!response.ok) throw new Error();
- const { user, configured } = await response.json();
- if (!user) {
- app.innerHTML = `O teu centro de bots. Configura, acompanha e organiza as automações do teu TeamSpeak num só lugar.
Entrar com Discord → Acesso reservado · TS6 Botflow
Acesso ao painel A tua conta está autorizada a entrar no painel.
Perfil
ID Discord
Novos utilizadores Sem acesso
Bots e flows A primeira experiência valida o painel e o acesso.
◇ Ainda não existem bots.
O editor de flows e a ligação ao TeamSpeak serão a próxima etapa.
Dashboard Bem-vindo ao teu centro de automações.
${[['Bots',dashboard.bots.length],['Flows',dashboard.flows.length],['Execuções',dashboard.executions.length],['Servidores',dashboard.connections.length]].map(([label,value])=>`
${label} ${value}
`).join('')}
Atividade recente ◷ Ainda sem execuções.
A atividade dos bots aparecerá aqui.
O teu espaço Acesso
Autenticação Discord
Ligação TeamSpeak Por configurar
Começamos por testar o login. Depois ligamos os bots e construímos os flows.
${icon(i)} ${title} ${text}
${icon(i)}${text} `;
+const heading=(title,subtitle,actions='')=>``;
+const ago=d=>!d?'Sem execuções':Math.floor((Date.now()-Date.parse(d))/60000)<1?'Agora':`Há ${Math.floor((Date.now()-Date.parse(d))/60000)} min`;
+async function boot(){const me=await api('/api/me');user=me.user;if(!user){app.innerHTML=`TS6 BOTFLOW O teu centro de bots. Cria flows, gere bots e acompanha as tuas automações num só lugar.
Entrar com Discord ${icon('play')} Acesso reservado às contas autorizadas.
XanaX · TS6 Botflow O teu centro de automações ${icon(bot.color==='red'?'shield':bot.color==='orange'?'music':bot.color==='cyan'?'users':'bot')}
${esc(bot.name)} ${bot.enabled?'Ativo':'Rascunho'} ${esc(bot.description||'Personaliza o flow deste bot.')}
${icon('flow')}1 flow ${icon('play')}${runs.length} execuções ${icon('clock')}${ago(runs[0]?.startedAt)}
${icon('flow')}Abrir flow ${icon('settings')}
${[['Bots ativos',data.bots.filter(b=>b.enabled).length,'bot','green'],['Execuções hoje',data.executions.filter(e=>new Date(e.startedAt).toLocaleDateString('pt-PT',{timeZone:'Europe/Lisbon'})===today).length,'play','cyan'],['Flows guardados',data.bots.length,'flow','purple'],['Servidores configurados',data.connections.length,'link','orange']].map(([label,n,i,c])=>`
`).join('')}
Os teus bots Ver todos → ${data.bots.map(botCard).join('')}
Atividade recente Ver execuções → ${data.executions.slice(0,4).map(runRow).join('')||empty('clock','Ainda sem execuções','Simula um flow para acompanhar aqui cada passo.')}${icon('flow')} O teu primeiro flow O rascunho Estatísticas prepara a descrição do canal 21. Escolhe a ligação e simula antes de ativar.
${icon('flow')}Abrir editor ${data.bots.length} bots · ${data.bots.filter(b=>b.enabled).length} ativos
${data.bots.map(botCard).join('')}
Começar um novo bot Rascunhos para personalizar no editor ${[['Estatísticas','green','bot'],['Moderação','red','shield'],['Boas-vindas','cyan','users'],['Música','orange','music']].map(([name,c,i])=>`
${icon(i)} ${name} Cria um rascunho e configura os seus blocos.
Criar bot → `).join('')}
Nome Descrição Cor${['purple','green','red','cyan','orange'].map(c=>`${c} `).join('')} O bot começa desativado. Usa o flow de estatísticas como base ou substitui os blocos.
`,async form=>{const bot=await api('/api/bots',{method:'POST',body:JSON.stringify(Object.fromEntries(form))});botId=bot.id;page='editor';});}
+function configureBot(id){botId=id;const bot=selectedBot();modal('Configuração do bot',`Geral Variáveis
Nome Descrição ServidorEscolher ligação ${data.connections.map(c=>`${esc(c.name)} `).join('')} Escolhe uma ligação para executar o flow no TeamSpeak.
`,f=>api(`/api/bots/${bot.id}`,{method:'PUT',body:JSON.stringify(Object.fromEntries(f))}));document.querySelector('#config-vars').onclick=()=>{document.querySelector('#dialog').close();navigate('variables');};}
+function editorPage(){const bot=selectedBot();if(!bot){document.querySelector('#content').innerHTML=heading('Editor de flows','Cria um bot para começar.',button('create-bot','Criar bot'))+empty('flow','Ainda sem flows','Cria o teu primeiro bot.');wireBots();return;}draft=structuredClone(bot);selectedNode=draft.graph.nodes[0]?.id;zoom=.85;const groups=[...new Set(Object.values(data.nodeTypes).map(t=>t.group))];document.querySelector('#content').innerHTML=heading('Editor de flows','Cria e edita a lógica dos teus bots com um editor visual.',`${data.bots.map(b=>`${esc(b.name)} `).join('')} ${owner()?'Rascunho':'Só leitura'} `)+``;
+ document.querySelector('#bot-select').onchange=e=>{if(dirty&&!confirm('Sair sem guardar?')){e.target.value=botId;return;}botId=e.target.value;dirty=false;editorPage();};document.querySelectorAll('[data-add]').forEach(b=>b.onclick=()=>addNode(b.dataset.add));document.querySelector('#search-block').oninput=e=>document.querySelectorAll('.palette-item').forEach(b=>b.hidden=!b.textContent.toLowerCase().includes(e.target.value.toLowerCase()));document.querySelector('#zoom-in').onclick=()=>{zoom=Math.min(1.5,zoom+.1);setZoom();};document.querySelector('#zoom-out').onclick=()=>{zoom=Math.max(.4,zoom-.1);setZoom();};document.querySelector('#fullscreen').onclick=()=>document.fullscreenElement?document.exitFullscreen():document.querySelector('#editor').requestFullscreen().catch(()=>toast('Ecrã inteiro indisponível.',true));document.querySelector('#save-flow').onclick=saveFlow;document.querySelector('#simulate').onclick=()=>execute(true);document.querySelector('#run').onclick=()=>execute(false);renderGraph();}
+function markDirty(){dirty=true;const el=document.querySelector('#save-state');el.textContent='Por guardar';el.className='unsaved';}
+function setZoom(){document.querySelector('#world').style.transform=`scale(${zoom})`;document.querySelector('#zoom-label').textContent=`${Math.round(zoom*100)}%`;}
+function addNode(type){const configs={timer:{seconds:30},condition:{field:'count',operator:'greater',value:'0'},sort:{field:'client_lastconnected',direction:'asc'},limit:{count:5},template:{text:'{{top}}'},channelEdit:{channelId:21,description:'{{text}}'},message:{target:21,mode:'channel',text:'Olá!'},delay:{seconds:1},log:{text:'Executado às {{time}}'}};const node={id:`n${Date.now()}${Math.floor(Math.random()*10000)}`,type,label:data.nodeTypes[type].title,x:200,y:60+draft.graph.nodes.length*100,config:configs[type]||{}};draft.graph.nodes.push(node);selectedNode=node.id;markDirty();renderGraph();}
+function renderGraph(){const nodes=draft.graph.nodes;document.querySelector('#nodes').innerHTML=nodes.map(n=>`${icon(nodeIcon(n.type))}${esc(n.label)}
${esc(n.type==='timer'?`A cada ${n.config.seconds}s`:data.nodeTypes[n.type].title)}
${(n.type==='condition'?['true','false']:['out']).map((p,i)=>`
`).join('')}
${icon(nodeIcon(n.type))}${esc(type.title)} ${icon('trash')}
Nome do bloco ${esc(type.group)} CONFIGURAÇÃO ${type.fields.map(([key,label,input,values])=>`
${esc(label)}${input==='textarea'?``:input==='select'?`${values.map(v=>`${esc(({asc:'Crescente',desc:'Decrescente',greater:'Maior que',equals:'Igual a',contains:'Contém',client:'Cliente',channel:'Canal',server:'Servidor'})[v]||v)} `).join('')} `:` `).join('')||'
Sem parâmetros adicionais.
'}
Variáveis: {{time}}, {{top}}, {{text}} e {{variables.nome}}.
LIGAÇÕES ${edges.map(({e,i})=>`
${esc(draft.graph.nodes.find(node=>node.id===(e.from===n.id?e.to:e.from))?.label)}${e.from===n.id?'Saída':'Entrada'} · ${e.port} ${icon('trash')}
`).join('')||'
Ainda sem ligações.
'}
${icon(e.status==='success'?'check':'close')} ${esc(e.botName)} ${e.simulation?'Simulação':'Execução real'} · ${e.status==='success'?'Concluída':'Falhou'} ${ago(e.startedAt)}
${esc(e.botName)} ${e.status==='success'?'Sucesso':'Falha'} ${new Date(e.startedAt).toLocaleString('pt-PT')} · ${e.simulation?'Simulação com dados de exemplo':'Servidor TeamSpeak'} Duração ${((e.durationMs||0)/1000).toFixed(2)}s
Iniciado por ${esc(e.actor)}
Passos ${e.steps.length}
Eventos e etapas ${e.steps.map(s=>`
${icon(s.status==='success'?'check':'close')} ${esc(s.label)} ${esc(s.message)}
${s.durationMs||0} ms `).join('')}
${esc(e.error)}
`:''}${e.output?`Texto produzido ${esc(e.output)} `:''}`;}
+function showRun(e){const dialog=document.querySelector('#dialog');dialog.innerHTML=`
${e.simulation?'Resultado da simulação':'Resultado da execução'} ${icon('close')} ${runDetail(e)}`;dialog.showModal();document.querySelector('#close-run').onclick=()=>dialog.close();}
+function wireExecutions(){document.querySelectorAll('[data-execution]').forEach(b=>b.onclick=()=>{const e=data.executions.find(e=>e.id===b.dataset.execution);const el=document.querySelector('#execution-detail');if(el){el.innerHTML=runDetail(e);document.querySelectorAll('.execution-row').forEach(row=>row.classList.toggle('selected',row===b));}else showRun(e);});}
+function executionsPage(){document.querySelector('#content').innerHTML=heading('Execuções','Acompanha e analisa cada passo dos teus flows.',`${icon('refresh')}Atualizar `)+`
Execuções recentes ${data.executions.length} ${data.executions.map(runRow).join('')||empty('clock','Ainda sem execuções','Abre um flow e carrega em Simular.')}${data.executions.length?runDetail(data.executions[0]):empty('flow','Cada passo, num só lugar','Os resultados ficam guardados aqui.')} ${icon('trash')}
`;
+function variablesPage(){const bot=selectedBot();document.querySelector('#content').innerHTML=heading('Variáveis','Valores persistentes para reutilizar nos teus flows.',`${data.bots.map(b=>`${esc(b.name)} `).join('')} `)+`
Variáveis do bot ${button('add-variable','Adicionar variável','plus','secondary')}Usa {{variables.nome}} no texto de um bloco.
${data.connections.map(c=>`
${icon('link')}
${esc(c.name)} WebQuery · Servidor #${c.serverId} ${esc(c.url)}
${icon('settings')}Configurar ${icon('refresh')}Testar
`).join('')||`
${empty('link','Liga o teu TeamSpeak','Adiciona o endereço WebQuery e a API key.')} `}
Podes usar http://192.168.88.99:10080 se a porta estiver publicada. O nome teamspeak6 só funciona quando os containers partilham a rede.
`;document.querySelector('#new-connection').onclick=()=>connectionModal();document.querySelectorAll('[data-edit-connection]').forEach(b=>b.onclick=()=>connectionModal(data.connections.find(c=>c.id===b.dataset.editConnection)));document.querySelectorAll('[data-test-connection]').forEach(b=>b.onclick=async()=>{b.disabled=true;try{const result=await api(`/api/connections/${b.dataset.testConnection}/test`,{method:'POST'});toast(`Ligação confirmada: ${result.server.virtualserver_name||'TeamSpeak'}`);}catch(e){toast(e.message,true);}finally{b.disabled=!owner();}});}
+function connectionModal(c={}){modal(c.id?'Configurar servidor':'Adicionar servidor',`Nome Endereço WebQuery ID do servidor virtual API key A chave é guardada cifrada e não aparece no painel.
`,f=>api('/api/connections',{method:'POST',body:JSON.stringify({...Object.fromEntries(f),id:c.id})}));}
+function settingsPage(){document.querySelector('#content').innerHTML=heading('Definições','A tua conta e o ambiente do painel.')+`O teu acesso ${esc(user.name.slice(0,1).toUpperCase())}
${esc(user.name)} ${esc(user.role)} ID Discord ${esc(user.id)}
Autenticação Discord
Permissões ${owner()?'Configurar, guardar e executar':'Consultar bots, flows e execuções'}
Ambiente Painel TS6 Botflow 0.2
Dados Volume Docker persistente
Novas contas Apenas IDs autorizados
A tua conta Discord e as ligações TeamSpeak têm permissões separadas.
