.

another_prompt

@@ -53,3 +53,8 @@ L'administrateur lui, qand il demande les modèles dams le ollama, lui, force un
 --- ADMIN CENTER: SMTP CONNECTIVITY.
 
 Make a SMTP tester in the admin center, and also a viewer of the smtp credentials (default bluring the smtp pasword OBVIOUSLY) And also a SMTP tester , sending a mail to a provided one , to tets the SMTP connectivity
+
+
+--- ARCHIVED FEATURES:
+a way to archive conversaitons with the contetxual menue.
+When conversations are archived. it's impossible to write in . only read-only. also, when conversations are archived, they are not anymore visible in the conversations side list. They are still unarchivable and checkable, in a new sub-category options into the settigns modal : "Archiveds Chats"

frontend/src/components/AdminCenter.tsx

@@ -1,9 +1,9 @@
 import { useEffect, useState } from "react";
-import { ArrowLeft, Inbox, LayoutDashboard, Mail, ShieldAlert, SlidersHorizontal, Users } from "lucide-react";
+import { ArrowLeft, Eye, EyeOff, Inbox, LayoutDashboard, Mail, Send, ShieldAlert, SlidersHorizontal, Users } from "lucide-react";
 import { api } from "../lib/api.ts";
 import { AdminPanel } from "./AdminPanel.tsx";
 import { AccessRequestsPanel } from "./AccessRequests.tsx";
-import { FlowerMark, LoadingScreen, Spinner, Switch } from "./ui.tsx";
+import { Button, CopyButton, FlowerMark, Input, LoadingScreen, Spinner, Switch } from "./ui.tsx";
 import { cn } from "../lib/cn.ts";
 
 type Tab = "accounts" | "access" | "features" | "mail";
@@ -26,7 +26,6 @@ export function AdminCenter() {
   const [allowed, setAllowed] = useState<boolean | null>(null);
   const [tab, setTab] = useState<Tab>("accounts");
   const [settings, setSettings] = useState<{ registrationEnabled: boolean; accessRequestEnabled: boolean; ocrEnabled: boolean } | null>(null);
-  const [mail, setMail] = useState<{ recovery: boolean; from?: string } | null>(null);
   const [error, setError] = useState("");
   const [saving, setSaving] = useState(false);
 
@@ -40,7 +39,6 @@ export function AdminCenter() {
         setAllowed(true);
         applyTheme(r.user.theme);
         api.adminGetSettings().then((s) => setSettings(s.settings)).catch((e) => setError(e instanceof Error ? e.message : "Load failed"));
-        api.methods().then((m) => setMail(m)).catch(() => {});
       })
       .catch(() => setAllowed(false));
   }, []);
@@ -164,32 +162,170 @@ export function AdminCenter() {
           </section>
         )}
 
-        {tab === "mail" && (
+        {tab === "mail" && <MailPanel />}
-          <section className="rounded-3xl border border-stone-200/70 bg-white p-5 shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
-            <div className="flex items-center gap-3">
-              <span className="grid h-10 w-10 place-items-center rounded-full bg-accent-600/10 text-accent-600 dark:text-accent-400">
-                <Mail size={17} />
-              </span>
-              <div>
-                <p className="text-sm font-medium">Key recovery emails</p>
-                <p className="text-sm opacity-60">
-                  {mail == null ? "Checking…" : mail.recovery ? `Enabled — sent from ${mail.from ?? "the configured sender"}` : "Disabled — set SMTP_HOST on the server to enable"}
-                </p>
-              </div>
-              <span className={cn(
-                "ml-auto rounded-full px-3 py-1 text-xs font-medium",
-                mail?.recovery ? "bg-emerald-600/10 text-emerald-700 dark:text-emerald-400" : "bg-stone-200/70 dark:bg-zinc-800",
-              )}>
-                {mail?.recovery ? "On" : "Off"}
-              </span>
-            </div>
-            <p className="mt-3 text-sm opacity-60">
-              SMTP credentials live in the server environment (see <code>docs/OPERATIONS.md</code>), never in this UI.
-              Users set their recovery address in profile settings or at account creation.
-            </p>
-          </section>
-        )}
       </main>
     </div>
   );
 }
+
+type SmtpInfo = {
+  enabled: boolean;
+  host: string;
+  port: number;
+  secure: boolean;
+  user: string;
+  pass: string;
+  hasPass: boolean;
+  from: string;
+  appUrl: string;
+};
+
+function MailPanel() {
+  const [smtp, setSmtp] = useState<SmtpInfo | null>(null);
+  const [error, setError] = useState("");
+  const [showPass, setShowPass] = useState(false);
+  const [to, setTo] = useState("");
+  const [verifying, setVerifying] = useState(false);
+  const [sending, setSending] = useState(false);
+  const [result, setResult] = useState<{ ok: boolean; text: string } | null>(null);
+
+  useEffect(() => {
+    api.adminMailStatus().then((r) => setSmtp(r.smtp)).catch((e) => setError(e instanceof Error ? e.message : "Load failed"));
+  }, []);
+
+  async function verify() {
+    setVerifying(true);
+    setResult(null);
+    try {
+      await api.adminMailVerify();
+      setResult({ ok: true, text: "Connection OK — SMTP host reachable, auth accepted." });
+    } catch (e) {
+      setResult({ ok: false, text: e instanceof Error ? e.message : "Verification failed" });
+    } finally {
+      setVerifying(false);
+    }
+  }
+
+  async function sendTest() {
+    setSending(true);
+    setResult(null);
+    try {
+      const r = await api.adminMailTest(to.trim());
+      setResult({ ok: true, text: `Test mail sent to ${to.trim()}${r.messageId ? ` (${r.messageId})` : ""}.` });
+    } catch (e) {
+      setResult({ ok: false, text: e instanceof Error ? e.message : "Send failed" });
+    } finally {
+      setSending(false);
+    }
+  }
+
+  function Row({ label, children }: { label: string; children: React.ReactNode }) {
+    return (
+      <div className="flex items-center gap-3 py-2">
+        <span className="w-24 shrink-0 text-xs font-medium uppercase tracking-wider opacity-50">{label}</span>
+        <span className="min-w-0 flex-1 truncate text-sm">{children}</span>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      <section className="rounded-3xl border border-stone-200/70 bg-white p-5 shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
+        <div className="flex items-center gap-3">
+          <span className="grid h-10 w-10 place-items-center rounded-full bg-accent-600/10 text-accent-600 dark:text-accent-400">
+            <Mail size={17} />
+          </span>
+          <div>
+            <p className="text-sm font-medium">Key recovery emails</p>
+            <p className="text-sm opacity-60">
+              {smtp == null ? "Checking…" : smtp.enabled ? `Enabled — sent from ${smtp.from}` : "Disabled — set SMTP_HOST on the server to enable"}
+            </p>
+          </div>
+          <span className={cn(
+            "ml-auto rounded-full px-3 py-1 text-xs font-medium",
+            smtp?.enabled ? "bg-emerald-600/10 text-emerald-700 dark:text-emerald-400" : "bg-stone-200/70 dark:bg-zinc-800",
+          )}>
+            {smtp?.enabled ? "On" : "Off"}
+          </span>
+        </div>
+        {error && <p className="mt-3 text-sm text-red-600 dark:text-red-400" role="alert">{error}</p>}
+        {!smtp && !error && <p className="mt-3 flex items-center gap-2 text-sm opacity-60"><Spinner size={14} /> Loading…</p>}
+        {smtp && (
+          <div className="mt-3 divide-y divide-stone-200/70 rounded-2xl border border-stone-200/70 px-4 dark:divide-zinc-800 dark:border-zinc-800">
+            <Row label="Host">{smtp.host || <span className="opacity-50">(not set)</span>}</Row>
+            <Row label="Port">{smtp.port} · {smtp.secure ? "implicit TLS (465)" : "STARTTLS (587)"}</Row>
+            <Row label="User">{smtp.user || <span className="opacity-50">(no auth)</span>}</Row>
+            <Row label="Password">
+              <span className="flex items-center gap-2">
+                {!smtp.hasPass ? (
+                  <span className="opacity-50">(not set)</span>
+                ) : showPass ? (
+                  <code className="truncate font-mono">{smtp.pass}</code>
+                ) : (
+                  <code className="select-none blur-sm" aria-label="hidden password">••••••••••</code>
+                )}
+                {smtp.hasPass && (
+                  <>
+                    <button
+                      type="button"
+                      onClick={() => setShowPass((v) => !v)}
+                      aria-label={showPass ? "Hide SMTP password" : "Show SMTP password"}
+                      className="rounded-full p-1.5 transition hover:bg-stone-200/60 dark:hover:bg-zinc-800"
+                    >
+                      {showPass ? <EyeOff size={15} /> : <Eye size={15} />}
+                    </button>
+                    {showPass && <CopyButton text={smtp.pass} />}
+                  </>
+                )}
+              </span>
+            </Row>
+            <Row label="From"><span className="truncate">{smtp.from}</span></Row>
+            <Row label="App URL"><span className="truncate">{smtp.appUrl}</span></Row>
+          </div>
+        )}
+        <p className="mt-3 text-sm opacity-60">
+          Credentials live in the server environment (see <code>docs/OPERATIONS.md</code>), read-only here.
+          Users set their recovery address in profile settings or at account creation.
+        </p>
+      </section>
+
+      <section className="rounded-3xl border border-stone-200/70 bg-white p-5 shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
+        <p className="text-sm font-medium">Connectivity test</p>
+        <p className="mt-0.5 text-sm opacity-60">Verify the connection, then send a real test mail to an address you control.</p>
+        <div className="mt-3 flex flex-wrap items-center gap-2">
+          <Button variant="secondary" size="sm" onClick={verify} disabled={verifying || !smtp?.enabled}>
+            {verifying ? <Spinner size={14} /> : null}
+            {verifying ? "Verifying…" : "Verify connection"}
+          </Button>
+        </div>
+        <div className="mt-3 flex flex-col gap-2 sm:flex-row">
+          <Input
+            type="email"
+            placeholder="[email protected]"
+            aria-label="Test recipient email"
+            value={to}
+            onChange={(e) => setTo(e.target.value)}
+            className="flex-1"
+          />
+          <Button size="sm" onClick={sendTest} disabled={sending || !smtp?.enabled || !/^[^\s@]{1,64}@[^\s@]{1,253}\.[^\s@]{2,}$/.test(to.trim())}>
+            {sending ? <Spinner size={14} /> : <Send size={14} />}
+            {sending ? "Sending…" : "Send test mail"}
+          </Button>
+        </div>
+        {result && (
+          <p
+            role={result.ok ? "status" : "alert"}
+            className={cn(
+              "mt-3 rounded-2xl px-4 py-2.5 text-sm",
+              result.ok
+                ? "bg-emerald-600/10 text-emerald-700 dark:text-emerald-400"
+                : "bg-red-500/10 text-red-600 dark:text-red-400",
+            )}
+          >
+            {result.text}
+          </p>
+        )}
+      </section>
+    </div>
+  );
+}

frontend/src/components/dialogs.tsx

@@ -517,8 +517,8 @@ export function SettingsModal({
                   {uploading ? <Spinner size={17} /> : <ImagePlus size={17} />}
                 </span>
                 <span className="min-w-0 flex-1 text-sm">
-                  <span className="block font-medium">{uploading ? "Uploading…" : dragOver ? "Drop it!" : "Drop an image or click to upload"}</span>
+                  <span className="block font-medium">{uploading ? t("settings.uploading") : dragOver ? t("settings.dropActive") : t("settings.dropIdle")}</span>
-                  <span className="block text-xs opacity-60">jpg · png · webp — max 5MB — 5 changes per 2h</span>
+                  <span className="block text-xs opacity-60">{t("settings.avatarHint")}</span>
                 </span>
               </div>
               <input
@@ -534,10 +534,10 @@ export function SettingsModal({
               />
               {uploadError && <p className="mt-1.5 text-sm text-red-600 dark:text-red-400">{uploadError}</p>}
             </div>
-            <Field label="Display name">
+            <Field label={t("common.displayName")}>
               <Input value={displayName} onChange={(e) => setDisplayName(e.target.value)} maxLength={60} required />
             </Field>
-            <Field label="Recovery email" hint="Optional. Used only to send you a fresh access key if you lose it.">
+            <Field label={t("settings.email")} hint={t("settings.emailHint")}>
               <Input value={email} onChange={(e) => setEmail(e.target.value)} placeholder="[email protected]" inputMode="email" />
             </Field>
               </SettingsPane>
@@ -545,26 +545,29 @@ export function SettingsModal({
 
             {activeCat === "appearance" && (
               <SettingsPane>
-            <Field label="Theme">
+            <Field label={t("common.theme")}>
               <Picker
-                ariaLabel="Theme"
+                ariaLabel={t("common.theme")}
                 value={theme}
                 onChange={setTheme}
                 align="left"
                 options={[
-                  { value: "auto", label: "Auto (follows system)" },
+                  { value: "auto", label: t("common.themeAutoFull") },
-                  { value: "light", label: "Light" },
+                  { value: "light", label: t("common.light") },
-                  { value: "dark", label: "Dark" },
+                  { value: "dark", label: t("common.dark") },
                 ]}
               />
             </Field>
+            <Field label={t("settings.language")} hint={t("settings.languageHint")}>
+              <LangPicker align="left" />
+            </Field>
             <AccentSection />
               </SettingsPane>
             )}
 
             {activeCat === "features" && (
               <SettingsPane>
-            <p className="-mb-2 text-xs opacity-60">Turn composer capabilities on or off. Applied instantly, saved on this device.</p>
+            <p className="-mb-2 text-xs opacity-60">{t("settings.featHint")}</p>
             <FeaturesSection />
               </SettingsPane>
             )}
@@ -578,13 +581,13 @@ export function SettingsModal({
         </div>
 
         {search.trim() && visibleCats.length === 0 && (
-          <p className="px-2 py-4 text-center text-sm opacity-50">No settings match “{search.trim()}”.</p>
+          <p className="px-2 py-4 text-center text-sm opacity-50">{t("settings.noMatch", { q: search.trim() })}</p>
         )}
 
         {error && <p className="text-sm text-red-600 dark:text-red-400">{error}</p>}
         <div className="flex justify-end gap-2">
-          <Button variant="secondary" size="sm" type="button" onClick={onClose}>Cancel</Button>
+          <Button variant="secondary" size="sm" type="button" onClick={onClose}>{t("common.cancel")}</Button>
-          <Button size="sm" type="submit" disabled={busy}>{busy ? <Spinner size={15} /> : "Save"}</Button>
+          <Button size="sm" type="submit" disabled={busy}>{busy ? <Spinner size={15} /> : t("common.save")}</Button>
         </div>
       </form>
     </Modal>
@@ -606,6 +609,7 @@ function SettingsPane({ children }: { children: React.ReactNode }) {
 /* ---------- Accent color (settings) ---------- */
 
 function AccentSection() {
+  const { t } = useT();
   const [state, setState] = useState<AccentState>(() => currentAccent());
 
   function pick(presetId: string) {
@@ -622,13 +626,15 @@ function AccentSection() {
 
   return (
     <div>
+      <span className="mb-1.5 block text-sm font-medium opacity-80">{t("settings.accent")}</span>
+      <p className="mb-2 text-xs opacity-60">{t("settings.accentHint")}</p>
       <div className="flex flex-wrap items-center gap-2">
         {ACCENT_PRESETS.map((p) => (
           <button
             key={p.id}
             type="button"
-            title={p.label}
+            title={t(`accent.preset.${p.id}` as StringKey)}
-            aria-label={`Accent: ${p.label}`}
+            aria-label={t("settings.accentAria", { label: t(`accent.preset.${p.id}` as StringKey) })}
             onClick={() => pick(p.id)}
             className={cn(
               "h-8 w-8 rounded-full border-2 transition active:scale-90",
@@ -647,12 +653,12 @@ function AccentSection() {
               : "border-transparent hover:scale-110",
           )}
           style={{ background: state.presetId === "custom" ? state.customHex : undefined }}
-          title="Custom color"
+          title={t("settings.customColor")}
         >
           <Sparkles size={14} className={cn("text-white drop-shadow-[0_1px_2px_rgba(0,0,0,0.6)]", state.presetId === "custom" && "opacity-0")} />
           <input
             type="color"
-            aria-label="Custom accent color"
+            aria-label={t("settings.customAria")}
             value={state.presetId === "custom" ? state.customHex : "#10b981"}
             onChange={(e) => pickCustom(e.target.value)}
             onBlur={() => applyAccent(state)} // persist the last previewed value
@@ -667,6 +673,7 @@ function AccentSection() {
 /* ---------- Features (settings) ---------- */
 
 function FeaturesSection() {
+  const { t } = useT();
   const flags = useFeatures();
   return (
     <div>
@@ -682,15 +689,15 @@ function FeaturesSection() {
             <Toggle
               checked={!!flags[f.key]}
               disabled={!f.ready}
-              label={f.label}
+              label={t(`feat.${f.key}.label` as StringKey)}
               onChange={(v) => setFeature(f.key, v)}
             />
             <span className="min-w-0">
               <span className="block text-sm font-medium">
-                {f.label}
+                {t(`feat.${f.key}.label` as StringKey)}
-                {!f.ready && <span className="ml-1.5 text-xs opacity-60">(soon)</span>}
+                {!f.ready && <span className="ml-1.5 text-xs opacity-60">{t("feat.soon")}</span>}
               </span>
-              <span className="block text-xs opacity-60">{f.hint}</span>
+              <span className="block text-xs opacity-60">{t(`feat.${f.key}.hint` as StringKey)}</span>
             </span>
           </label>
         ))}
@@ -702,6 +709,7 @@ function FeaturesSection() {
 /* ---------- Security (settings): key rotation, TOTP, passkeys ---------- */
 
 function SecuritySection({ onKeyRotated }: { onKeyRotated?: () => void }) {
+  const { t } = useT();
   const [totpOn, setTotpOn] = useState<boolean | null>(null);
   const [secret, setSecret] = useState<string | null>(null);
   const [otpauthUrl, setOtpauthUrl] = useState("");
@@ -728,7 +736,7 @@ function SecuritySection({ onKeyRotated }: { onKeyRotated?: () => void }) {
       setRotatedKey(res.key);
       setArmingRotate(false);
     } catch (err) {
-      setError(err instanceof Error ? err.message : "Rotation failed");
+      setError(err instanceof Error ? err.message : t("sec.rotationFailed"));
     } finally {
       setBusy(false);
     }
@@ -743,7 +751,7 @@ function SecuritySection({ onKeyRotated }: { onKeyRotated?: () => void }) {
       setOtpauthUrl(res.otpauthUrl);
       setCode("");
     } catch (err) {
-      setError(err instanceof Error ? err.message : "Setup failed");
+      setError(err instanceof Error ? err.message : t("sec.setupFailed"));
     } finally {
       setBusy(false);
     }
@@ -759,7 +767,7 @@ function SecuritySection({ onKeyRotated }: { onKeyRotated?: () => void }) {
       setSecret(null);
       setCode("");
     } catch (err) {
-      setError(err instanceof Error ? err.message : "Invalid code");
+      setError(err instanceof Error ? err.message : t("login.totpInvalid"));
     } finally {
       setBusy(false);
     }
@@ -774,7 +782,7 @@ function SecuritySection({ onKeyRotated }: { onKeyRotated?: () => void }) {
       setTotpOn(false);
       setCode("");
     } catch (err) {
-      setError(err instanceof Error ? err.message : "Invalid code");
+      setError(err instanceof Error ? err.message : t("login.totpInvalid"));
     } finally {
       setBusy(false);
     }
@@ -788,7 +796,7 @@ function SecuritySection({ onKeyRotated }: { onKeyRotated?: () => void }) {
       setConfirmDelete(false);
       onKeyRotated?.();
     } catch (err) {
-      setError(err instanceof Error ? err.message : "Delete failed");
+      setError(err instanceof Error ? err.message : t("sec.deleteFailed"));
     } finally {
       setBusy(false);
     }

frontend/src/lib/api.ts

@@ -121,6 +121,13 @@ export const api = {
   adminPatchSettings: (patch: { registrationEnabled?: boolean; accessRequestEnabled?: boolean; ocrEnabled?: boolean }) =>
     req<{ settings: { registrationEnabled: boolean; accessRequestEnabled: boolean; ocrEnabled: boolean } }>("/api/admin/settings", { method: "PATCH", body: JSON.stringify(patch) }),
 
+  /** Admin: SMTP credentials viewer (password included, blur it by default) + connectivity. */
+  adminMailStatus: () =>
+    req<{ smtp: { enabled: boolean; host: string; port: number; secure: boolean; user: string; pass: string; hasPass: boolean; from: string; appUrl: string } }>("/api/admin/mail"),
+  adminMailVerify: () => req<{ ok: boolean }>("/api/admin/mail/verify", { method: "POST", body: JSON.stringify({}) }),
+  adminMailTest: (to: string) =>
+    req<{ ok: boolean; messageId: string }>("/api/admin/mail/test", { method: "POST", body: JSON.stringify({ to }) }),
+
   convs: () => req<{ conversations: Conversation[] }>("/api/conversations"),
   /** Search your old chats (titles, topics and message content). */
   searchConvs: (q: string) =>

src/index.ts

@@ -876,6 +876,42 @@ const server = Bun.serve({
         return json({ error: "not found" }, 404);
       }
 
+      // --- admin: SMTP connectivity (viewer + tester) ---
+      if (path === "/api/admin/mail" && req.method === "GET") {
+        if (!admin) return json({ error: "forbidden" }, 403);
+        return json({ smtp: smtpStatus() });
+      }
+
+      if (path === "/api/admin/mail/verify" && req.method === "POST") {
+        if (!admin) return json({ error: "forbidden" }, 403);
+        try {
+          await verifySmtp();
+          return json({ ok: true });
+        } catch (e) {
+          return json({ error: (e as Error).message }, 502);
+        }
+      }
+
+      if (path === "/api/admin/mail/test" && req.method === "POST") {
+        if (!admin) return json({ error: "forbidden" }, 403);
+        const ip = clientIp(req, server);
+        if (isRateLimited(ip)) return json({ error: "too many attempts, try again later" }, 429);
+        const { ok, body } = await readJson(req);
+        const to = ok ? validEmail(body.to) : null;
+        if (!to) {
+          recordAttempt(ip);
+          return json({ error: "to: valid email address required" }, 400);
+        }
+        try {
+          const messageId = await sendSmtpTestMail(to);
+          clearAttempts(ip);
+          return json({ ok: true, messageId });
+        } catch (e) {
+          recordAttempt(ip);
+          return json({ error: (e as Error).message }, 502);
+        }
+      }
+
       // --- conversations (server-persisted, per account) ---
       if (path === "/api/conversations" && req.method === "GET") {
         return json({ conversations: listConversations(user.id) });