npm - levix-bot - Versions diffs - 2.0.0 - Mend

levix-bot 2.0.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 (148) hide show

package/LICENSE +21 -0
package/README.md +105 -0
package/SETUP.md +242 -0
package/app.cjs +337 -0
package/bin/levix.js +7 -0
package/deploy/install.sh +182 -0
package/deploy/levix.service +56 -0
package/deploy/nginx/levix.leviro.net.conf +79 -0
package/package.json +78 -0
package/public/brand/apple-touch-icon.png +0 -0
package/public/brand/banner.jpg +0 -0
package/public/brand/banner.webp +0 -0
package/public/brand/icon-16.png +0 -0
package/public/brand/icon-192.png +0 -0
package/public/brand/icon-32.png +0 -0
package/public/brand/icon-512.png +0 -0
package/public/brand/icon-512.webp +0 -0
package/public/brand/mark.png +0 -0
package/public/brand/mark.svg +16 -0
package/public/brand/mark.webp +0 -0
package/public/brand/wordmark.png +0 -0
package/public/brand/wordmark.webp +0 -0
package/public/dashboard.css +881 -0
package/public/dashboard.js +1057 -0
package/public/logo.svg +16 -0
package/public/qrcode.min.js +1 -0
package/public/socket.io.min.js +7 -0
package/scheduler.cjs +197 -0
package/src/auth/auth-storage.cjs +74 -0
package/src/auth/use-database-auth-state.js +130 -0
package/src/bootstrap/core.js +74 -0
package/src/bootstrap/events.cjs +43 -0
package/src/bootstrap/panel.js +97 -0
package/src/cli.js +153 -0
package/src/commands/autoschedule.cjs +84 -0
package/src/commands/blacklist.cjs +116 -0
package/src/commands/block.cjs +70 -0
package/src/commands/calc.cjs +387 -0
package/src/commands/debt.cjs +175 -0
package/src/commands/deleteschedule.cjs +36 -0
package/src/commands/gemini.cjs +727 -0
package/src/commands/group/add.cjs +136 -0
package/src/commands/group/all.cjs +43 -0
package/src/commands/group/antiSpam.cjs +96 -0
package/src/commands/group/antilink.cjs +167 -0
package/src/commands/group/approveall.cjs +54 -0
package/src/commands/group/clearwarns.cjs +41 -0
package/src/commands/group/deletenote.cjs +33 -0
package/src/commands/group/demote.cjs +62 -0
package/src/commands/group/kick.cjs +85 -0
package/src/commands/group/media.cjs +120 -0
package/src/commands/group/members.cjs +59 -0
package/src/commands/group/note.cjs +32 -0
package/src/commands/group/promote.cjs +60 -0
package/src/commands/group/removeall.cjs +42 -0
package/src/commands/group/rules.cjs +31 -0
package/src/commands/group/save.cjs +36 -0
package/src/commands/group/setname.cjs +41 -0
package/src/commands/group/setpp.cjs +51 -0
package/src/commands/group/setrules.cjs +46 -0
package/src/commands/group/setwarn.cjs +58 -0
package/src/commands/group/tagadmins.cjs +50 -0
package/src/commands/group/warn.cjs +105 -0
package/src/commands/group/warns.cjs +66 -0
package/src/commands/group/welcome.cjs +109 -0
package/src/commands/group.cjs +160 -0
package/src/commands/help.cjs +230 -0
package/src/commands/listschedules.cjs +47 -0
package/src/commands/loop.cjs +163 -0
package/src/commands/memory.cjs +201 -0
package/src/commands/mod.cjs +155 -0
package/src/commands/notes.cjs +28 -0
package/src/commands/perm.cjs +236 -0
package/src/commands/ping.cjs +17 -0
package/src/commands/poll.cjs +80 -0
package/src/commands/prayer.cjs +64 -0
package/src/commands/qr.cjs +39 -0
package/src/commands/rand.cjs +130 -0
package/src/commands/restart.cjs +25 -0
package/src/commands/schedule.cjs +86 -0
package/src/commands/score.cjs +130 -0
package/src/commands/setprefix.cjs +40 -0
package/src/commands/shortlink.cjs +74 -0
package/src/commands/shutdown.cjs +45 -0
package/src/commands/status.cjs +75 -0
package/src/commands/stt.cjs +150 -0
package/src/commands/todo.cjs +88 -0
package/src/commands/tts.cjs +170 -0
package/src/commands/unblock.cjs +57 -0
package/src/commands/weather.cjs +79 -0
package/src/config/ai-persona.md +17 -0
package/src/config/baileys.config.js +51 -0
package/src/config/brand.cjs +36 -0
package/src/config/brand.esm.js +17 -0
package/src/config/constants.js +16 -0
package/src/config/defaults.cjs +91 -0
package/src/config/lock.cjs +110 -0
package/src/config/paths.cjs +90 -0
package/src/config/runtime-config.cjs +219 -0
package/src/config/secrets.cjs +130 -0
package/src/config/settings.cjs +386 -0
package/src/core/connection.js +199 -0
package/src/core/events.js +61 -0
package/src/core/socket.js +64 -0
package/src/db/db.cjs +282 -0
package/src/db/store.cjs +837 -0
package/src/db/store.esm.js +17 -0
package/src/domain/caddy.js +120 -0
package/src/domain/command.js +380 -0
package/src/domain/detect.js +173 -0
package/src/domain/nginx.js +138 -0
package/src/domain/system.js +148 -0
package/src/handlers/command.handler.js +414 -0
package/src/handlers/group.handler.js +73 -0
package/src/handlers/message.handler.js +149 -0
package/src/index.js +217 -0
package/src/middleware/antispam.middleware.js +68 -0
package/src/middleware/blacklist.middleware.js +29 -0
package/src/middleware/forward-tracking.middleware.js +49 -0
package/src/middleware/permissions.middleware.js +114 -0
package/src/routes/dashboard.api.esm.js +779 -0
package/src/services/aiAgent.cjs +317 -0
package/src/services/aiTools.cjs +635 -0
package/src/utils/datetime.cjs +61 -0
package/src/utils/lid-helper.esm.js +143 -0
package/src/utils/logger.cjs +72 -0
package/src/utils/memory.cjs +385 -0
package/src/utils/normalizeJid.cjs +65 -0
package/src/utils/normalizeJid.esm.js +37 -0
package/src/utils/openBrowser.cjs +129 -0
package/src/utils/permissions.cjs +154 -0
package/src/utils/permissions.esm.js +375 -0
package/src/utils/recentMessageCache.esm.js +70 -0
package/src/utils/requestOrigin.cjs +102 -0
package/src/utils/sendBotMessage.cjs +43 -0
package/src/utils/sendBotMessage.esm.js +139 -0
package/src/utils/statusMessage.cjs +179 -0
package/src/utils/storage-hub.cjs +49 -0
package/src/utils/storage-hub.esm.js +24 -0
package/src/utils/storage.cjs +80 -0
package/src/utils/storage.esm.js +88 -0
package/src/utils/textDecode.cjs +197 -0
package/src/utils/thumbnail.cjs +591 -0
package/src/utils/typing.esm.js +102 -0
package/views/dashboard.ejs +329 -0
package/views/login.ejs +105 -0
package/views/qr.ejs +108 -0
package/views/setup.ejs +122 -0

package/views/dashboard.ejs ADDED Viewed

@@ -0,0 +1,329 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="dark">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title><%= brand.name %> · Control panel</title>
+    <link rel="icon" type="image/png" sizes="32x32" href="/brand/icon-32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/brand/icon-16.png" />
+    <link rel="apple-touch-icon" href="/brand/apple-touch-icon.png" />
+    <link rel="stylesheet" href="/dashboard.css" />
+  </head>
+  <body>
+    <div class="shell">
+      <aside class="sidebar" id="sidebar">
+        <div class="brand">
+          <img src="/brand/mark.svg" alt="" />
+          <div>
+            <div class="brand-name"><%= brand.name %></div>
+            <div class="brand-tag"><%= brand.tagline %></div>
+          </div>
+        </div>
+        <nav class="nav">
+          <a href="#overview" data-view="overview">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>
+            Overview
+          </a>
+          <a href="#connection" data-view="connection">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 20a8 8 0 1 0-7-4l-1 4 4-1a8 8 0 0 0 4 1z"/></svg>
+            Connection
+          </a>
+          <div class="nav-label">Control</div>
+          <a href="#commands" data-view="commands">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/></svg>
+            Commands
+          </a>
+          <a href="#ai" data-view="ai">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 3v3M12 18v3M3 12h3M18 12h3"/><circle cx="12" cy="12" r="4"/></svg>
+            AI &amp; memory
+          </a>
+          <a href="#groups" data-view="groups">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="9" cy="8" r="3"/><circle cx="17" cy="9" r="2.5"/><path d="M3 19a6 6 0 0 1 12 0M15 19a5 5 0 0 1 6-4"/></svg>
+            Groups
+          </a>
+          <a href="#roles" data-view="roles">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 3l7 4v5c0 4-3 7-7 9-4-2-7-5-7-9V7z"/></svg>
+            Roles
+          </a>
+          <div class="nav-label">Data</div>
+          <a href="#data" data-view="data">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><ellipse cx="12" cy="6" rx="8" ry="3"/><path d="M4 6v12c0 1.7 3.6 3 8 3s8-1.3 8-3V6"/><path d="M4 12c0 1.7 3.6 3 8 3s8-1.3 8-3"/></svg>
+            Tables
+          </a>
+          <a href="#settings" data-view="settings">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19 12a7 7 0 0 0-.1-1l2-1.5-2-3.4-2.3 1a7 7 0 0 0-1.7-1L14.5 3h-4l-.4 2.6a7 7 0 0 0-1.7 1l-2.3-1-2 3.4L6 11a7 7 0 0 0 0 2l-2 1.5 2 3.4 2.3-1a7 7 0 0 0 1.7 1l.4 2.6h4l.4-2.6a7 7 0 0 0 1.7-1l2.3 1 2-3.4-2-1.5c.1-.3.1-.7.1-1z"/></svg>
+            Settings
+          </a>
+        </nav>
+        <div class="sidebar-foot">
+          <%= brand.name %> · built by <%= brand.developer %><br />
+          <a href="<%= brand.repo %>" target="_blank" rel="noopener noreferrer">Source &amp; docs</a>
+        </div>
+      </aside>
+      <button class="sidebar-backdrop" id="sidebar-backdrop" type="button" aria-label="Close navigation"></button>
+      <div class="main">
+        <header class="topbar">
+          <button class="btn btn-icon menu-btn" id="menu-btn" type="button" aria-label="Open navigation" aria-controls="sidebar" aria-expanded="false">☰</button>
+          <h1 id="page-title">Overview</h1>
+          <div class="spacer"></div>
+          <span class="pill" id="status-pill"><span class="dot"></span>Checking…</span>
+          <button class="btn btn-icon" id="refresh-btn" type="button" aria-label="Refresh current view">⟳</button>
+          <button class="btn btn-icon" id="theme-btn" type="button" aria-label="Switch color theme">☀</button>
+          <form action="/logout" method="post">
+            <button type="submit" class="btn btn-sm">Log out</button>
+          </form>
+        </header>
+        <main class="content">
+          <!-- Overview ---------------------------------------------------->
+          <section class="view" id="view-overview">
+            <div class="section-head">
+              <h2>Overview</h2>
+              <p>What the bot is doing right now.</p>
+            </div>
+            <div class="stats" id="stat-cards"></div>
+            <div class="card">
+              <div class="card-head"><h2>Runtime</h2></div>
+              <div class="grid-2" id="overview-info"></div>
+            </div>
+          </section>
+          <!-- Connection -------------------------------------------------->
+          <section class="view" id="view-connection">
+            <div class="section-head">
+              <h2>Connection</h2>
+              <p>Link a WhatsApp account, or unlink the one in use.</p>
+            </div>
+            <div class="card">
+              <div class="card-head">
+                <h2>Account</h2>
+                <div class="spacer"></div>
+                <span id="conn-state"></span>
+              </div>
+              <div id="qr-panel">
+                <div class="qr-box">
+                  <div class="qr-frame" id="qr-frame"></div>
+                  <div class="hint" id="qr-note">Waiting for a QR code…</div>
+                  <ol class="steps">
+                    <li>Open WhatsApp on the phone the bot should use.</li>
+                    <li>Settings → Linked devices → Link a device.</li>
+                    <li>Point the camera at the code above.</li>
+                  </ol>
+                </div>
+              </div>
+              <div class="inline" style="margin-top:12px">
+                <button class="btn btn-danger" id="unlink-btn">Unlink account</button>
+                <button class="btn" id="restart-btn">Restart bot</button>
+              </div>
+              <div class="hint" style="margin-top:8px">
+                Restart only comes back on its own under a supervisor (pm2, systemd, Docker).
+              </div>
+            </div>
+          </section>
+          <!-- Commands ---------------------------------------------------->
+          <section class="view" id="view-commands">
+            <div class="section-head">
+              <h2>Commands</h2>
+              <p>Rename triggers, change who may run what, switch commands off.</p>
+            </div>
+            <div class="card">
+              <div class="card-head"><h2>Prefix</h2></div>
+              <div class="inline">
+                <input type="text" id="prefix-input" maxlength="3" style="max-width:90px" />
+                <button class="btn btn-primary" id="prefix-save">Save</button>
+                <span class="hint">The character every command starts with, e.g. <code>!ping</code>.</span>
+              </div>
+            </div>
+            <div class="card">
+              <div class="toolbar">
+                <input type="text" id="cmd-search" placeholder="Search commands…" />
+                <select id="cmd-filter">
+                  <option value="all">All commands</option>
+                  <option value="general">General</option>
+                  <option value="group">Group</option>
+                </select>
+                <div class="spacer" style="flex:1"></div>
+                <span class="hint">Changes apply to the next message.</span>
+              </div>
+              <div class="table-wrap">
+                <table>
+                  <thead>
+                    <tr>
+                      <th>Command</th>
+                      <th>Type</th>
+                      <th>Aliases (comma separated)</th>
+                      <th>Who can run it</th>
+                      <th>On</th>
+                    </tr>
+                  </thead>
+                  <tbody id="cmd-body">
+                    <tr><td colspan="5"><div class="loading">Loading…</div></td></tr>
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          </section>
+          <!-- AI ---------------------------------------------------------->
+          <section class="view" id="view-ai">
+            <div class="section-head">
+              <h2>AI &amp; memory</h2>
+              <p>The prompt the model gets, and everything it has been told to remember.</p>
+            </div>
+            <div class="card">
+              <div class="card-head">
+                <h2>System prompt</h2>
+                <div class="spacer"></div>
+                <span class="hint"><code id="persona-file">ai-persona.md</code></span>
+              </div>
+              <textarea id="persona-body" spellcheck="false"></textarea>
+              <div class="inline" style="margin-top:12px">
+                <button class="btn btn-primary" id="persona-save">Save prompt</button>
+                <span class="hint">Applies to the next message — no restart.</span>
+              </div>
+            </div>
+            <div class="card">
+              <div class="card-head"><h2>Long-term memory</h2></div>
+              <div class="inline" id="memory-list"></div>
+              <div id="memory-editor" style="display:none;margin-top:16px">
+                <div class="card-head">
+                  <h2>Editing <code id="memory-scope"></code></h2>
+                </div>
+                <textarea id="memory-content" spellcheck="false"></textarea>
+                <div class="inline" style="margin-top:12px">
+                  <button class="btn btn-primary" id="memory-save">Save</button>
+                  <button class="btn btn-danger" id="memory-delete">Delete file</button>
+                  <span class="hint">Plain Markdown — a line starting with <code>-</code> is one memory.</span>
+                </div>
+              </div>
+            </div>
+          </section>
+          <!-- Groups ------------------------------------------------------>
+          <section class="view" id="view-groups">
+            <div class="section-head">
+              <h2>Groups</h2>
+              <p>Moderation settings per group. Same values the <code>!group</code> commands change.</p>
+            </div>
+            <div id="groups-list"><div class="loading">Loading…</div></div>
+          </section>
+          <!-- Roles ------------------------------------------------------->
+          <section class="view" id="view-roles">
+            <div class="section-head">
+              <h2>Roles</h2>
+              <p>Bot-level roles. An owner can do everything; an admin counts as an admin in every chat.</p>
+            </div>
+            <div class="card">
+              <div class="card-head"><h2>Add someone</h2></div>
+              <div class="inline">
+                <input type="text" id="role-number" placeholder="201234567890" style="max-width:220px" />
+                <select id="role-kind" style="max-width:140px">
+                  <option value="admin">Admin</option>
+                  <option value="owner">Owner</option>
+                </select>
+                <button class="btn btn-primary" id="role-add">Add</button>
+                <span class="hint">International format, digits only.</span>
+              </div>
+            </div>
+            <div class="card">
+              <div class="card-head"><h2>Owners</h2></div>
+              <div class="table-wrap">
+                <table>
+                  <thead><tr><th>Number</th><th>Name</th><th></th></tr></thead>
+                  <tbody id="owners-body"></tbody>
+                </table>
+              </div>
+            </div>
+            <div class="card">
+              <div class="card-head"><h2>Admins</h2></div>
+              <div class="table-wrap">
+                <table>
+                  <thead><tr><th>Number</th><th>Name</th><th></th></tr></thead>
+                  <tbody id="admins-body"></tbody>
+                </table>
+              </div>
+            </div>
+          </section>
+          <!-- Data -------------------------------------------------------->
+          <section class="view" id="view-data">
+            <div class="section-head">
+              <h2>Tables</h2>
+              <p>What the bot has stored: debts, warnings, notes, todo lists, known users.</p>
+            </div>
+            <div class="card">
+              <div class="toolbar" id="data-tabs">
+                <button class="btn btn-sm btn-primary" data-table="debts">Debts</button>
+                <button class="btn btn-sm" data-table="warnings">Warnings</button>
+                <button class="btn btn-sm" data-table="notes">Notes</button>
+                <button class="btn btn-sm" data-table="todos">Todos</button>
+                <button class="btn btn-sm" data-table="users">Users</button>
+                <button class="btn btn-sm" data-table="schedules">Schedules</button>
+              </div>
+              <div id="data-table"><div class="loading">Loading…</div></div>
+            </div>
+          </section>
+          <!-- Settings ---------------------------------------------------->
+          <section class="view" id="view-settings">
+            <div class="section-head">
+              <h2>Settings</h2>
+              <p>
+                This page is the only place the bot is configured — there is no config file.
+                Clear a field to go back to its default.
+              </p>
+            </div>
+            <div class="card">
+              <div class="card-head"><h2>Control panel password</h2></div>
+              <div class="inline" style="margin-bottom:8px">
+                <input type="password" id="pw-current" placeholder="Current password"
+                       autocomplete="current-password" />
+              </div>
+              <div class="inline" style="margin-bottom:8px">
+                <input type="password" id="pw-next" placeholder="New password"
+                       autocomplete="new-password" />
+                <button class="btn btn-sm btn-primary" id="pw-save">Change</button>
+              </div>
+              <div class="hint">
+                This password is the only thing between the internet and a linked WhatsApp
+                account. It is stored as a hash — nobody, including this page, can read it back.
+              </div>
+            </div>
+            <div id="settings-list"><div class="loading">Loading…</div></div>
+          </section>
+        </main>
+      </div>
+    </div>
+    <div class="toasts" id="toasts"></div>
+    <script src="/socket.io.min.js"></script>
+    <script src="/qrcode.min.js"></script>
+    <script src="/dashboard.js"></script>
+  </body>
+</html>

package/views/login.ejs ADDED Viewed

@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="dark">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title><%= brand.name %> · Sign in</title>
+    <link rel="icon" type="image/png" sizes="32x32" href="/brand/icon-32.png" />
+    <link rel="apple-touch-icon" href="/brand/apple-touch-icon.png" />
+    <link rel="stylesheet" href="/dashboard.css" />
+    <style>
+      body {
+        display: grid;
+        place-items: center;
+        padding: 24px;
+        background:
+          radial-gradient(900px 500px at 15% -10%, rgba(22, 82, 240, 0.22), transparent 60%),
+          radial-gradient(700px 420px at 90% 110%, rgba(33, 212, 253, 0.16), transparent 60%),
+          var(--bg);
+      }
+      .login {
+        width: 100%;
+        max-width: 380px;
+        text-align: center;
+      }
+      .login .brand-lockup {
+        margin-bottom: 22px;
+      }
+      .login .card {
+        text-align: left;
+        padding: 24px;
+        box-shadow: var(--shadow);
+      }
+      .login h1 {
+        font-size: 1.05rem;
+        font-weight: 650;
+        margin-bottom: 4px;
+      }
+      .login p.sub {
+        color: var(--muted);
+        font-size: 0.86rem;
+        margin-bottom: 18px;
+      }
+      .login button {
+        width: 100%;
+        margin-top: 6px;
+        padding: 11px;
+      }
+      .error {
+        margin-top: 12px;
+        padding: 9px 12px;
+        border-radius: var(--radius-sm);
+        background: color-mix(in srgb, var(--danger) 14%, transparent);
+        border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent);
+        color: var(--danger);
+        font-size: 0.85rem;
+        text-align: center;
+      }
+      .foot {
+        margin-top: 20px;
+        color: var(--faint);
+        font-size: 0.78rem;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="login">
+      <div class="brand-lockup" aria-label="<%= brand.name %>">
+        <img src="/brand/mark.svg" alt="" />
+        <strong><%= brand.name %></strong>
+      </div>
+      <form class="card" action="/login" method="post">
+        <h1>Control panel</h1>
+        <p class="sub">Sign in with your control panel password.</p>
+        <label class="field">
+          <span>Password</span>
+          <input
+            type="password"
+            name="password"
+            autocomplete="current-password"
+            autofocus
+            required
+          />
+        </label>
+        <button type="submit" class="btn btn-primary">Sign in</button>
+        <% if (error) { %>
+        <div class="error"><%= error %></div>
+        <% } %>
+      </form>
+      <div class="foot"><%= brand.name %> - <%= brand.tagline %> · by <%= brand.developer %></div>
+    </div>
+  </body>
+</html>

package/views/qr.ejs ADDED Viewed

@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="dark">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title><%= brand.name %> · Link WhatsApp</title>
+    <link rel="icon" type="image/png" sizes="32x32" href="/brand/icon-32.png" />
+    <link rel="apple-touch-icon" href="/brand/apple-touch-icon.png" />
+    <link rel="stylesheet" href="/dashboard.css" />
+    <style>
+      body {
+        display: grid;
+        place-items: center;
+        padding: 24px;
+        background:
+          radial-gradient(900px 500px at 15% -10%, rgba(22, 82, 240, 0.2), transparent 60%),
+          var(--bg);
+      }
+      .wrap {
+        width: 100%;
+        max-width: 430px;
+        text-align: center;
+      }
+      .wrap .brand-lockup {
+        margin-bottom: 20px;
+      }
+      .wrap .card {
+        box-shadow: var(--shadow);
+      }
+      .foot {
+        margin-top: 18px;
+        color: var(--faint);
+        font-size: 0.78rem;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="wrap">
+      <div class="brand-lockup" aria-label="<%= brand.name %>">
+        <img src="/brand/mark.svg" alt="" />
+        <strong><%= brand.name %></strong>
+      </div>
+      <div class="card">
+        <div class="card-head">
+          <h2>Link a WhatsApp account</h2>
+          <div class="spacer"></div>
+          <span class="pill" id="state"><span class="dot"></span>Waiting…</span>
+        </div>
+        <div class="qr-box">
+          <div class="qr-frame" id="frame"></div>
+          <ol class="steps">
+            <li>Open WhatsApp on the phone the bot should use.</li>
+            <li>Settings → Linked devices → Link a device.</li>
+            <li>Point the camera at the code above.</li>
+          </ol>
+        </div>
+        <a class="btn" href="/">Back to the dashboard</a>
+      </div>
+      <div class="foot"><%= brand.name %> · by <%= brand.developer %></div>
+    </div>
+    <script src="/socket.io/socket.io.js"></script>
+    <script src="/qrcode.min.js"></script>
+    <script>
+      (() => {
+        const frame = document.getElementById("frame");
+        const state = document.getElementById("state");
+        let painted = null;
+        function setState(text, kind) {
+          state.className = `pill ${kind || ""}`;
+          state.innerHTML = `<span class="dot"></span>${text}`;
+        }
+        function render(qr) {
+          if (!qr || painted === qr) return;
+          painted = qr;
+          frame.innerHTML = "";
+          new QRCode(frame, {
+            text: qr,
+            width: 250,
+            height: 250,
+            correctLevel: QRCode.CorrectLevel.H,
+          });
+          setState("Scan me", "");
+        }
+        // The QR the server already had when this page was rendered.
+        const initial = <%- JSON.stringify(qr || "") %>;
+        if (initial) render(initial);
+        else setState("Waiting for a code…", "");
+        const socket = io();
+        socket.on("qr", render);
+        socket.on("status_update", (data) => {
+          if (data.status === "Connected") {
+            frame.innerHTML = '<div style="padding:60px 30px;color:#0d1730">Linked ✓</div>';
+            setState("Connected", "on");
+          }
+        });
+      })();
+    </script>
+  </body>
+</html>

package/views/setup.ejs ADDED Viewed

@@ -0,0 +1,122 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="dark">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title><%= brand.name %> · First run</title>
+    <link rel="icon" type="image/png" sizes="32x32" href="/brand/icon-32.png" />
+    <link rel="apple-touch-icon" href="/brand/apple-touch-icon.png" />
+    <link rel="stylesheet" href="/dashboard.css" />
+    <style>
+      body {
+        display: grid;
+        place-items: center;
+        padding: 24px;
+        background:
+          radial-gradient(900px 500px at 15% -10%, rgba(22, 82, 240, 0.22), transparent 60%),
+          radial-gradient(700px 420px at 90% 110%, rgba(33, 212, 253, 0.16), transparent 60%),
+          var(--bg);
+      }
+      .login {
+        width: 100%;
+        max-width: 400px;
+        text-align: center;
+      }
+      .login .brand-lockup {
+        margin-bottom: 22px;
+      }
+      .login .card {
+        text-align: left;
+        padding: 24px;
+        box-shadow: var(--shadow);
+      }
+      .login h1 {
+        font-size: 1.05rem;
+        font-weight: 650;
+        margin-bottom: 4px;
+      }
+      .login p.sub {
+        color: var(--muted);
+        font-size: 0.86rem;
+        margin-bottom: 18px;
+      }
+      .login button {
+        width: 100%;
+        margin-top: 6px;
+        padding: 11px;
+      }
+      .login .field {
+        margin-bottom: 12px;
+      }
+      .error {
+        margin-top: 12px;
+        padding: 9px 12px;
+        border-radius: var(--radius-sm);
+        background: color-mix(in srgb, var(--danger) 14%, transparent);
+        border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent);
+        color: var(--danger);
+        font-size: 0.85rem;
+        text-align: center;
+      }
+      .foot {
+        margin-top: 20px;
+        color: var(--faint);
+        font-size: 0.78rem;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="login">
+      <div class="brand-lockup" aria-label="<%= brand.name %>">
+        <img src="/brand/mark.svg" alt="" />
+        <strong><%= brand.name %></strong>
+      </div>
+      <form class="card" action="/setup" method="post">
+        <h1>Welcome</h1>
+        <p class="sub">
+          Pick a password for the control panel. It is the only thing protecting a
+          linked WhatsApp account, so make it a real one — at least
+          <%= minLength %> characters.
+        </p>
+        <% if (needsCode) { %>
+        <label class="field">
+          <span>Setup code</span>
+          <input type="text" name="code" autocomplete="off" autofocus required
+                 placeholder="printed in the bot's terminal" />
+        </label>
+        <% } %>
+        <label class="field">
+          <span>Password</span>
+          <input type="password" name="password" autocomplete="new-password"
+                 minlength="<%= minLength %>" <%= needsCode ? "" : "autofocus" %> required />
+        </label>
+        <label class="field">
+          <span>Repeat password</span>
+          <input type="password" name="confirm" autocomplete="new-password"
+                 minlength="<%= minLength %>" required />
+        </label>
+        <button type="submit" class="btn btn-primary">Create and sign in</button>
+        <% if (error) { %>
+        <div class="error"><%= error %></div>
+        <% } %>
+      </form>
+      <div class="foot"><%= brand.name %> - <%= brand.tagline %> · by <%= brand.developer %></div>
+    </div>
+  </body>
+</html>