levix-bot 3.3.0-rc.2 → 4.0.0

package/src/utils/statusMessage.cjs

@@ -44,7 +44,7 @@ class StatusMessage {
         this.sock,
         this.jid,
         { text },
-        { replyTo: this.replyTo, quote: this.quote, typing: false, delayMs: 0 }
+        { replyTo: this.replyTo, quote: this.quote, typing: false, delayMs: 0 },
       );
       this.key = sent?.key || null;
       this.lastEditAt = Date.now();
@@ -71,11 +71,7 @@ class StatusMessage {
       // `quoted: null` on purpose: the command handler wraps sock.sendMessage
       // and auto-quotes anything that doesn't set it, and an edit/delete is a
       // protocolMessage — there is nowhere to hang a contextInfo.
-      await this.sock.sendMessage(
-        this.jid,
-        { text: next, edit: this.key },
-        { quoted: null }
-      );
+      await this.sock.sendMessage(this.jid, { text: next, edit: this.key }, { quoted: null });
       this.text = next;
       this.lastEditAt = Date.now();
       return true;
@@ -91,7 +87,7 @@ class StatusMessage {
         this.sock,
         this.jid,
         { text },
-        { replyTo: this.replyTo, quote: this.quote, typing: false, delayMs: 0 }
+        { replyTo: this.replyTo, quote: this.quote, typing: false, delayMs: 0 },
       );
       this.key = sent?.key || null;
       this.text = text;
@@ -115,7 +111,7 @@ class StatusMessage {
     const name = err?.name || "Error";
     const message = err?.message || String(err || "غير معروف");
     return this.finish(
-      `❌ *${arabicLead}*\n\n*النوع:* \`${name}\`\n*التفاصيل:* ${message}`.slice(0, 1500)
+      `❌ *${arabicLead}*\n\n*النوع:* \`${name}\`\n*التفاصيل:* ${message}`.slice(0, 1500),
     );
   }
 
@@ -124,11 +120,7 @@ class StatusMessage {
     this.closed = true;
     if (!this.key) return false;
     try {
-      await this.sock.sendMessage(
-        this.jid,
-        { delete: this.key },
-        { quoted: null }
-      );
+      await this.sock.sendMessage(this.jid, { delete: this.key }, { quoted: null });
       this.key = null;
       return true;
     } catch (err) {

package/src/utils/storage.cjs

@@ -17,6 +17,13 @@ module.exports = {
   getGroupSettings: store.getGroupSettings,
   saveGroupSettings: store.saveGroupSettings,
   getAllGroupSettings: store.getAllGroupSettings,
+  upsertGroupDirectory: store.upsertGroupDirectory,
+  getGroupDirectory: store.getGroupDirectory,
+  getAllGroupDirectory: store.getAllGroupDirectory,
+  clearWhatsAppDirectory: store.clearWhatsAppDirectory,
+  isPairedSession: store.isPairedSession,
+  resolveUserPhone: store.resolveUserPhone,
+  describePeer: store.describePeer,
   // Warnings
   getUserWarnings: store.getUserWarnings,
   saveUserWarnings: store.saveUserWarnings,
@@ -77,5 +84,8 @@ module.exports = {
   setScheduleStatus: store.setScheduleStatus,
   setScheduleDelivery: store.setScheduleDelivery,
   deleteSchedule: store.deleteSchedule,
+  pauseAllSchedules: store.pauseAllSchedules,
   countSchedules: store.countSchedules,
+  // AI conversation history
+  deleteAllChatHistories: store.deleteAllChatHistories,
 };

package/src/utils/storage.esm.js

@@ -16,6 +16,13 @@ export const deleteBotSetting = store.deleteBotSetting;
 export const getGroupSettings = store.getGroupSettings;
 export const saveGroupSettings = store.saveGroupSettings;
 export const getAllGroupSettings = store.getAllGroupSettings;
+export const upsertGroupDirectory = store.upsertGroupDirectory;
+export const getGroupDirectory = store.getGroupDirectory;
+export const getAllGroupDirectory = store.getAllGroupDirectory;
+export const clearWhatsAppDirectory = store.clearWhatsAppDirectory;
+export const isPairedSession = store.isPairedSession;
+export const resolveUserPhone = store.resolveUserPhone;
+export const describePeer = store.describePeer;
 
 // ===== Warnings =====
 export const getUserWarnings = store.getUserWarnings;
@@ -91,4 +98,8 @@ export const saveSchedule = store.saveSchedule;
 export const setScheduleStatus = store.setScheduleStatus;
 export const setScheduleDelivery = store.setScheduleDelivery;
 export const deleteSchedule = store.deleteSchedule;
+export const pauseAllSchedules = store.pauseAllSchedules;
 export const countSchedules = store.countSchedules;
+
+// ===== AI conversation history =====
+export const deleteAllChatHistories = store.deleteAllChatHistories;

package/src/utils/textDecode.cjs

@@ -69,12 +69,8 @@ function decodeHtmlEntities(text) {
 function decodeEscapes(text) {
   if (!text || typeof text !== "string" || !text.includes("\\")) return text;
   return text
-    .replace(/\\u([0-9a-f]{4})/gi, (match, hex) =>
-      String.fromCharCode(parseInt(hex, 16))
-    )
-    .replace(/\\x([0-9a-f]{2})/gi, (match, hex) =>
-      String.fromCharCode(parseInt(hex, 16))
-    )
+    .replace(/\\u([0-9a-f]{4})/gi, (match, hex) => String.fromCharCode(parseInt(hex, 16)))
+    .replace(/\\x([0-9a-f]{2})/gi, (match, hex) => String.fromCharCode(parseInt(hex, 16)))
     .replace(/\\n/g, "\n")
     .replace(/\\t/g, "\t")
     .replace(/\\r/g, "")
@@ -87,8 +83,7 @@ function decodeEscapes(text) {
 // The tell-tale pair that appears when UTF-8 bytes are decoded as latin1: a
 // lead byte (0xC2-0xDF) followed by a continuation byte that landed in the
 // latin1 supplement or the cp1252 punctuation block.
-const MOJIBAKE_HINT =
-  /[Â-ß][€-¿–—‘-„†-•…‰‹›€™ŒœŠšŸŽžƒˆ˜]/;
+const MOJIBAKE_HINT = /[Â-ß][€-¿–—‘-„†-•…‰‹›€™ŒœŠšŸŽžƒˆ˜]/;
 
 function textScore(text) {
   let score = 0;
@@ -179,7 +174,7 @@ function stripHtml(html) {
       .replace(/<!--[\s\S]*?-->/g, " ")
       .replace(/<\/(p|div|li|tr|h[1-6]|br)>/gi, "\n")
       .replace(/<br\s*\/?>/gi, "\n")
-      .replace(/<[^>]+>/g, " ")
+      .replace(/<[^>]+>/g, " "),
   )
     .replace(NOISE_SPACE, " ")
     .replace(/\n{3,}/g, "\n\n")

package/src/utils/thumbnail.cjs

@@ -105,7 +105,7 @@ function warnMissingFfmpeg(reason) {
     { ffmpeg: ffmpegBin(), reason },
     "[thumbnail] ffmpeg isn't runnable — video previews are off and images " +
       "fall back to raw-JPEG previews. Reinstall `ffmpeg-static`, or point " +
-      "Settings -> Media -> ffmpeg path at a working binary."
+      "Settings -> Media -> ffmpeg path at a working binary.",
   );
 }
 
@@ -216,9 +216,7 @@ function parseProbe(stderr = "") {
     hasAudio: /Stream #\d+:\d+[^\n]*?: Audio:/.test(stderr),
   };
 
-  const dimensions = stderr.match(
-    /Stream #\d+:\d+[^\n]*?: Video:[^\n]*?[,\s](\d{2,5})x(\d{2,5})/
-  );
+  const dimensions = stderr.match(/Stream #\d+:\d+[^\n]*?: Video:[^\n]*?[,\s](\d{2,5})x(\d{2,5})/);
   if (dimensions) {
     info.width = Number(dimensions[1]) || 0;
     info.height = Number(dimensions[2]) || 0;
@@ -226,10 +224,7 @@ function parseProbe(stderr = "") {
 
   const duration = stderr.match(/Duration:\s*(\d+):(\d{2}):(\d{2}(?:\.\d+)?)/);
   if (duration) {
-    const seconds =
-      Number(duration[1]) * 3600 +
-      Number(duration[2]) * 60 +
-      Number(duration[3]);
+    const seconds = Number(duration[1]) * 3600 + Number(duration[2]) * 60 + Number(duration[3]);
     // Round, but never down to 0 — a sub-second clip still has a duration.
     if (Number.isFinite(seconds) && seconds > 0) {
       info.seconds = Math.max(1, Math.round(seconds));
@@ -270,7 +265,7 @@ async function generateThumbnail(filePath, kind) {
 
     // For video, seek a second in — frame 0 of a lot of clips is a black fade.
     let result = await runFfmpeg(
-      kind === "video" ? ["-y", "-ss", "1", ...encodeArgs] : ["-y", ...encodeArgs]
+      kind === "video" ? ["-y", "-ss", "1", ...encodeArgs] : ["-y", ...encodeArgs],
     );
 
     if (kind === "video" && (!result.ok || !sizeOf(target))) {
@@ -322,8 +317,7 @@ function jpegMeta(buffer) {
     if (marker === 0xd9 || marker === 0xda) break; // end of header / start of scan
     const length = buffer.readUInt16BE(offset + 2);
     // SOF0..SOF15, minus the DHT/JPG/DAC markers that share the range
-    const isFrameHeader =
-      marker >= 0xc0 && marker <= 0xcf && ![0xc4, 0xc8, 0xcc].includes(marker);
+    const isFrameHeader = marker >= 0xc0 && marker <= 0xcf && ![0xc4, 0xc8, 0xcc].includes(marker);
     if (isFrameHeader) {
       return {
         format: "jpeg",
@@ -478,7 +472,7 @@ async function resolveSource(media, kind) {
     } catch (err) {
       logger.debug(
         { err: err?.message, url },
-        "[thumbnail] remote source could not be fetched for a preview"
+        "[thumbnail] remote source could not be fetched for a preview",
       );
       return null;
     }
@@ -549,7 +543,7 @@ async function withMediaThumbnail(content) {
         thumbnail = fs.readFileSync(source.file);
         logger.debug(
           { bytes: thumbnail.length },
-          "[thumbnail] reusing the image itself as its preview"
+          "[thumbnail] reusing the image itself as its preview",
         );
       }
     }
@@ -585,7 +579,7 @@ async function withMediaThumbnail(content) {
   } catch (err) {
     logger.debug(
       { err: err?.message, kind, field },
-      "[thumbnail] could not build a preview — sending without one"
+      "[thumbnail] could not build a preview — sending without one",
     );
     return content;
   } finally {

package/src/utils/typing.esm.js

@@ -1,8 +1,8 @@
 // Typing simulation utility
-import { createRequire } from 'module';
+import { createRequire } from "module";
 
 const require = createRequire(import.meta.url);
-const logger = require('./logger.cjs');
+const logger = require("./logger.cjs");
 
 /**
  * Simulates typing with a random delay between 300-500ms
@@ -15,16 +15,16 @@ const logger = require('./logger.cjs');
 export async function simulateTyping(sock, jid, minDelay = 300, maxDelay = 500) {
   try {
     // Send typing indicator
-    await sock.sendPresenceUpdate('composing', jid);
+    await sock.sendPresenceUpdate("composing", jid);
 
     // Random delay between min and max
     const delay = Math.floor(Math.random() * (maxDelay - minDelay + 1)) + minDelay;
-    await new Promise(resolve => setTimeout(resolve, delay));
+    await new Promise((resolve) => setTimeout(resolve, delay));
 
     // Stop typing indicator
-    await sock.sendPresenceUpdate('paused', jid);
+    await sock.sendPresenceUpdate("paused", jid);
   } catch (error) {
-    logger.error({ err: error }, '[Typing] Error simulating typing');
+    logger.error({ err: error }, "[Typing] Error simulating typing");
   }
 }
 
@@ -45,7 +45,7 @@ export async function sendMessageWithTyping(sock, jid, message, withTyping = tru
     const sent = await sock.sendMessage(jid, message);
     return sent;
   } catch (error) {
-    logger.error({ err: error }, '[Typing] Error sending message with typing');
+    logger.error({ err: error }, "[Typing] Error sending message with typing");
     throw error;
   }
 }
@@ -74,22 +74,22 @@ export function calculateTypingDelay(text, charsPerSecond = 40) {
  */
 export async function sendMessageWithRealisticTyping(sock, jid, message) {
   try {
-    const text = message.text || message.caption || '';
+    const text = message.text || message.caption || "";
     const delay = calculateTypingDelay(text);
 
     // Send typing indicator
-    await sock.sendPresenceUpdate('composing', jid);
+    await sock.sendPresenceUpdate("composing", jid);
 
     // Wait for calculated delay
-    await new Promise(resolve => setTimeout(resolve, delay));
+    await new Promise((resolve) => setTimeout(resolve, delay));
 
     // Stop typing and send message
-    await sock.sendPresenceUpdate('paused', jid);
+    await sock.sendPresenceUpdate("paused", jid);
     const sent = await sock.sendMessage(jid, message);
 
     return sent;
   } catch (error) {
-    logger.error({ err: error }, '[Typing] Error sending message with realistic typing');
+    logger.error({ err: error }, "[Typing] Error sending message with realistic typing");
     throw error;
   }
 }

package/views/dashboard.ejs

@@ -29,108 +29,80 @@
 
         <nav class="nav" aria-label="Primary navigation">
           <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 viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <rect width="7" height="7" x="3" y="3" rx="1" />
+              <rect width="7" height="7" x="14" y="3" rx="1" />
+              <rect width="7" height="7" x="14" y="14" rx="1" />
+              <rect width="7" height="7" x="3" y="14" rx="1" />
             </svg>
-            Overview
+            <span data-i18n="overview">Overview</span>
           </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 viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M4.9 19.1C1 15.2 1 8.8 4.9 4.9" />
+              <path d="M7.8 16.2c-2.3-2.3-2.3-6.1 0-8.5" />
+              <circle cx="12" cy="12" r="2" />
+              <path d="M16.2 7.8c2.3 2.3 2.3 6.1 0 8.5" />
+              <path d="M19.1 4.9C23 8.8 23 15.1 19.1 19" />
             </svg>
-            Connection
+            <span data-i18n="connection">Connection</span>
           </a>
 
-          <div class="nav-label">Control</div>
+          <div class="nav-label" data-i18n="control">Control</div>
           <a href="#commands" data-view="commands">
-            <svg
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="2"
-            >
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
               <polyline points="4 17 10 11 4 5" />
               <line x1="12" y1="19" x2="20" y2="19" />
             </svg>
-            Commands
+            <span data-i18n="commands">Commands</span>
           </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 viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M12 8V4H8" />
+              <rect width="16" height="12" x="4" y="8" rx="2" />
+              <path d="M2 14h2" />
+              <path d="M20 14h2" />
+              <path d="M15 13v2" />
+              <path d="M9 13v2" />
             </svg>
-            AI &amp; memory
+            <span data-i18n="ai">AI &amp; memory</span>
           </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 viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
+              <circle cx="9" cy="7" r="4" />
+              <path d="M22 21v-2a4 4 0 0 0-3-3.87" />
+              <path d="M16 3.13a4 4 0 0 1 0 7.75" />
             </svg>
-            Groups
+            <span data-i18n="groups">Groups</span>
           </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 viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" />
             </svg>
-            Roles
+            <span data-i18n="roles">Roles</span>
           </a>
 
-          <div class="nav-label">Data</div>
+          <div class="nav-label" data-i18n="data_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 viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" />
             </svg>
-            Tables
+            <span data-i18n="data">Tables</span>
           </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 viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <line x1="4" x2="4" y1="21" y2="14" />
+              <line x1="4" x2="4" y1="10" y2="3" />
+              <line x1="12" x2="12" y1="21" y2="12" />
+              <line x1="12" x2="12" y1="8" y2="3" />
+              <line x1="20" x2="20" y1="21" y2="16" />
+              <line x1="20" x2="20" y1="12" y2="3" />
+              <line x1="1" x2="7" y1="14" y2="14" />
+              <line x1="9" x2="15" y1="8" y2="8" />
+              <line x1="17" x2="23" y1="16" y2="16" />
             </svg>
-            Settings
+            <span data-i18n="settings">Settings</span>
           </a>
         </nav>
 
@@ -218,6 +190,20 @@
                   />
                 </svg>
               </button>
+              <button
+                class="btn btn-icon lang-btn"
+                id="lang-btn"
+                type="button"
+                aria-label="Switch language"
+                title="Switch language / تغيير اللغة"
+              >
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+                  <circle cx="12" cy="12" r="10" />
+                  <line x1="2" y1="12" x2="22" y2="12" />
+                  <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" />
+                </svg>
+                <span class="lang-tag" id="lang-tag">AR</span>
+              </button>
             </div>
             <form action="/logout" method="post" class="logout-form">
               <button type="submit" class="btn btn-sm logout-btn">
@@ -693,45 +679,87 @@
           <!-- Settings ---------------------------------------------------->
           <section class="view" id="view-settings">
             <div class="section-head">
-              <span class="eyebrow">Workspace</span>
-              <h2>Settings</h2>
-              <p>
+              <span class="eyebrow" data-i18n="workspace">Workspace</span>
+              <h2 data-i18n="settings">Settings</h2>
+              <p data-i18n="settings_sub">
                 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 security-card">
-              <div class="card-head"><h2>Control panel password</h2></div>
-              <div class="password-grid">
-                <label class="field">
-                  <span>Current password</span>
-                  <input
-                    type="password"
-                    id="pw-current"
-                    autocomplete="current-password"
-                  />
-                </label>
-                <label class="field">
-                  <span>New password</span>
-                  <input
-                    type="password"
-                    id="pw-next"
-                    autocomplete="new-password"
-                  />
-                </label>
-                <button class="btn btn-primary" id="pw-save" type="button">
-                  Change password
-                </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.
+            <!-- Settings Category Navigation -->
+            <div class="settings-nav-tabs" role="tablist" id="settings-nav-tabs">
+              <button class="settings-tab active" data-tab="ai" type="button" role="tab" aria-selected="true">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 8V4H8"/><rect width="16" height="12" x="4" y="8" rx="2"/><path d="M2 14h2"/><path d="M20 14h2"/><path d="M15 13v2"/><path d="M9 13v2"/></svg>
+                <span data-i18n="settings_tab_ai">AI Assistant</span>
+              </button>
+              <button class="settings-tab" data-tab="general" type="button" role="tab" aria-selected="false">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="4" x2="4" y1="21" y2="14"/><line x1="4" x2="4" y1="10" y2="3"/><line x1="12" x2="12" y1="21" y2="12"/><line x1="12" x2="12" y1="8" y2="3"/><line x1="20" x2="20" y1="21" y2="16"/><line x1="20" x2="20" y1="12" y2="3"/><line x1="1" x2="7" y1="14" y2="14"/><line x1="9" x2="15" y1="8" y2="8"/><line x1="17" x2="23" y1="16" y2="16"/></svg>
+                <span data-i18n="settings_tab_general">General</span>
+              </button>
+              <button class="settings-tab" data-tab="security" type="button" role="tab" aria-selected="false">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/></svg>
+                <span data-i18n="settings_tab_security">Security</span>
+              </button>
+              <button class="settings-tab" data-tab="whatsapp" type="button" role="tab" aria-selected="false">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"/><path d="M2 12h20"/></svg>
+                <span data-i18n="settings_tab_whatsapp">WhatsApp Proxy</span>
+              </button>
+              <button class="settings-tab" data-tab="media" type="button" role="tab" aria-selected="false">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="22" x2="2" y1="12" y2="12"/><path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/><line x1="6" x2="6.01" y1="16" y2="16"/><line x1="10" x2="10.01" y1="16" y2="16"/></svg>
+                <span data-i18n="settings_tab_media">Media & Storage</span>
+              </button>
+            </div>
+
+            <div id="settings-tab-security" class="settings-tab-content" style="display: none;">
+              <div class="card security-card">
+                <div class="card-head"><h2 data-i18n="pw_heading">Control panel password</h2></div>
+                <div class="password-grid">
+                  <label class="field">
+                    <span data-i18n="pw_current">Current password</span>
+                    <input
+                      type="password"
+                      id="pw-current"
+                      autocomplete="current-password"
+                    />
+                  </label>
+                  <label class="field">
+                    <span data-i18n="pw_next">New password</span>
+                    <input
+                      type="password"
+                      id="pw-next"
+                      autocomplete="new-password"
+                    />
+                  </label>
+                  <button class="btn btn-primary" id="pw-save" type="button" data-i18n="pw_change_btn">
+                    Change password
+                  </button>
+                </div>
+                <div class="hint" data-i18n="pw_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>
 
             <div id="settings-list"><div class="loading">Loading…</div></div>
+
+            <!-- Advanced AI Settings Modal -->
+            <div class="modal-backdrop" id="ai-advanced-modal" style="display: none;">
+              <div class="modal-card">
+                <div class="modal-head">
+                  <h2 data-i18n="ai_advanced_title">Advanced AI Settings</h2>
+                  <button class="btn btn-icon modal-close" id="ai-advanced-close" type="button" aria-label="Close">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6L6 18M6 6l12 12"/></svg>
+                  </button>
+                </div>
+                <div class="modal-body" id="ai-advanced-fields"></div>
+                <div class="modal-foot">
+                  <button class="btn btn-primary" id="ai-advanced-done" type="button" data-i18n="done">Done</button>
+                </div>
+              </div>
+            </div>
           </section>
         </main>
       </div>