npm - @kaikybrofc/omnizap-system - Versions diffs - 2.2.10 → 2.3.0 - Mend

@kaikybrofc/omnizap-system 2.2.10 → 2.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (119) hide show

package/README.md +20 -18
package/app/config/adminIdentity.js +1 -3
package/app/connection/socketController.js +10 -20
package/app/controllers/messageController.js +7 -28
package/app/modules/aiModule/catCommand.js +29 -192
package/app/modules/broadcastModule/noticeCommand.js +28 -97
package/app/modules/gameModule/diceCommand.js +6 -32
package/app/modules/playModule/playCommand.js +57 -258
package/app/modules/quoteModule/quoteCommand.js +2 -4
package/app/modules/rpgPokemonModule/rpgPokemonRepository.js +1 -13
package/app/modules/statsModule/noMessageCommand.js +16 -84
package/app/modules/statsModule/rankingCommand.js +5 -25
package/app/modules/statsModule/rankingCommon.js +1 -9
package/app/modules/stickerModule/convertToWebp.js +4 -27
package/app/modules/stickerModule/stickerCommand.js +13 -24
package/app/modules/stickerModule/stickerTextCommand.js +13 -25
package/app/modules/stickerPackModule/autoPackCollectorService.js +16 -7
package/app/modules/stickerPackModule/domainEventOutboxRepository.js +20 -36
package/app/modules/stickerPackModule/domainEvents.js +2 -11
package/app/modules/stickerPackModule/semanticReclassificationEngine.js +13 -50
package/app/modules/stickerPackModule/semanticReclassificationEngine.test.js +2 -15
package/app/modules/stickerPackModule/semanticThemeClusterService.js +14 -41
package/app/modules/stickerPackModule/stickerAssetClassificationRepository.js +25 -95
package/app/modules/stickerPackModule/stickerAssetRepository.js +12 -31
package/app/modules/stickerPackModule/stickerAssetReprocessQueueRepository.js +13 -18
package/app/modules/stickerPackModule/stickerAutoPackByTagsRuntime.js +284 -709
package/app/modules/stickerPackModule/stickerClassificationBackgroundRuntime.js +27 -106
package/app/modules/stickerPackModule/stickerClassificationService.js +46 -77
package/app/modules/stickerPackModule/stickerDedicatedTaskWorkerRuntime.js +13 -53
package/app/modules/stickerPackModule/stickerDomainEventBus.js +10 -16
package/app/modules/stickerPackModule/stickerDomainEventConsumerRuntime.js +13 -34
package/app/modules/stickerPackModule/stickerMarketplaceDriftService.js +1 -4
package/app/modules/stickerPackModule/stickerObjectStorageService.js +26 -26
package/app/modules/stickerPackModule/stickerPackCommandHandlers.js +32 -187
package/app/modules/stickerPackModule/stickerPackInteractionEventRepository.js +6 -15
package/app/modules/stickerPackModule/stickerPackItemRepository.js +6 -32
package/app/modules/stickerPackModule/stickerPackMarketplaceService.js +12 -36
package/app/modules/stickerPackModule/stickerPackMessageService.js +12 -40
package/app/modules/stickerPackModule/stickerPackRepository.js +23 -66
package/app/modules/stickerPackModule/stickerPackScoreSnapshotRepository.js +9 -21
package/app/modules/stickerPackModule/stickerPackScoreSnapshotRuntime.js +10 -40
package/app/modules/stickerPackModule/stickerPackService.js +50 -115
package/app/modules/stickerPackModule/stickerPackServiceRuntime.js +2 -21
package/app/modules/stickerPackModule/stickerPackUtils.js +13 -3
package/app/modules/stickerPackModule/stickerStorageService.js +16 -65
package/app/modules/stickerPackModule/stickerWorkerPipelineRuntime.js +4 -22
package/app/modules/stickerPackModule/stickerWorkerTaskQueueRepository.js +14 -29
package/app/modules/systemMetricsModule/pingCommand.js +9 -39
package/app/modules/tiktokModule/tiktokCommand.js +17 -109
package/app/modules/userModule/userCommand.js +2 -88
package/app/observability/metrics.js +5 -16
package/app/services/captchaService.js +1 -6
package/app/services/dbWriteQueue.js +3 -18
package/app/services/featureFlagService.js +2 -8
package/app/services/newsBroadcastService.js +0 -1
package/app/services/queueUtils.js +2 -4
package/app/services/whatsappLoginLinkService.js +7 -9
package/app/store/premiumUserStore.js +1 -2
package/app/utils/antiLink/antiLinkModule.js +3 -233
package/app/utils/logger/loggerModule.js +9 -34
package/app/utils/systemMetrics/systemMetricsModule.js +1 -4
package/database/init.js +1 -8
package/docker-compose.yml +27 -27
package/docs/seo/omnizap-seo-playbook-br-2026-02-28.md +26 -0
package/docs/seo/satellite-page-template.md +2 -0
package/docs/seo/satellite-pages-phase1.json +40 -177
package/eslint.config.js +2 -15
package/index.js +8 -36
package/ml/clip_classifier/README.md +4 -6
package/observability/alert-rules.yml +12 -12
package/observability/grafana/provisioning/dashboards/dashboards.yml +1 -1
package/package.json +6 -3
package/public/api-docs/index.html +220 -193
package/public/bot-whatsapp-para-grupo/index.html +291 -261
package/public/bot-whatsapp-sem-programar/index.html +291 -261
package/public/comandos/index.html +421 -406
package/public/como-automatizar-avisos-no-whatsapp/index.html +291 -261
package/public/como-criar-comandos-whatsapp/index.html +291 -261
package/public/como-evitar-spam-no-whatsapp/index.html +291 -261
package/public/como-moderar-grupo-whatsapp/index.html +291 -261
package/public/como-organizar-comunidade-whatsapp/index.html +291 -261
package/public/css/github-project-panel.css +13 -8
package/public/css/stickers-admin.css +25 -9
package/public/css/styles.css +23 -16
package/public/index.html +1117 -994
package/public/js/apps/apiDocsApp.js +17 -167
package/public/js/apps/createPackApp.js +69 -332
package/public/js/apps/homeApp.js +94 -74
package/public/js/apps/loginApp.js +3 -12
package/public/js/apps/stickersAdminApp.js +190 -181
package/public/js/apps/stickersApp.js +496 -1397
package/public/js/catalog.js +11 -74
package/public/js/github-panel/components/ErrorState.js +1 -8
package/public/js/github-panel/components/GithubProjectPanel.js +2 -9
package/public/js/github-panel/components/SkeletonPanel.js +1 -11
package/public/js/github-panel/components/StatCard.js +1 -7
package/public/js/github-panel/vendor/react.js +1 -9
package/public/js/runtime/react-runtime.js +1 -9
package/public/licenca/index.html +104 -86
package/public/login/index.html +315 -325
package/public/melhor-bot-whatsapp-para-grupos/index.html +291 -261
package/public/stickers/admin/index.html +14 -19
package/public/stickers/create/index.html +39 -44
package/public/stickers/index.html +96 -107
package/public/termos-de-uso/index.html +142 -115
package/public/user/index.html +347 -350
package/scripts/cache-bust.mjs +5 -24
package/scripts/generate-seo-satellite-pages.mjs +10 -13
package/scripts/run-prettier-all.mjs +25 -0
package/scripts/sticker-catalog-loadtest.mjs +13 -11
package/scripts/sticker-worker-task.mjs +1 -4
package/scripts/sync-readme-snapshot.mjs +3 -2
package/server/controllers/stickerCatalogController.js +67 -5
package/server/http/httpServer.js +2 -10
package/server/routes/stickerCatalog/catalogHandlers/catalogAdminHttp.js +1 -8
package/server/routes/stickerCatalog/catalogHandlers/catalogAuthHttp.js +1 -9
package/server/routes/stickerCatalog/catalogHandlers/catalogPublicHttp.js +10 -11
package/server/routes/stickerCatalog/catalogHandlers/catalogUploadHttp.js +1 -10
package/server/routes/stickerCatalog/catalogRouter.js +11 -13

package/public/user/index.html CHANGED Viewed

@@ -1,371 +1,368 @@
 <!doctype html>
 <html lang="pt-BR">
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>OmniZap System | Minha Conta</title>
-  <meta name="description" content="Painel de conta do OmniZap System com dados do usuário vinculado ao WhatsApp." />
-  <meta name="robots" content="noindex, nofollow" />
-  <meta name="theme-color" content="#0f172a" />
-  <link rel="canonical" href="https://omnizap.shop/user/" />
-  <link rel="icon" type="image/jpeg" href="https://iili.io/FC3FABe.jpg" />
-  <link rel="preconnect" href="https://fonts.googleapis.com" />
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-  <link
-    href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Sora:wght@500;600;700&display=swap"
-    rel="stylesheet"
-  />
-  <style>
-    :root {
-      --bg: #0f172a;
-      --bg-2: #111827;
-      --card: #1e293bcf;
-      --line: rgba(255, 255, 255, 0.05);
-      --text: #f8fafc;
-      --muted: #94a3b8;
-      --primary: #22c55e;
-      --radius: 18px;
-    }
-    * {
-      box-sizing: border-box;
-    }
-    html,
-    body {
-      margin: 0;
-      padding: 0;
-      min-height: 100%;
-    }
-    body {
-      color: var(--text);
-      font-family: "Manrope", system-ui, sans-serif;
-      background:
-        radial-gradient(55rem 22rem at -10% -10%, #2563eb30, transparent 60%),
-        radial-gradient(55rem 22rem at 110% -8%, #7c3aed22, transparent 56%),
-        linear-gradient(160deg, var(--bg), var(--bg-2));
-      min-height: 100vh;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: 24px 14px;
-    }
-    .page {
-      width: min(840px, 100%);
-      border: 1px solid rgba(255, 255, 255, 0.05);
-      border-radius: 24px;
-      background: linear-gradient(150deg, #111827e8, #1e293bee);
-      box-shadow: 0 18px 44px #0209166e, inset 0 1px 0 #95c1ff1a;
-      overflow: hidden;
-    }
-    .head {
-      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
-      padding: 20px 22px;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: 14px;
-      flex-wrap: wrap;
-    }
-    .brand {
-      display: inline-flex;
-      align-items: center;
-      gap: 10px;
-      font-family: "Sora", sans-serif;
-      font-weight: 700;
-      letter-spacing: 0.2px;
-      text-decoration: none;
-      color: var(--text);
-    }
-    .brand img {
-      width: 30px;
-      height: 30px;
-      border-radius: 50%;
-      border: 1px solid rgba(255, 255, 255, 0.05);
-      object-fit: cover;
-    }
-    .head-actions {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 8px;
-    }
-    .btn {
-      border: 1px solid var(--line);
-      border-radius: 12px;
-      background: #101a2f;
-      color: var(--text);
-      text-decoration: none;
-      padding: 9px 12px;
-      font-size: 14px;
-      font-weight: 600;
-      transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
-      cursor: pointer;
-    }
-    .btn:hover {
-      transform: translateY(-1px);
-      border-color: #2563eb;
-      box-shadow: 0 10px 20px #02091650;
-    }
-    .btn.primary {
-      border-color: transparent;
-      background: #22c55e;
-      color: #0f172a;
-      box-shadow: 0 10px 22px #22c55e30;
-    }
-    .btn.primary:hover {
-      background: #16a34a;
-    }
-    .content {
-      padding: 24px 22px;
-      display: grid;
-      gap: 14px;
-    }
-    h1 {
-      margin: 0;
-      font-family: "Sora", sans-serif;
-      font-size: clamp(26px, 3.6vw, 36px);
-      line-height: 1.08;
-      letter-spacing: -0.02em;
-      background: linear-gradient(90deg, #eef5ff 0%, #60a5fa 46%, #a78bfa 100%);
-      -webkit-background-clip: text;
-      background-clip: text;
-      color: transparent;
-    }
-    .lead {
-      margin: 0;
-      color: #bfd1ea;
-      line-height: 1.6;
-      font-size: 16px;
-    }
-    .card {
-      border: 1px solid #334f7bc7;
-      border-radius: var(--radius);
-      background: var(--card);
-      padding: 16px;
-      display: grid;
-      gap: 12px;
-      backdrop-filter: blur(8px);
-    }
-    .status {
-      margin: 0;
-      color: #dce8fa;
-      font-size: 15px;
-      line-height: 1.5;
-    }
-    .error {
-      margin: 0;
-      border: 1px solid #a74949;
-      border-radius: 12px;
-      background: #3b181899;
-      color: #ffd7d7;
-      padding: 9px 10px;
-      font-size: 14px;
-    }
-    .profile {
-      display: grid;
-      grid-template-columns: auto 1fr;
-      gap: 12px;
-      align-items: center;
-      border: 1px solid #31517fb5;
-      border-radius: 14px;
-      background: #1e293bbf;
-      padding: 12px;
-    }
-    .avatar {
-      width: 66px;
-      height: 66px;
-      border-radius: 16px;
-      border: 1px solid #3c5a89;
-      object-fit: cover;
-      background: #0b1323;
-    }
-    .profile-meta h2 {
-      margin: 0 0 4px;
-      font-size: 20px;
-      line-height: 1.2;
-    }
-    .profile-meta p {
-      margin: 0;
-      color: var(--muted);
-      font-size: 14px;
-      line-height: 1.45;
-      word-break: break-word;
-    }
-    .grid {
-      display: grid;
-      grid-template-columns: repeat(4, minmax(0, 1fr));
-      gap: 8px;
-    }
-    .metric {
-      border: 1px solid #31517fb5;
-      border-radius: 12px;
-      background: #1e293bbf;
-      padding: 10px;
-    }
-    .metric-label {
-      margin: 0 0 4px;
-      color: #94a3b8;
-      font-size: 12px;
-    }
-    .metric-value {
-      margin: 0;
-      color: #e8f1ff;
-      font-size: 19px;
-      font-weight: 800;
-      letter-spacing: -0.01em;
-    }
-    .summary {
-      border: 1px solid #2b8b5d9c;
-      border-radius: 12px;
-      background: #11302294;
-      padding: 10px;
-      display: grid;
-      gap: 6px;
-      color: #dfffe8;
-      font-size: 14px;
-    }
-    .summary strong {
-      color: #f4fff8;
-    }
-    .actions {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 8px;
-    }
-    .footer {
-      margin: 0;
-      color: #7f94b8;
-      font-size: 12px;
-    }
-    @media (max-width: 760px) {
-      .grid {
-        grid-template-columns: repeat(2, minmax(0, 1fr));
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>OmniZap System | Minha Conta</title>
+    <meta name="description" content="Painel de conta do OmniZap System com dados do usuário vinculado ao WhatsApp." />
+    <meta name="robots" content="noindex, nofollow" />
+    <meta name="theme-color" content="#0f172a" />
+    <link rel="canonical" href="https://omnizap.shop/user/" />
+    <link rel="icon" type="image/jpeg" href="https://iili.io/FC3FABe.jpg" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Sora:wght@500;600;700&display=swap" rel="stylesheet" />
+    <style>
+      :root {
+        --bg: #0f172a;
+        --bg-2: #111827;
+        --card: #1e293bcf;
+        --line: rgba(255, 255, 255, 0.05);
+        --text: #f8fafc;
+        --muted: #94a3b8;
+        --primary: #22c55e;
+        --radius: 18px;
+      }
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+        min-height: 100%;
+      }
+      body {
+        color: var(--text);
+        font-family: 'Manrope', system-ui, sans-serif;
+        background: radial-gradient(55rem 22rem at -10% -10%, #2563eb30, transparent 60%), radial-gradient(55rem 22rem at 110% -8%, #7c3aed22, transparent 56%), linear-gradient(160deg, var(--bg), var(--bg-2));
+        min-height: 100vh;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 24px 14px;
+      }
+      .page {
+        width: min(840px, 100%);
+        border: 1px solid rgba(255, 255, 255, 0.05);
+        border-radius: 24px;
+        background: linear-gradient(150deg, #111827e8, #1e293bee);
+        box-shadow:
+          0 18px 44px #0209166e,
+          inset 0 1px 0 #95c1ff1a;
+        overflow: hidden;
       }
-    }
-    @media (max-width: 620px) {
       .head {
-        padding: 16px;
+        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+        padding: 20px 22px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 14px;
+        flex-wrap: wrap;
+      }
+      .brand {
+        display: inline-flex;
+        align-items: center;
+        gap: 10px;
+        font-family: 'Sora', sans-serif;
+        font-weight: 700;
+        letter-spacing: 0.2px;
+        text-decoration: none;
+        color: var(--text);
+      }
+      .brand img {
+        width: 30px;
+        height: 30px;
+        border-radius: 50%;
+        border: 1px solid rgba(255, 255, 255, 0.05);
+        object-fit: cover;
+      }
+      .head-actions {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 8px;
+      }
+      .btn {
+        border: 1px solid var(--line);
+        border-radius: 12px;
+        background: #101a2f;
+        color: var(--text);
+        text-decoration: none;
+        padding: 9px 12px;
+        font-size: 14px;
+        font-weight: 600;
+        transition:
+          transform 0.2s ease,
+          border-color 0.2s ease,
+          box-shadow 0.2s ease;
+        cursor: pointer;
+      }
+      .btn:hover {
+        transform: translateY(-1px);
+        border-color: #2563eb;
+        box-shadow: 0 10px 20px #02091650;
+      }
+      .btn.primary {
+        border-color: transparent;
+        background: #22c55e;
+        color: #0f172a;
+        box-shadow: 0 10px 22px #22c55e30;
+      }
+      .btn.primary:hover {
+        background: #16a34a;
       }
       .content {
-        padding: 18px 16px;
+        padding: 24px 22px;
+        display: grid;
+        gap: 14px;
+      }
+      h1 {
+        margin: 0;
+        font-family: 'Sora', sans-serif;
+        font-size: clamp(26px, 3.6vw, 36px);
+        line-height: 1.08;
+        letter-spacing: -0.02em;
+        background: linear-gradient(90deg, #eef5ff 0%, #60a5fa 46%, #a78bfa 100%);
+        -webkit-background-clip: text;
+        background-clip: text;
+        color: transparent;
+      }
+      .lead {
+        margin: 0;
+        color: #bfd1ea;
+        line-height: 1.6;
+        font-size: 16px;
+      }
+      .card {
+        border: 1px solid #334f7bc7;
+        border-radius: var(--radius);
+        background: var(--card);
+        padding: 16px;
+        display: grid;
+        gap: 12px;
+        backdrop-filter: blur(8px);
+      }
+      .status {
+        margin: 0;
+        color: #dce8fa;
+        font-size: 15px;
+        line-height: 1.5;
+      }
+      .error {
+        margin: 0;
+        border: 1px solid #a74949;
+        border-radius: 12px;
+        background: #3b181899;
+        color: #ffd7d7;
+        padding: 9px 10px;
+        font-size: 14px;
       }
       .profile {
-        grid-template-columns: 1fr;
-        text-align: center;
+        display: grid;
+        grid-template-columns: auto 1fr;
+        gap: 12px;
+        align-items: center;
+        border: 1px solid #31517fb5;
+        border-radius: 14px;
+        background: #1e293bbf;
+        padding: 12px;
       }
       .avatar {
-        margin-inline: auto;
-      }
-      .actions .btn {
-        width: 100%;
-        text-align: center;
-      }
-    }
-  </style>
-</head>
-<body>
-  <main id="user-app-root" class="page" data-api-base-path="/api/sticker-packs" data-login-path="/login" data-stickers-path="/stickers">
-    <header class="head">
-      <a href="/" class="brand">
-        <img src="https://iili.io/FC3FABe.jpg" alt="OmniZap" loading="lazy" decoding="async" />
-        <span>OmniZap System</span>
-      </a>
-      <div class="head-actions">
-        <a class="btn" href="/">Home</a>
-        <a id="user-manage-head-link" class="btn" href="/stickers/perfil">Gerenciar Stickers</a>
-      </div>
-    </header>
-    <section class="content">
-      <h1>Minha Conta</h1>
-      <p class="lead">Informações da sua conta vinculada ao OmniZap e atalhos rápidos de acesso.</p>
-      <article class="card">
-        <p id="user-status" class="status">Carregando dados da conta...</p>
-        <p id="user-error" class="error" hidden></p>
-        <div id="user-profile" class="profile" hidden>
-          <img id="user-avatar" class="avatar" src="https://iili.io/FC3FABe.jpg" alt="Avatar do usuário" />
-          <div class="profile-meta">
-            <h2 id="user-name">Conta</h2>
-            <p id="user-email"></p>
-            <p id="user-whatsapp"></p>
-          </div>
-        </div>
+        width: 66px;
+        height: 66px;
+        border-radius: 16px;
+        border: 1px solid #3c5a89;
+        object-fit: cover;
+        background: #0b1323;
+      }
-        <div id="user-grid" class="grid" hidden>
-          <article class="metric">
-            <p class="metric-label">Packs</p>
-            <p id="metric-packs" class="metric-value">0</p>
-          </article>
-          <article class="metric">
-            <p class="metric-label">Stickers</p>
-            <p id="metric-stickers" class="metric-value">0</p>
-          </article>
-          <article class="metric">
-            <p class="metric-label">Downloads</p>
-            <p id="metric-downloads" class="metric-value">0</p>
-          </article>
-          <article class="metric">
-            <p class="metric-label">Likes</p>
-            <p id="metric-likes" class="metric-value">0</p>
-          </article>
-        </div>
+      .profile-meta h2 {
+        margin: 0 0 4px;
+        font-size: 20px;
+        line-height: 1.2;
+      }
-        <div id="user-summary" class="summary" hidden>
-          <div><strong>Owner JID:</strong> <span id="user-owner-jid"></span></div>
-          <div><strong>Google ID:</strong> <span id="user-google-sub"></span></div>
-          <div><strong>Sessão expira:</strong> <span id="user-expires-at"></span></div>
-        </div>
+      .profile-meta p {
+        margin: 0;
+        color: var(--muted);
+        font-size: 14px;
+        line-height: 1.45;
+        word-break: break-word;
+      }
+      .grid {
+        display: grid;
+        grid-template-columns: repeat(4, minmax(0, 1fr));
+        gap: 8px;
+      }
+      .metric {
+        border: 1px solid #31517fb5;
+        border-radius: 12px;
+        background: #1e293bbf;
+        padding: 10px;
+      }
+      .metric-label {
+        margin: 0 0 4px;
+        color: #94a3b8;
+        font-size: 12px;
+      }
+      .metric-value {
+        margin: 0;
+        color: #e8f1ff;
+        font-size: 19px;
+        font-weight: 800;
+        letter-spacing: -0.01em;
+      }
+      .summary {
+        border: 1px solid #2b8b5d9c;
+        border-radius: 12px;
+        background: #11302294;
+        padding: 10px;
+        display: grid;
+        gap: 6px;
+        color: #dfffe8;
+        font-size: 14px;
+      }
+      .summary strong {
+        color: #f4fff8;
+      }
-        <div id="user-actions" class="actions" hidden>
-          <a id="user-chat-link" class="btn primary" href="https://api.whatsapp.com/send/?text=%2Fmenu&type=custom_url&app_absent=0" target="_blank" rel="noreferrer noopener">
-            Voltar ao chat do bot (/menu)
-          </a>
-          <a id="user-manage-main-link" class="btn" href="/stickers/perfil">Gerenciar meus stickers</a>
-          <a class="btn" href="/">Voltar para Home</a>
-          <button id="user-logout-btn" type="button" class="btn">Encerrar sessão</button>
+      .actions {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 8px;
+      }
+      .footer {
+        margin: 0;
+        color: #7f94b8;
+        font-size: 12px;
+      }
+      @media (max-width: 760px) {
+        .grid {
+          grid-template-columns: repeat(2, minmax(0, 1fr));
+        }
+      }
+      @media (max-width: 620px) {
+        .head {
+          padding: 16px;
+        }
+        .content {
+          padding: 18px 16px;
+        }
+        .profile {
+          grid-template-columns: 1fr;
+          text-align: center;
+        }
+        .avatar {
+          margin-inline: auto;
+        }
+        .actions .btn {
+          width: 100%;
+          text-align: center;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <main id="user-app-root" class="page" data-api-base-path="/api/sticker-packs" data-login-path="/login" data-stickers-path="/stickers">
+      <header class="head">
+        <a href="/" class="brand">
+          <img src="https://iili.io/FC3FABe.jpg" alt="OmniZap" loading="lazy" decoding="async" />
+          <span>OmniZap System</span>
+        </a>
+        <div class="head-actions">
+          <a class="btn" href="/">Home</a>
+          <a id="user-manage-head-link" class="btn" href="/stickers/perfil">Gerenciar Stickers</a>
         </div>
-      </article>
+      </header>
+      <section class="content">
+        <h1>Minha Conta</h1>
+        <p class="lead">Informações da sua conta vinculada ao OmniZap e atalhos rápidos de acesso.</p>
+        <article class="card">
+          <p id="user-status" class="status">Carregando dados da conta...</p>
+          <p id="user-error" class="error" hidden></p>
+          <div id="user-profile" class="profile" hidden>
+            <img id="user-avatar" class="avatar" src="https://iili.io/FC3FABe.jpg" alt="Avatar do usuário" />
+            <div class="profile-meta">
+              <h2 id="user-name">Conta</h2>
+              <p id="user-email"></p>
+              <p id="user-whatsapp"></p>
+            </div>
+          </div>
+          <div id="user-grid" class="grid" hidden>
+            <article class="metric">
+              <p class="metric-label">Packs</p>
+              <p id="metric-packs" class="metric-value">0</p>
+            </article>
+            <article class="metric">
+              <p class="metric-label">Stickers</p>
+              <p id="metric-stickers" class="metric-value">0</p>
+            </article>
+            <article class="metric">
+              <p class="metric-label">Downloads</p>
+              <p id="metric-downloads" class="metric-value">0</p>
+            </article>
+            <article class="metric">
+              <p class="metric-label">Likes</p>
+              <p id="metric-likes" class="metric-value">0</p>
+            </article>
+          </div>
+          <div id="user-summary" class="summary" hidden>
+            <div><strong>Owner JID:</strong> <span id="user-owner-jid"></span></div>
+            <div><strong>Google ID:</strong> <span id="user-google-sub"></span></div>
+            <div><strong>Sessão expira:</strong> <span id="user-expires-at"></span></div>
+          </div>
+          <div id="user-actions" class="actions" hidden>
+            <a id="user-chat-link" class="btn primary" href="https://api.whatsapp.com/send/?text=%2Fmenu&type=custom_url&app_absent=0" target="_blank" rel="noreferrer noopener"> Voltar ao chat do bot (/menu) </a>
+            <a id="user-manage-main-link" class="btn" href="/stickers/perfil">Gerenciar meus stickers</a>
+            <a class="btn" href="/">Voltar para Home</a>
+            <button id="user-logout-btn" type="button" class="btn">Encerrar sessão</button>
+          </div>
+        </article>
-      <p class="footer">OmniZap System · <span id="user-current-year"></span></p>
-    </section>
-  </main>
+        <p class="footer">OmniZap System · <span id="user-current-year"></span></p>
+      </section>
+    </main>
-  <script type="module" src="/js/apps/userApp.js?v=20260228-user-page-v1"></script>
-</body>
+    <script type="module" src="/js/apps/userApp.js?v=20260228-user-page-v1"></script>
+  </body>
 </html>