@omnizap-system/omnizap 2.6.0 → 2.6.2

package/public/js/apps/apiDocsApp.js

@@ -1,3 +1,4 @@
+import { now as __timeNow, nowIso as __timeNowIso, toUnixMs as __timeNowMs } from '#time';
 import React, { useEffect, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 
@@ -30,7 +31,7 @@ function StatusPanel() {
     let active = true;
 
     const load = async () => {
-      const start = Date.now();
+      const start = __timeNowMs();
       try {
         const response = await fetch('/api/home-bootstrap');
         if (!response.ok) throw new Error(`HTTP ${response.status}`);
@@ -43,7 +44,7 @@ function StatusPanel() {
         setState({
           loading: false,
           ok: true,
-          latencyMs: Date.now() - start,
+          latencyMs: __timeNowMs() - start,
           cpu: Number.isFinite(Number(host.cpu_percent)) ? `${Number(host.cpu_percent).toFixed(2)}%` : 'n/d',
           ram: host.memory_used && host.memory_total ? `${host.memory_used} / ${host.memory_total} (${Number(host.memory_percent || 0).toFixed(2)}%)` : 'n/d',
           uptime: process.uptime || 'n/d',

package/public/js/apps/commandsReactApp.js

@@ -30,11 +30,76 @@ const CommandDetailsPage = ({ command, onClose, devMode }) => {
   if (!command) return null;
   const [copyStatus, setCopyStatus] = useState({});
 
+  const toList = (value) => {
+    if (!Array.isArray(value)) return [];
+    return value.map((item) => String(item || '').trim()).filter(Boolean);
+  };
+
+  const metodosDeUso = toList(command.metodos_de_uso);
+  const resumoUsuario = String(command.resumo_usuario || command.descricao || `Use /${command.name} para executar esta ação.`).trim();
+  const resumoOrigem = String(command.resumo_usuario_origem || '').trim();
+  const resumoPendente = Boolean(command.resumo_usuario_revisao_pendente);
+
+  const quandoUsar = toList(command.quando_usar);
+  const respostaEsperada = toList(command.resposta_esperada);
+  const errosComuns = toList(command.erros_comuns_usuario);
+  const passosErro = toList(command.passos_se_der_erro);
+
+  const fallbackUso = metodosDeUso[0] || `/${command.name}`;
+  const exemplosReais = (Array.isArray(command.exemplos_reais) ? command.exemplos_reais : [])
+    .map((example, index) => {
+      if (typeof example === 'string') {
+        const comando = String(example || '').trim();
+        if (!comando) return null;
+        return {
+          situacao: `Exemplo real ${index + 1} para usar o comando.`,
+          comando,
+          resposta_esperada: respostaEsperada[0] || 'O bot confirma a execução com uma resposta clara.',
+          variacao: '',
+        };
+      }
+
+      if (!example || typeof example !== 'object' || Array.isArray(example)) return null;
+
+      const situacao = String(example.situacao || example.cenario || example.contexto || '').trim();
+      const comando = String(example.comando || example.command || example.uso || '').trim();
+      const resposta = String(example.resposta_esperada || example.expected_response || example.resposta || '').trim();
+      const variacao = String(example.variacao || example.outcome_variation || '').trim();
+
+      if (!comando) return null;
+      return {
+        situacao: situacao || `Exemplo real ${index + 1} para usar o comando.`,
+        comando,
+        resposta_esperada: resposta || respostaEsperada[0] || 'O bot responde confirmando o resultado.',
+        variacao,
+      };
+    })
+    .filter(Boolean);
+
+  if (!exemplosReais.length) {
+    exemplosReais.push({
+      situacao: `Você quer usar /${command.name} no dia a dia.`,
+      comando: fallbackUso,
+      resposta_esperada: respostaEsperada[0] || 'O bot responde confirmando o resultado.',
+      variacao: respostaEsperada[1] || '',
+    });
+  }
+
+  const quandoUsarComFallback = quandoUsar.length ? quandoUsar : [`Quando você precisa executar ${command.descricao || `a ação do comando /${command.name}`}.`, command.requirements?.group ? 'Use dentro de grupos.' : 'Pode ser usado em grupo ou no privado.', command.premium ? 'Disponível para usuários Premium.' : ''].filter(Boolean);
+
+  const respostaEsperadaComFallback = respostaEsperada.length ? respostaEsperada : ['Sucesso: o bot confirma a execução.', 'Formato incorreto: o bot mostra como usar corretamente.', 'Permissão: o bot informa quando faltar acesso.'];
+
+  const errosComunsComFallback = errosComuns.length ? errosComuns : ['Digitar o comando fora do formato esperado.', command.requirements?.group ? 'Tentar usar fora de grupo.' : '', command.requirements?.admin ? 'Tentar usar sem ser admin.' : '', command.premium ? 'Tentar usar sem plano Premium ativo.' : ''].filter(Boolean);
+
+  const passosErroComFallback = passosErro.length ? passosErro : ['Copie um exemplo desta página e teste sem alterar.', 'Confira se você está no local correto (grupo ou privado).', 'Se continuar com erro, fale com o admin no privado.'];
+
   const handleCopy = (text, id) => {
-    navigator.clipboard.writeText(text);
-    setCopyStatus({ ...copyStatus, [id]: true });
+    const copyText = String(text || '').trim();
+    if (!copyText) return;
+    navigator.clipboard?.writeText(copyText).catch(() => {});
+    setCopyStatus((prev) => ({ ...prev, [id]: true }));
     setTimeout(() => {
-      setCopyStatus({ ...copyStatus, [id]: false });
+      setCopyStatus((prev) => ({ ...prev, [id]: false }));
     }, 2000);
   };
 
@@ -55,25 +120,26 @@ const CommandDetailsPage = ({ command, onClose, devMode }) => {
 
       <div className="sticky top-0 z-50 bg-[#020617]/60 backdrop-blur-xl border-b border-white/5">
         <div className="container mx-auto px-4 h-16 flex items-center justify-between">
-          <button onClick=${onClose} className="btn btn-ghost group pl-0 hover:bg-transparent">
-            <div className="w-10 h-10 rounded-xl bg-white/5 border border-white/10 flex items-center justify-center group-hover:bg-primary group-hover:text-primary-content group-hover:border-primary transition-all duration-300">
+          <button onClick=${onClose} className="btn btn-ghost group pl-0 hover:bg-transparent min-h-0 h-auto py-2">
+            <div className="w-9 h-9 sm:w-10 sm:h-10 rounded-xl bg-white/5 border border-white/10 flex items-center justify-center group-hover:bg-primary group-hover:text-primary-content group-hover:border-primary transition-all duration-300">
               <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="3" d="M15 19l-7-7 7-7" /></svg>
             </div>
             <span className="hidden sm:inline text-xs font-black uppercase tracking-widest ml-3 opacity-50 group-hover:opacity-100 transition-opacity">Voltar ao Catálogo</span>
+            <span className="sm:hidden text-[10px] font-black uppercase tracking-widest ml-2 opacity-50">Voltar</span>
           </button>
 
           <div className="flex items-center gap-3">
             <div className="text-right">
-              <p className="text-[10px] font-black uppercase tracking-[0.2em] text-primary">${command.category_label}</p>
+              <p className="text-[9px] sm:text-[10px] font-black uppercase tracking-[0.2em] text-primary">${command.category_label}</p>
               <p className="text-[8px] font-bold opacity-30 uppercase tracking-widest hidden sm:block">Ref. Doc V3.5</p>
             </div>
-            <div className="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center text-xl border border-primary/20 shadow-[0_0_20px_rgba(34,197,94,0.1)]">${command.category_icon || '🧩'}</div>
+            <div className="w-9 h-9 sm:w-10 sm:h-10 rounded-xl bg-primary/10 flex items-center justify-center text-lg sm:text-xl border border-primary/20 shadow-[0_0_20px_rgba(34,197,94,0.1)]">${command.category_icon || '🧩'}</div>
           </div>
         </div>
       </div>
 
       <main className="container mx-auto max-w-4xl px-4 py-8 lg:py-16 relative z-10">
-        <div className="space-y-12">
+        <div className="space-y-12 sm:space-y-16">
           <header className="space-y-6 text-center sm:text-left">
             <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-primary/10 border border-primary/20 text-primary text-[10px] font-black uppercase tracking-widest">
               <span className="w-1.5 h-1.5 rounded-full bg-primary animate-pulse"></span>
@@ -82,10 +148,10 @@ const CommandDetailsPage = ({ command, onClose, devMode }) => {
 
             <div className="space-y-4">
               <div className="flex flex-wrap items-center justify-center sm:justify-start gap-4">
-                <h1 className="text-5xl sm:text-6xl lg:text-8xl font-black tracking-tighter text-white">/<span className="text-transparent bg-clip-text bg-gradient-to-r from-primary to-emerald-400">${command.name}</span></h1>
-                ${command.premium && html` <div className="badge badge-warning h-10 px-6 font-black text-[10px] uppercase tracking-[0.2em] shadow-[0_0_30px_rgba(251,191,36,0.2)] border-none">Premium</div> `}
+                <h1 className="text-4xl sm:text-7xl lg:text-8xl font-black tracking-tighter text-white break-words">/<span className="text-transparent bg-clip-text bg-gradient-to-r from-primary to-emerald-400">${command.name}</span></h1>
+                ${command.premium && html` <div className="badge badge-warning h-8 sm:h-10 px-4 sm:px-6 font-black text-[9px] sm:text-[10px] uppercase tracking-[0.2em] shadow-[0_0_30px_rgba(251,191,36,0.2)] border-none">Premium</div> `}
               </div>
-              <p className="text-lg sm:text-xl lg:text-2xl text-white/60 leading-relaxed font-medium max-w-3xl mx-auto sm:mx-0">${command.descricao}</p>
+              <p className="text-lg sm:text-xl lg:text-2xl text-white/60 leading-relaxed font-medium max-w-3xl mx-auto sm:mx-0 break-words">${command.descricao}</p>
             </div>
 
             <div className="flex flex-wrap justify-center sm:justify-start gap-2 pt-2">
@@ -101,112 +167,227 @@ const CommandDetailsPage = ({ command, onClose, devMode }) => {
 
           <section className="space-y-6">
             <div className="flex items-center gap-4">
-              <h3 className="text-[10px] font-black uppercase tracking-[0.4em] text-white/20">Como usar agora</h3>
+              <h3 className="text-[10px] font-black uppercase tracking-[0.4em] text-white/20">Resumo rápido</h3>
               <div className="flex-1 h-px bg-white/5"></div>
             </div>
-            <div className="grid gap-4">
-              ${(command.metodos_de_uso || []).map(
-                (usage, idx) => html`
-                  <div key=${idx} className="group relative">
-                    <div className="absolute inset-0 bg-primary/5 blur-xl opacity-0 group-hover:opacity-100 transition-opacity rounded-[2.5rem]"></div>
-                    <div className="relative flex flex-col sm:flex-row items-stretch sm:items-center gap-4 p-1 rounded-[2rem] bg-white/[0.03] border border-white/5 group-hover:border-primary/30 transition-all duration-300">
-                      <code className="flex-1 px-6 py-5 sm:py-6 font-mono text-sm sm:text-base text-primary/80 break-all"> ${usage} </code>
-                      <button onClick=${() => handleCopy(usage, `usage-${idx}`)} className=${`px-8 py-4 sm:py-6 rounded-2xl sm:rounded-r-[1.8rem] sm:rounded-l-none font-black text-[10px] uppercase tracking-widest transition-all ${copyStatus[`usage-${idx}`] ? 'bg-success text-white' : 'bg-white/5 hover:bg-primary hover:text-primary-content'}`}>${copyStatus[`usage-${idx}`] ? 'Copiado!' : 'Copiar'}</button>
-                    </div>
+            <div className="relative p-6 sm:p-8 rounded-[1.5rem] sm:rounded-[2rem] bg-white/[0.03] border border-white/10 space-y-4 overflow-hidden">
+              <div className="absolute -top-10 -right-10 w-28 h-28 rounded-full bg-primary/10 blur-3xl"></div>
+              <div className="relative flex flex-wrap items-center gap-2">${resumoPendente && html` <span className="badge badge-info badge-sm h-7 px-3 font-bold uppercase tracking-wider">Resumo por IA · Revisão pendente</span> `} ${!resumoPendente && resumoOrigem === 'manual' && html` <span className="badge badge-success badge-sm h-7 px-3 font-bold uppercase tracking-wider">Resumo revisado</span> `}</div>
+              <p className="relative text-base sm:text-lg text-white/80 leading-relaxed">${resumoUsuario}</p>
+            </div>
+          </section>
+
+          <section className="space-y-6">
+            <div className="flex items-center gap-4">
+              <h3 className="text-[10px] font-black uppercase tracking-[0.4em] text-white/20">Quando usar</h3>
+              <div className="flex-1 h-px bg-white/5"></div>
+            </div>
+            <div className="grid gap-3">
+              ${quandoUsarComFallback.map(
+                (item, idx) => html`
+                  <div key=${`when-${idx}`} className="p-4 rounded-2xl bg-white/[0.02] border border-white/5 flex items-start gap-3">
+                    <span className="mt-0.5 text-primary">•</span>
+                    <p className="text-sm sm:text-base text-white/75 leading-relaxed">${item}</p>
                   </div>
                 `,
               )}
             </div>
           </section>
 
-          ${command.arguments?.length > 0 &&
-          html`
-            <section className="space-y-6">
-              <div className="flex items-center gap-4">
-                <h3 className="text-[10px] font-black uppercase tracking-[0.4em] text-white/20">Configurações e Argumentos</h3>
-                <div className="flex-1 h-px bg-white/5"></div>
-              </div>
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                ${command.arguments.map(
-                  (arg) => html`
-                    <div key=${arg.name} className="group p-6 rounded-[2rem] bg-white/[0.02] border border-white/5 hover:border-primary/20 transition-all duration-300">
-                      <div className="flex items-start justify-between mb-4">
-                        <div className="space-y-1">
-                          <h4 className="text-lg font-black text-white group-hover:text-primary transition-colors">${arg.name}</h4>
-                          <span className="inline-block text-[9px] font-bold text-white/30 font-mono uppercase tracking-widest bg-white/5 px-2 py-0.5 rounded"> Type: ${arg.type} </span>
-                        </div>
-                        <span className=${`text-[8px] font-black uppercase px-3 py-1 rounded-full border ${arg.required ? 'bg-error/10 text-error border-error/20' : 'bg-white/5 text-white/30 border-white/10'}`}> ${arg.required ? 'Obrigatório' : 'Opcional'} </span>
+          <section className="space-y-6">
+            <div className="flex items-center gap-4">
+              <h3 className="text-[10px] font-black uppercase tracking-[0.4em] text-white/20">Exemplos reais</h3>
+              <div className="flex-1 h-px bg-white/5"></div>
+            </div>
+            <div className="grid gap-5">
+              ${exemplosReais.map(
+                (example, idx) => html`
+                  <article key=${`example-${idx}`} className="p-5 sm:p-6 rounded-[1.5rem] bg-white/[0.03] border border-white/10 space-y-5">
+                    <div className="space-y-1">
+                      <p className="text-[9px] font-black uppercase tracking-[0.2em] text-primary/70">Situação real</p>
+                      <p className="text-sm sm:text-base text-white/80 leading-relaxed">${example.situacao}</p>
+                    </div>
+
+                    <div className="space-y-2">
+                      <p className="text-[9px] font-black uppercase tracking-[0.2em] text-white/40">Comando pronto</p>
+                      <div className="relative flex flex-col sm:flex-row items-stretch sm:items-center gap-0 sm:gap-4 p-1 rounded-2xl bg-[#0b1124] border border-white/10">
+                        <code className="flex-1 px-5 py-4 sm:px-6 sm:py-4 font-mono text-sm text-primary/80 break-all leading-relaxed">${example.comando}</code>
+                        <button onClick=${() => handleCopy(example.comando, `example-cmd-${idx}`)} className=${`px-8 py-3.5 rounded-2xl sm:rounded-r-[1.2rem] sm:rounded-l-none font-black text-[10px] uppercase tracking-widest transition-all ${copyStatus[`example-cmd-${idx}`] ? 'bg-success text-white' : 'bg-white/5 hover:bg-primary hover:text-primary-content'}`}>${copyStatus[`example-cmd-${idx}`] ? 'Copiado!' : 'Copiar'}</button>
                       </div>
-                      <p className="text-sm text-white/50 font-medium leading-relaxed">${arg.description}</p>
                     </div>
-                  `,
-                )}
-              </div>
-            </section>
-          `}
-
-          <div className="grid grid-cols-1 sm:grid-cols-2 gap-6 pt-6">
-            <section className="p-8 rounded-[2.5rem] bg-white/[0.02] border border-white/5 space-y-6 relative overflow-hidden group">
-              <div className="absolute -right-8 -bottom-8 w-32 h-32 bg-primary/5 blur-2xl rounded-full group-hover:bg-primary/10 transition-colors"></div>
-              <h3 className="text-[10px] font-black uppercase tracking-[0.3em] text-white/30 relative z-10">Specs Técnicas</h3>
-              <div className="grid grid-cols-2 gap-y-8 relative z-10">
-                <div>
-                  <p className="text-[9px] font-bold uppercase text-white/20 mb-1 tracking-widest">Versão</p>
-                  <p className="text-base font-black text-white">${command.technical?.version || '1.0.0'}</p>
-                </div>
-                <div>
-                  <p className="text-[9px] font-bold uppercase text-white/20 mb-1 tracking-widest">Estabilidade</p>
-                  <p className="text-base font-black text-emerald-400">${command.technical?.stability || 'Stable'}</p>
-                </div>
-                <div>
-                  <p className="text-[9px] font-bold uppercase text-white/20 mb-1 tracking-widest">Risco</p>
-                  <p className="text-base font-black ${command.technical?.risk_level !== 'low' ? 'text-rose-500' : 'text-emerald-400'}">${command.technical?.risk_level?.toUpperCase() || 'LOW'}</p>
+
+                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                      <div className="p-4 rounded-xl bg-white/[0.02] border border-white/5">
+                        <p className="text-[9px] font-black uppercase tracking-[0.2em] text-white/40 mb-2">Resposta esperada</p>
+                        <p className="text-sm text-white/75 leading-relaxed">${example.resposta_esperada}</p>
+                      </div>
+                      <div className="p-4 rounded-xl bg-white/[0.02] border border-white/5">
+                        <p className="text-[9px] font-black uppercase tracking-[0.2em] text-white/40 mb-2">Variação possível</p>
+                        <p className="text-sm text-white/75 leading-relaxed">${example.variacao || 'Se faltar parâmetro ou permissão, o bot explica o próximo passo para corrigir.'}</p>
+                      </div>
+                    </div>
+                  </article>
+                `,
+              )}
+            </div>
+          </section>
+
+          <section className="space-y-6">
+            <div className="flex items-center gap-4">
+              <h3 className="text-[10px] font-black uppercase tracking-[0.4em] text-white/20">O que esperar de resposta</h3>
+              <div className="flex-1 h-px bg-white/5"></div>
+            </div>
+            <div className="grid gap-3">
+              ${respostaEsperadaComFallback.map(
+                (item, idx) => html`
+                  <div key=${`expected-${idx}`} className="p-4 rounded-2xl bg-white/[0.02] border border-white/5 flex items-start gap-3">
+                    <span className="mt-0.5 text-emerald-400">✓</span>
+                    <p className="text-sm sm:text-base text-white/75 leading-relaxed">${item}</p>
+                  </div>
+                `,
+              )}
+            </div>
+          </section>
+
+          <section className="space-y-6">
+            <div className="flex items-center gap-4">
+              <h3 className="text-[10px] font-black uppercase tracking-[0.4em] text-white/20">Se der erro</h3>
+              <div className="flex-1 h-px bg-white/5"></div>
+            </div>
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
+              <div className="p-5 rounded-[1.3rem] bg-white/[0.03] border border-white/10 space-y-4">
+                <p className="text-[10px] font-black uppercase tracking-[0.2em] text-amber-300">Erros comuns</p>
+                <div className="space-y-2">
+                  ${errosComunsComFallback.map(
+                    (item, idx) => html`
+                      <div key=${`common-error-${idx}`} className="text-sm text-white/75 leading-relaxed flex items-start gap-2">
+                        <span className="text-amber-300">•</span>
+                        <span>${item}</span>
+                      </div>
+                    `,
+                  )}
                 </div>
-                <div>
-                  <p className="text-[9px] font-bold uppercase text-white/20 mb-1 tracking-widest">ID Sistema</p>
-                  <p className="text-[10px] font-mono font-bold text-white/40 truncate">${command.id}</p>
+              </div>
+
+              <div className="p-5 rounded-[1.3rem] bg-white/[0.03] border border-white/10 space-y-4">
+                <p className="text-[10px] font-black uppercase tracking-[0.2em] text-primary">O que fazer agora</p>
+                <div className="space-y-2">
+                  ${passosErroComFallback.map(
+                    (item, idx) => html`
+                      <div key=${`error-step-${idx}`} className="text-sm text-white/75 leading-relaxed flex items-start gap-2">
+                        <span className="text-primary font-black">${idx + 1}.</span>
+                        <span>${item}</span>
+                      </div>
+                    `,
+                  )}
                 </div>
               </div>
-            </section>
-
-            ${command.technical?.collected_data?.length > 0 &&
-            html`
-              <section className="p-8 rounded-[2.5rem] bg-white/[0.02] border border-white/5 space-y-6 relative overflow-hidden group">
-                <div className="absolute -right-8 -bottom-8 w-32 h-32 bg-emerald-500/5 blur-2xl rounded-full group-hover:bg-emerald-500/10 transition-colors"></div>
-                <h3 className="text-[10px] font-black uppercase tracking-[0.3em] text-white/30 relative z-10">Privacidade e Dados</h3>
-                <div className="flex flex-wrap gap-2 relative z-10">${command.technical.collected_data.map((data) => html` <span key=${data} className="text-[10px] font-bold bg-white/5 px-4 py-2 rounded-xl border border-white/10 text-white/60">${data}</span> `)}</div>
-                <p className="text-[9px] text-white/20 font-medium leading-relaxed italic relative z-10">* Estes dados são processados apenas para execução do comando.</p>
-              </section>
-            `}
-          </div>
+            </div>
+          </section>
 
-          ${devMode &&
-          html`
-            <section className="space-y-6 animate-in slide-in-from-bottom-8 duration-1000">
-              <div className="flex items-center gap-4">
-                <h3 className="text-[10px] font-black uppercase tracking-[0.4em] text-warning/30">Developer Metadata</h3>
-                <div className="flex-1 h-px bg-warning/10"></div>
+          <details className="group rounded-[1.5rem] border border-white/10 bg-white/[0.02] open:bg-white/[0.03] transition-colors">
+            <summary className="list-none cursor-pointer px-6 py-5 flex items-center justify-between gap-4">
+              <div>
+                <p className="text-[10px] font-black uppercase tracking-[0.3em] text-white/40">Área técnica</p>
+                <p className="text-xs text-white/50 mt-1">Especificações avançadas e metadados do comando.</p>
               </div>
-              <div className="relative group">
-                <div className="absolute inset-0 bg-warning/5 blur-3xl opacity-20"></div>
-                <div className="relative bg-[#020617] border border-warning/10 rounded-[2.5rem] overflow-hidden">
-                  <div className="bg-warning/5 px-8 py-3 border-b border-warning/10 flex items-center justify-between">
-                    <span className="text-[9px] font-black uppercase tracking-widest text-warning/60 font-mono">command_schema.json</span>
-                    <button onClick=${() => handleCopy(JSON.stringify(command, null, 2), 'raw-json')} className=${`text-[9px] font-black uppercase tracking-widest transition-colors ${copyStatus['raw-json'] ? 'text-success' : 'text-warning/40 hover:text-warning'}`}>${copyStatus['raw-json'] ? 'Copiado!' : 'Copiar JSON'}</button>
+              <span className="w-8 h-8 rounded-xl bg-white/5 border border-white/10 flex items-center justify-center group-open:rotate-180 transition-transform">
+                <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 text-white/60" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M19 9l-7 7-7-7" /></svg>
+              </span>
+            </summary>
+
+            <div className="px-6 pb-6 space-y-6">
+              ${metodosDeUso.length > 0 &&
+              html`
+                <section className="space-y-3">
+                  <p className="text-[10px] font-black uppercase tracking-[0.2em] text-white/40">Como usar agora</p>
+                  <div className="grid gap-3">
+                    ${metodosDeUso.map(
+                      (usage, idx) => html`
+                        <div key=${idx} className="relative flex flex-col sm:flex-row items-stretch sm:items-center gap-0 sm:gap-4 p-1 rounded-2xl bg-[#0b1124] border border-white/10">
+                          <code className="flex-1 px-5 py-4 sm:px-6 sm:py-4 font-mono text-sm text-primary/80 break-all leading-relaxed">${usage}</code>
+                          <button onClick=${() => handleCopy(usage, `usage-${idx}`)} className=${`px-8 py-3.5 rounded-2xl sm:rounded-r-[1.2rem] sm:rounded-l-none font-black text-[10px] uppercase tracking-widest transition-all ${copyStatus[`usage-${idx}`] ? 'bg-success text-white' : 'bg-white/5 hover:bg-primary hover:text-primary-content'}`}>${copyStatus[`usage-${idx}`] ? 'Copiado!' : 'Copiar'}</button>
+                        </div>
+                      `,
+                    )}
+                  </div>
+                </section>
+              `}
+              ${command.arguments?.length > 0 &&
+              html`
+                <section className="space-y-3">
+                  <p className="text-[10px] font-black uppercase tracking-[0.2em] text-white/40">Argumentos</p>
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+                    ${command.arguments.map(
+                      (arg) => html`
+                        <div key=${arg.name} className="p-4 rounded-2xl bg-white/[0.02] border border-white/10">
+                          <div className="flex items-start justify-between gap-2 mb-2">
+                            <h4 className="text-sm font-black text-white">${arg.name}</h4>
+                            <span className=${`text-[8px] font-black uppercase px-2 py-1 rounded-full border ${arg.required ? 'bg-error/10 text-error border-error/20' : 'bg-white/5 text-white/40 border-white/10'}`}>${arg.required ? 'Obrigatório' : 'Opcional'}</span>
+                          </div>
+                          <p className="text-[10px] font-mono text-white/40 uppercase tracking-wider mb-2">Tipo: ${arg.type}</p>
+                          <p className="text-sm text-white/65 leading-relaxed">${arg.description}</p>
+                        </div>
+                      `,
+                    )}
+                  </div>
+                </section>
+              `}
+
+              <section className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                <div className="p-5 rounded-2xl bg-white/[0.02] border border-white/10 space-y-4">
+                  <p className="text-[10px] font-black uppercase tracking-[0.2em] text-white/40">Specs técnicas</p>
+                  <div className="grid grid-cols-2 gap-y-4">
+                    <div>
+                      <p className="text-[9px] font-bold uppercase text-white/20 mb-1 tracking-widest">Versão</p>
+                      <p className="text-sm font-black text-white">${command.technical?.version || '1.0.0'}</p>
+                    </div>
+                    <div>
+                      <p className="text-[9px] font-bold uppercase text-white/20 mb-1 tracking-widest">Estabilidade</p>
+                      <p className="text-sm font-black text-emerald-400">${command.technical?.stability || 'stable'}</p>
+                    </div>
+                    <div>
+                      <p className="text-[9px] font-bold uppercase text-white/20 mb-1 tracking-widest">Risco</p>
+                      <p className="text-sm font-black ${command.technical?.risk_level !== 'low' ? 'text-rose-500' : 'text-emerald-400'}">${command.technical?.risk_level?.toUpperCase() || 'LOW'}</p>
+                    </div>
+                    <div>
+                      <p className="text-[9px] font-bold uppercase text-white/20 mb-1 tracking-widest">ID Sistema</p>
+                      <p className="text-[10px] font-mono font-bold text-white/40 break-all">${command.id}</p>
+                    </div>
                   </div>
-                  <pre className="p-8 font-mono text-[10px] sm:text-[11px] text-warning/70 overflow-x-auto max-h-[400px] scrollbar-thin scrollbar-thumb-warning/20">
-                    ${JSON.stringify(command, null, 2)}
-                  </pre
-                  >
                 </div>
-              </div>
-            </section>
-          `}
 
-          <div className="pt-12 pb-20 text-center">
-            <button onClick=${onClose} className="group relative inline-flex items-center justify-center">
+                <div className="p-5 rounded-2xl bg-white/[0.02] border border-white/10 space-y-4">
+                  <p className="text-[10px] font-black uppercase tracking-[0.2em] text-white/40">Privacidade e dados</p>
+                  ${(command.technical?.collected_data || []).length > 0
+                    ? html`
+                        <div className="flex flex-wrap gap-2">${command.technical.collected_data.map((data) => html` <span key=${data} className="text-[10px] font-bold bg-white/5 px-3 py-1.5 rounded-lg border border-white/10 text-white/60">${data}</span> `)}</div>
+                        <p className="text-[10px] text-white/40 leading-relaxed">Dados processados apenas para executar a funcionalidade solicitada.</p>
+                      `
+                    : html`<p className="text-sm text-white/60 leading-relaxed">Este comando não expõe dados técnicos adicionais de coleta.</p>`}
+                </div>
+              </section>
+
+              ${devMode &&
+              html`
+                <section className="space-y-3">
+                  <p className="text-[10px] font-black uppercase tracking-[0.2em] text-warning/50">Developer Metadata</p>
+                  <div className="relative bg-[#020617] border border-warning/10 rounded-2xl overflow-hidden">
+                    <div className="bg-warning/5 px-4 py-3 border-b border-warning/10 flex items-center justify-between gap-4">
+                      <span className="text-[9px] font-black uppercase tracking-widest text-warning/60 font-mono">command_schema.json</span>
+                      <button onClick=${() => handleCopy(JSON.stringify(command, null, 2), 'raw-json')} className=${`text-[9px] font-black uppercase tracking-widest transition-colors ${copyStatus['raw-json'] ? 'text-success' : 'text-warning/40 hover:text-warning'}`}>${copyStatus['raw-json'] ? 'Copiado!' : 'Copiar JSON'}</button>
+                    </div>
+                    <pre className="p-4 sm:p-6 font-mono text-[9px] sm:text-[11px] text-warning/70 overflow-x-auto max-h-[380px] scrollbar-thin scrollbar-thumb-warning/20">${JSON.stringify(command, null, 2)}</pre>
+                  </div>
+                </section>
+              `}
+            </div>
+          </details>
+
+          <div className="pt-8 sm:pt-12 pb-20 text-center">
+            <button onClick=${onClose} className="group relative inline-flex items-center justify-center w-full sm:w-auto">
               <div className="absolute inset-0 bg-primary/20 blur-2xl group-hover:bg-primary/40 transition-colors rounded-2xl"></div>
-              <div className="relative bg-primary text-primary-content px-12 py-5 rounded-2xl font-black text-xs uppercase tracking-[0.3em] shadow-2xl hover:scale-105 active:scale-95 transition-all">Voltar ao Catálogo</div>
+              <div className="relative bg-primary text-primary-content px-12 py-5 rounded-2xl font-black text-xs uppercase tracking-[0.3em] shadow-2xl hover:scale-105 active:scale-95 transition-all w-full sm:w-auto text-center">Voltar ao Catálogo</div>
             </button>
           </div>
         </div>
@@ -515,7 +696,7 @@ const App = () => {
 
       <footer className="mt-20 py-16 border-t border-base-200 bg-base-200/20">
         <div className="container mx-auto px-4 text-center">
-          <p className="text-[10px] font-bold uppercase tracking-[0.4em] text-base-content/20">© 2026 OMNIZAP SYSTEM · COMMANDS LIBRARY V3.5</p>
+          <p className="text-[10px] font-bold uppercase tracking-[0.4em] text-base-content/20">© 2026 OMNIZAP · COMMANDS LIBRARY V3.5</p>
         </div>
       </footer>
     </div>

package/public/js/apps/createPackApp.js

@@ -1,3 +1,4 @@
+import { now as __timeNow, nowIso as __timeNowIso, toUnixMs as __timeNowMs } from '#time';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 import htm from 'htm';
@@ -98,7 +99,7 @@ const readGoogleAuthCache = () => {
     if (!raw) return null;
     const parsed = JSON.parse(raw);
     const savedAt = Number(parsed?.savedAt || 0);
-    if (savedAt && Date.now() - savedAt > GOOGLE_AUTH_CACHE_MAX_STALE_MS) {
+    if (savedAt && __timeNowMs() - savedAt > GOOGLE_AUTH_CACHE_MAX_STALE_MS) {
       localStorage.removeItem(GOOGLE_AUTH_CACHE_KEY);
       return null;
     }
@@ -109,7 +110,7 @@ const readGoogleAuthCache = () => {
     }
     if (normalized.expiresAt) {
       const expiresAt = Number(new Date(normalized.expiresAt));
-      if (Number.isFinite(expiresAt) && expiresAt <= Date.now()) {
+      if (Number.isFinite(expiresAt) && expiresAt <= __timeNowMs()) {
         localStorage.removeItem(GOOGLE_AUTH_CACHE_KEY);
         return null;
       }
@@ -131,7 +132,7 @@ const writeGoogleAuthCache = (authState) => {
       GOOGLE_AUTH_CACHE_KEY,
       JSON.stringify({
         auth: normalized,
-        savedAt: Date.now(),
+        savedAt: __timeNowMs(),
       }),
     );
   } catch {
@@ -216,7 +217,7 @@ const writeUploadTask = (payload) => {
       PACK_UPLOAD_TASK_KEY,
       JSON.stringify({
         ...payload,
-        updatedAt: Date.now(),
+        updatedAt: __timeNowMs(),
       }),
     );
   } catch {
@@ -410,7 +411,7 @@ function CreatePackApp() {
   const [name, setName] = useState('');
   const [description, setDescription] = useState('');
   const [publisher, setPublisher] = useState('');
-  const [visibility, setVisibility] = useState('public');
+  const [visibility, setVisibility] = useState('private');
   const [tags, setTags] = useState([]);
   const [tagInput, setTagInput] = useState('');
   const [suggestedTags, setSuggestedTags] = useState(DEFAULT_SUGGESTED_TAGS);
@@ -630,7 +631,7 @@ function CreatePackApp() {
         const restored = parsed.files
           .filter((item) => item && typeof item.dataUrl === 'string' && typeof item.name === 'string')
           .map((item) => ({
-            id: String(item.id || `${Date.now()}-${Math.random().toString(36).slice(2, 9)}`),
+            id: String(item.id || `${__timeNowMs()}-${Math.random().toString(36).slice(2, 9)}`),
             file: {
               name: String(item.name || 'sticker.webp'),
               size: Number(item.size || 0),
@@ -707,7 +708,7 @@ function CreatePackApp() {
         hash: String(item?.hash || ''),
         dataUrl: item.dataUrl,
       })),
-      updatedAt: Date.now(),
+      updatedAt: __timeNowMs(),
     };
 
     try {
@@ -880,7 +881,7 @@ function CreatePackApp() {
       selected.map(async (file) => {
         const dataUrl = await fileToDataUrl(file);
         return {
-          id: `${Date.now()}-${Math.random().toString(36).slice(2, 9)}`,
+          id: `${__timeNowMs()}-${Math.random().toString(36).slice(2, 9)}`,
           file,
           hash: await computeDataUrlSha256(dataUrl),
           mediaKind:
@@ -1321,7 +1322,7 @@ function CreatePackApp() {
     setName('');
     setDescription('');
     setPublisher('');
-    setVisibility('public');
+    setVisibility('private');
     setTags([]);
     setTagInput('');
     setFiles([]);
@@ -1479,7 +1480,7 @@ function CreatePackApp() {
                     </label>
                     <label className="block">
                       <span className="mb-2 inline-block text-xs font-semibold text-slate-300">Visibilidade</span>
-                      <select value=${visibility} onChange=${(e) => setVisibility(String(e.target.value || 'public'))} className="h-11 w-full rounded-2xl border border-line/70 bg-panelSoft/80 px-4 text-sm outline-none focus:border-accent/60 md:h-12">
+                      <select value=${visibility} onChange=${(e) => setVisibility(String(e.target.value || 'private'))} className="h-11 w-full rounded-2xl border border-line/70 bg-panelSoft/80 px-4 text-sm outline-none focus:border-accent/60 md:h-12">
                         <option value="public">Público</option>
                         <option value="unlisted">Não listado</option>
                         <option value="private">Privado</option>