From 59402b250c44134ad4ece30920095b912d130f36 Mon Sep 17 00:00:00 2001
From: Anais Saraiva <anais.saraiva@ihorizon.org>
Date: Mon, 21 Sep 2026 13:05:25 +0200
Subject: [PATCH] update

---
 anoying_promt                          |  11 ++
 frontend/src/App.tsx                   |   8 +-
 frontend/src/components/AdminPanel.tsx |   2 +-
 frontend/src/components/Chat.tsx       |  32 ++--
 frontend/src/components/Login.tsx      |   6 +-
 frontend/src/components/ResetPage.tsx  |   4 +-
 frontend/src/components/SharePage.tsx  |   2 +-
 frontend/src/components/Sidebar.tsx    |   2 +-
 frontend/src/components/dialogs.tsx    | 211 ++++++++++++++++++++++++-
 frontend/src/components/ui.tsx         | 117 ++++++++++++--
 frontend/src/index.css                 |  19 ++-
 frontend/src/lib/accent.ts             | 117 ++++++++++++++
 frontend/src/lib/api.ts                |   8 +-
 frontend/src/lib/features.ts           |  80 ++++++++++
 frontend/tailwind.config.js            |  16 ++
 src/db.ts                              |  28 ++++
 src/index.ts                           | 195 ++++++++++++++++++++++-
 src/tools/ocr.ts                       |  10 +-
 18 files changed, 818 insertions(+), 50 deletions(-)
 create mode 100644 anoying_promt
 create mode 100644 frontend/src/lib/accent.ts
 create mode 100644 frontend/src/lib/features.ts

diff --git a/anoying_promt b/anoying_promt
new file mode 100644
index 0000000..a492c49
--- /dev/null
+++ b/anoying_promt
@@ -0,0 +1,11 @@
+---- HIGH PRIORITY
+
+Loading screen with animation instead of just : "Loading..."
+Like a flower that "loading" like circle animation, or beautiful disapearing/appearing animation
+or even a beautiful flower in svgs that got built block by block
+or something original but in the actual theme and Adapative to phone
+
+--- Settings modal.
+make a better settings overview,with larger modal in screen . with categories, section for searching
+
+--- UPLOAD URL FOR PFP MUST BE A READ ONLY IN USER . NOW CAUSE OF THE OWN CDN. USER SHOULDNT SEE THAT VALUE /EDIT IT ANYMORe.
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index df22315..11d040a 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useState } from "react";
 import { api, clearToken, getToken } from "./lib/api.ts";
+import { featureEnabled, THINKING_SYSTEM_PROMPT } from "./lib/features.ts";
 import type { Attachment, ChatMessage, Conversation, DriverModel, FilePreview, User } from "./lib/types.ts";
 import { Login } from "./components/Login.tsx";
 import { Sidebar } from "./components/Sidebar.tsx";
@@ -175,7 +176,12 @@ export function App() {
     setStreaming("");
     let full = "";
     try {
-      await api.chatStream({ model, messages: history, conversationId: convId! }, (t) => {
+      // "Thinking" feature flag: decorate the outgoing payload only — the
+      // system message is never shown nor persisted client-side.
+      const outMessages = featureEnabled("thinking")
+        ? [{ role: "system", content: THINKING_SYSTEM_PROMPT } as ChatMessage, ...history]
+        : history;
+      await api.chatStream({ model, messages: outMessages, conversationId: convId! }, (t) => {
         full += t;
         setStreaming(full);
       });
diff --git a/frontend/src/components/AdminPanel.tsx b/frontend/src/components/AdminPanel.tsx
index b63f5b4..465cc95 100644
--- a/frontend/src/components/AdminPanel.tsx
+++ b/frontend/src/components/AdminPanel.tsx
@@ -84,7 +84,7 @@ export function AdminPanel({ open, onClose }: { open: boolean; onClose: () => vo
         {error && <p className="mb-3 rounded-2xl bg-red-50 px-4 py-2.5 text-sm text-red-600 dark:bg-red-950/40 dark:text-red-400">{error}</p>}
 
         {freshKey && (
-          <div className="mb-4 rounded-2xl border border-emerald-500/40 bg-emerald-50 p-4 dark:bg-emerald-950/30">
+          <div className="mb-4 rounded-2xl border border-accent-500/40 bg-accent-50 p-4 dark:bg-accent-950/30">
             <p className="mb-2 flex items-center gap-2 text-sm font-medium"><KeyRound size={15} /> Key for @{freshKey.username} — shown once, copy it now:</p>
             <div className="flex items-center gap-2">
               <code className="min-w-0 flex-1 truncate rounded-xl bg-white px-3 py-2 text-sm dark:bg-zinc-900">{freshKey.key}</code>
diff --git a/frontend/src/components/Chat.tsx b/frontend/src/components/Chat.tsx
index d6303f3..d555e31 100644
--- a/frontend/src/components/Chat.tsx
+++ b/frontend/src/components/Chat.tsx
@@ -4,6 +4,7 @@ import type { Attachment, ChatMessage, Conversation, DriverModel, User } from ".
 import { Avatar, IconButton, LOGO_URL, Logo, Picker, type PickerGroup, Spinner } from "./ui.tsx";
 import { Markdown } from "./Markdown.tsx";
 import { cn } from "../lib/cn.ts";
+import { useFeatures } from "../lib/features.ts";
 
 function MessageBubble({ msg, authorAvatar, authorName }: { msg: ChatMessage; authorAvatar?: string; authorName: string }) {
   const isUser = msg.role === "user";
@@ -16,7 +17,7 @@ function MessageBubble({ msg, authorAvatar, authorName }: { msg: ChatMessage; au
           {isUser ? "You" : "KisAssistant"}
         </div>
         {isUser ? (
-          <div className="whitespace-pre-wrap rounded-3xl rounded-tr-lg bg-emerald-600 px-4 py-2.5 text-[15px] text-white dark:bg-emerald-500 dark:text-zinc-950">
+          <div className="whitespace-pre-wrap rounded-3xl rounded-tr-lg bg-accent-600 px-4 py-2.5 text-[15px] text-white dark:bg-accent-500 dark:text-zinc-950">
             {msg.content}
           </div>
         ) : (
@@ -70,6 +71,7 @@ export function Chat({
 }) {
   const [draft, setDraft] = useState("");
   const [attachOpen, setAttachOpen] = useState(false);
+  const features = useFeatures();
   const boxRef = useRef<HTMLDivElement>(null);
   const taRef = useRef<HTMLTextAreaElement>(null);
   const imgRef = useRef<HTMLInputElement>(null);
@@ -182,7 +184,7 @@ export function Chat({
           {attachments.length > 0 && (
             <div className="mb-2 flex flex-wrap gap-2">
               {attachments.map((a) => (
-                <span key={a.id} className="inline-flex max-w-full items-center gap-1.5 rounded-full border border-emerald-600/30 bg-emerald-600/10 py-1 pl-3 pr-1.5 text-xs font-medium dark:border-emerald-500/30 dark:bg-emerald-500/10">
+                <span key={a.id} className="inline-flex max-w-full items-center gap-1.5 rounded-full border border-accent-600/30 bg-accent-600/10 py-1 pl-3 pr-1.5 text-xs font-medium dark:border-accent-500/30 dark:bg-accent-500/10">
                   {a.kind === "ocr" ? <ScanText size={13} /> : <FileText size={13} />}
                   <span className="max-w-40 truncate">{a.name}</span>
                   <button onClick={() => onRemoveAttachment(a.id)} aria-label={`Remove ${a.name}`} className="rounded-full p-1 transition hover:bg-black/10 dark:hover:bg-white/10">
@@ -203,7 +205,7 @@ export function Chat({
                   disabled={!ocrAvailable}
                   className="flex w-full items-center gap-3 rounded-2xl px-3 py-2.5 text-left transition hover:bg-stone-100 disabled:opacity-50 dark:hover:bg-zinc-800"
                 >
-                  <span className="grid h-9 w-9 shrink-0 place-items-center rounded-full bg-emerald-600/10 text-emerald-600 dark:text-emerald-400">
+                  <span className="grid h-9 w-9 shrink-0 place-items-center rounded-full bg-accent-600/10 text-accent-600 dark:text-accent-400">
                     <ScanText size={16} />
                   </span>
                   <span>
@@ -215,7 +217,7 @@ export function Chat({
                   onClick={() => { setAttachOpen(false); txtRef.current?.click(); }}
                   className="flex w-full items-center gap-3 rounded-2xl px-3 py-2.5 text-left transition hover:bg-stone-100 dark:hover:bg-zinc-800"
                 >
-                  <span className="grid h-9 w-9 shrink-0 place-items-center rounded-full bg-emerald-600/10 text-emerald-600 dark:text-emerald-400">
+                  <span className="grid h-9 w-9 shrink-0 place-items-center rounded-full bg-accent-600/10 text-accent-600 dark:text-accent-400">
                     <FileText size={16} />
                   </span>
                   <span>
@@ -231,15 +233,17 @@ export function Chat({
           )}
         </div>
         <form onSubmit={submit} className="mx-auto flex w-full max-w-3xl items-end gap-2 rounded-[1.75rem] border border-stone-200 bg-white p-2 pl-2 shadow-lg dark:border-zinc-700 dark:bg-zinc-900">
-          <button
-            type="button"
-            onClick={() => setAttachOpen((o) => !o)}
-            aria-label="Attach a file"
-            title="Attach a file"
-            className="grid h-10 w-10 shrink-0 place-items-center rounded-full transition hover:bg-stone-100 active:scale-95 dark:hover:bg-zinc-800"
-          >
-            <Paperclip size={17} className="opacity-70" />
-          </button>
+          {features.attachments && (
+            <button
+              type="button"
+              onClick={() => setAttachOpen((o) => !o)}
+              aria-label="Attach a file"
+              title="Attach a file"
+              className="grid h-10 w-10 shrink-0 -translate-y-[2px] place-items-center rounded-full transition hover:bg-stone-100 active:scale-95 dark:hover:bg-zinc-800"
+            >
+              <Paperclip size={17} className="opacity-70" />
+            </button>
+          )}
           <input ref={imgRef} type="file" accept="image/jpeg,image/png,image/webp" className="hidden" onChange={(e) => { const f = e.target.files?.[0]; if (f) onPickFile("ocr", f); e.target.value = ""; }} />
           <input ref={txtRef} type="file" accept=".txt,.md,text/plain,text/markdown" className="hidden" onChange={(e) => { const f = e.target.files?.[0]; if (f) onPickFile("text", f); e.target.value = ""; }} />
           <textarea
@@ -261,7 +265,7 @@ export function Chat({
             type="submit"
             disabled={(!draft.trim() && attachments.length === 0) || sending}
             aria-label="Send"
-            className="grid h-10 w-10 shrink-0 place-items-center rounded-full bg-emerald-600 text-white shadow transition hover:bg-emerald-500 active:scale-95 disabled:opacity-40 dark:bg-emerald-500 dark:text-zinc-950 dark:hover:bg-emerald-400"
+            className="grid h-10 w-10 shrink-0 place-items-center rounded-full bg-accent-600 text-white shadow transition hover:bg-accent-500 active:scale-95 disabled:opacity-40 dark:bg-accent-500 dark:text-zinc-950 dark:hover:bg-accent-400"
           >
             <SendHorizontal size={17} />
           </button>
diff --git a/frontend/src/components/Login.tsx b/frontend/src/components/Login.tsx
index d2e7e44..62bd060 100644
--- a/frontend/src/components/Login.tsx
+++ b/frontend/src/components/Login.tsx
@@ -43,9 +43,9 @@ export function Login({ onLogin }: { onLogin: (user: UserType) => void }) {
   }
 
   return (
-    <div className="grid min-h-full place-items-center overflow-y-auto bg-gradient-to-br from-stone-100 via-stone-50 to-emerald-100/60 p-6 dark:from-zinc-950 dark:via-zinc-950 dark:to-emerald-950/40">
+    <div className="grid min-h-full place-items-center overflow-y-auto bg-gradient-to-br from-stone-100 via-stone-50 to-accent-100/60 p-6 dark:from-zinc-950 dark:via-zinc-950 dark:to-accent-950/40">
       <div className="w-full max-w-sm">
-        <div className="rounded-[2rem] border border-white/60 bg-white/80 p-8 shadow-2xl shadow-emerald-900/5 backdrop-blur-xl dark:border-zinc-700/60 dark:bg-zinc-900/80">
+        <div className="rounded-[2rem] border border-white/60 bg-white/80 p-8 shadow-2xl shadow-accent-900/5 backdrop-blur-xl dark:border-zinc-700/60 dark:bg-zinc-900/80">
           <div className="mb-2 flex flex-col items-center text-center">
             <Logo size={68} className="mb-4 rounded-[1.5rem] shadow-lg shadow-red-900/20" />
             <h1 className="text-2xl font-bold tracking-tight">Welcome back</h1>
@@ -99,7 +99,7 @@ export function Login({ onLogin }: { onLogin: (user: UserType) => void }) {
           <ul className="mt-6 space-y-2 border-t border-stone-200/70 pt-5 dark:border-zinc-800">
             {PERKS.map((p) => (
               <li key={p.text} className="flex items-center gap-2.5 text-[13px] opacity-70">
-                <span className="grid h-7 w-7 shrink-0 place-items-center rounded-full bg-emerald-600/10 text-emerald-600 dark:text-emerald-400">
+                <span className="grid h-7 w-7 shrink-0 place-items-center rounded-full bg-accent-600/10 text-accent-600 dark:text-accent-400">
                   <p.icon size={14} />
                 </span>
                 {p.text}
diff --git a/frontend/src/components/ResetPage.tsx b/frontend/src/components/ResetPage.tsx
index 229632c..47561ee 100644
--- a/frontend/src/components/ResetPage.tsx
+++ b/frontend/src/components/ResetPage.tsx
@@ -32,7 +32,7 @@ export function ResetPage({ token }: { token: string }) {
   }
 
   return (
-    <div className="grid min-h-full place-items-center bg-gradient-to-br from-stone-100 via-stone-50 to-emerald-100/60 p-6 dark:from-zinc-950 dark:via-zinc-950 dark:to-emerald-950/40">
+    <div className="grid min-h-full place-items-center bg-gradient-to-br from-stone-100 via-stone-50 to-accent-100/60 p-6 dark:from-zinc-950 dark:via-zinc-950 dark:to-accent-950/40">
       <div className="w-full max-w-sm rounded-[2rem] border border-white/60 bg-white/80 p-8 text-center shadow-2xl backdrop-blur-xl dark:border-zinc-700/60 dark:bg-zinc-900/80">
         <Logo size={56} className="mx-auto mb-4 rounded-[1.2rem] shadow-lg" />
         {state.kind === "loading" && <p className="flex items-center justify-center gap-2 text-sm opacity-60"><Spinner size={15} /> Checking link…</p>}
@@ -55,7 +55,7 @@ export function ResetPage({ token }: { token: string }) {
         {state.kind === "working" && <p className="flex items-center justify-center gap-2 text-sm opacity-60"><Spinner size={15} /> Issuing…</p>}
         {state.kind === "done" && (
           <div className="space-y-4">
-            <h1 className="flex items-center justify-center gap-2 text-xl font-bold"><Sparkles size={18} className="text-emerald-500" /> New key ready</h1>
+            <h1 className="flex items-center justify-center gap-2 text-xl font-bold"><Sparkles size={18} className="text-accent-500" /> New key ready</h1>
             <p className="text-sm opacity-70">Copy it now — it won't be shown again. Then log in with it.</p>
             <div className="flex items-center gap-2">
               <code className="min-w-0 flex-1 truncate rounded-2xl bg-stone-100 px-3 py-2.5 text-sm dark:bg-zinc-800">{state.key}</code>
diff --git a/frontend/src/components/SharePage.tsx b/frontend/src/components/SharePage.tsx
index 13cc449..540150d 100644
--- a/frontend/src/components/SharePage.tsx
+++ b/frontend/src/components/SharePage.tsx
@@ -29,7 +29,7 @@ export function SharePage({ publicId }: { publicId: string }) {
               </p>
             )}
           </div>
-          <a href="/" className="rounded-full bg-emerald-600 px-4 py-2 text-sm font-medium text-white transition hover:bg-emerald-500 dark:bg-emerald-500 dark:text-zinc-950">
+          <a href="/" className="rounded-full bg-accent-600 px-4 py-2 text-sm font-medium text-white transition hover:bg-accent-500 dark:bg-accent-500 dark:text-zinc-950">
             Open KisAssistant
           </a>
         </div>
diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx
index c1d4fc1..3527632 100644
--- a/frontend/src/components/Sidebar.tsx
+++ b/frontend/src/components/Sidebar.tsx
@@ -150,7 +150,7 @@ export function Sidebar({
             className={cn(
               "group flex cursor-pointer select-none items-center gap-2 rounded-2xl px-3 py-2.5 text-sm transition [-webkit-touch-callout:none]",
               c.id === activeId
-                ? "bg-emerald-600/10 font-medium text-emerald-900 dark:bg-emerald-500/10 dark:text-emerald-100"
+                ? "bg-accent-600/10 font-medium text-accent-900 dark:bg-accent-500/10 dark:text-accent-100"
                 : "hover:bg-stone-200/50 dark:hover:bg-zinc-800/70",
             )}
           >
diff --git a/frontend/src/components/dialogs.tsx b/frontend/src/components/dialogs.tsx
index 3517bc7..d89511f 100644
--- a/frontend/src/components/dialogs.tsx
+++ b/frontend/src/components/dialogs.tsx
@@ -1,9 +1,11 @@
 import { useEffect, useRef, useState } from "react";
-import { Globe, FileText, ImagePlus, Link2, Mail, Pencil, ScanText, Settings2, Tag, Unplug } from "lucide-react";
+import { Globe, FileText, ImagePlus, Link2, Mail, Palette, Pencil, ScanText, Settings2, Sparkles, Tag, Unplug, UserPlus } from "lucide-react";
 import { api } from "../lib/api.ts";
 import { cn } from "../lib/cn.ts";
+import { ACCENT_PRESETS, applyAccent, currentAccent, previewAccent, type AccentState } from "../lib/accent.ts";
+import { FEATURES, setFeature, useFeatures } from "../lib/features.ts";
 import type { Conversation, FilePreview, User } from "../lib/types.ts";
-import { Avatar, Button, CopyButton, Field, Input, Modal, Picker, Spinner } from "./ui.tsx";
+import { Avatar, bumpCdnVersion, Button, CopyButton, Field, Input, Modal, Picker, Spinner, Toggle } from "./ui.tsx";
 
 /* ---------- Rename + topic ---------- */
 
@@ -173,7 +175,7 @@ export function FilePreviewModal({
         </p>
       ) : (
         <div className="space-y-3">
-          <p className="rounded-2xl bg-emerald-600/10 px-4 py-2.5 text-sm opacity-90">
+          <p className="rounded-2xl bg-accent-600/10 px-4 py-2.5 text-sm opacity-90">
             {isOcr
               ? <>The image was transcribed to text on the server — <strong>the model receives this text, never the image</strong>. Fix any reading mistakes below, then attach.</>
               : <>The file was uploaded through platform tools. <strong>Its text content is attached to your message.</strong> Edit below if needed, then attach.</>}
@@ -185,7 +187,7 @@ export function FilePreviewModal({
             rows={10}
             value={text}
             onChange={(e) => setText(e.target.value)}
-            className="w-full resize-y rounded-2xl border border-stone-200 bg-stone-50 p-4 font-mono text-[13px] leading-relaxed outline-none focus:border-emerald-500 dark:border-zinc-700 dark:bg-zinc-800"
+            className="w-full resize-y rounded-2xl border border-stone-200 bg-stone-50 p-4 font-mono text-[13px] leading-relaxed outline-none focus:border-accent-500 dark:border-zinc-700 dark:bg-zinc-800"
           />
           <div className="flex items-center justify-between">
             <span className="text-xs opacity-60">{preview?.name} · {text.length.toLocaleString()} chars</span>
@@ -200,6 +202,90 @@ export function FilePreviewModal({
   );
 }
 
+/* ---------- Self-registration ---------- */
+
+export function RegisterDialog({
+  open,
+  onClose,
+  onDone,
+}: {
+  open: boolean;
+  onClose: () => void;
+  onDone: (username: string, key: string) => void;
+}) {
+  const [username, setUsername] = useState("");
+  const [displayName, setDisplayName] = useState("");
+  const [email, setEmail] = useState("");
+  const [key, setKey] = useState<string | null>(null);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState("");
+
+  useEffect(() => {
+    if (open) {
+      setUsername("");
+      setDisplayName("");
+      setEmail("");
+      setKey(null);
+      setError("");
+    }
+  }, [open ]);
+
+  async function submit(e: React.FormEvent) {
+    e.preventDefault();
+    if (busy) return;
+    setBusy(true);
+    setError("");
+    try {
+      const res = await api.register({
+        username: username.trim().toLowerCase(),
+        displayName: displayName.trim() || undefined,
+        email: email.trim() || undefined,
+      });
+      setKey(res.key);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Registration failed");
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <Modal open={open} onClose={onClose} title="Create an account" icon={UserPlus}>
+      {key ? (
+        <div className="space-y-4">
+          <p className="text-sm opacity-80">
+            Welcome, <strong>@{username.trim().toLowerCase()}</strong>! Your access key — copy it now, it won't be shown again:
+          </p>
+          <div className="flex items-center gap-2">
+            <code className="min-w-0 flex-1 truncate rounded-2xl bg-stone-100 px-3 py-2.5 text-sm dark:bg-zinc-800">{key}</code>
+            <CopyButton text={key} />
+          </div>
+          <div className="flex justify-end">
+            <Button size="sm" onClick={() => { onDone(username.trim().toLowerCase(), key); onClose(); }}>Copy & continue to login</Button>
+          </div>
+        </div>
+      ) : (
+        <form onSubmit={submit} className="space-y-4">
+          <Field label="Username">
+            <Input value={username} onChange={(e) => setUsername(e.target.value)} placeholder="alice" maxLength={32} required />
+          </Field>
+          <Field label="Display name">
+            <Input value={displayName} onChange={(e) => setDisplayName(e.target.value)} placeholder="Alice" maxLength={60} />
+          </Field>
+          <Field label="Email (optional, for key recovery)">
+            <Input value={email} onChange={(e) => setEmail(e.target.value)} placeholder="alice@example.com" inputMode="email" />
+          </Field>
+          {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 size="sm" type="submit" disabled={busy}>{busy ? <Spinner size={15} /> : "Register"}</Button>
+          </div>
+        </form>
+      )}
+    </Modal>
+  );
+}
+
 /* ---------- Share ---------- */
 
 export function ShareModal({ conv, onClose }: { conv: Conversation | null; onClose: () => void }) {
@@ -296,6 +382,9 @@ export function SettingsModal({
     try {
       const res = await api.uploadAvatar(user.id, f);
       setAvatarUrl(res.url); // applied when you press Save
+      // Same URL path every upload -> bump the CDN version so every <Avatar>
+      // preview (this modal, sidebar, chat bubbles) re-fetches immediately.
+      bumpCdnVersion();
     } catch (err) {
       setUploadError(err instanceof Error ? err.message : "Upload failed");
     } finally {
@@ -348,11 +437,11 @@ export function SettingsModal({
             className={cn(
               "flex cursor-pointer items-center gap-3 rounded-3xl border-2 border-dashed px-4 py-3.5 transition",
               dragOver
-                ? "border-emerald-500 bg-emerald-500/10"
-                : "border-stone-200 hover:border-emerald-500/60 hover:bg-stone-50 dark:border-zinc-700 dark:hover:bg-zinc-800/60",
+                ? "border-accent-500 bg-accent-500/10"
+                : "border-stone-200 hover:border-accent-500/60 hover:bg-stone-50 dark:border-zinc-700 dark:hover:bg-zinc-800/60",
             )}
           >
-            <span className="grid h-10 w-10 shrink-0 place-items-center rounded-full bg-emerald-600/10 text-emerald-600 dark:text-emerald-400">
+            <span className="grid h-10 w-10 shrink-0 place-items-center rounded-full bg-accent-600/10 text-accent-600 dark:text-accent-400">
               {uploading ? <Spinner size={17} /> : <ImagePlus size={17} />}
             </span>
             <span className="min-w-0 flex-1 text-sm">
@@ -395,6 +484,8 @@ export function SettingsModal({
             ]}
           />
         </Field>
+        <AccentSection />
+        <FeaturesSection />
         {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>
@@ -404,3 +495,109 @@ export function SettingsModal({
     </Modal>
   );
 }
+
+/* ---------- Accent color (settings) ---------- */
+
+function AccentSection() {
+  const [state, setState] = useState<AccentState>(() => currentAccent());
+
+  function pick(presetId: string) {
+    const next = { ...state, presetId };
+    setState(next);
+    applyAccent(next);
+  }
+
+  function pickCustom(hex: string) {
+    const next = { presetId: "custom", customHex: hex };
+    setState(next);
+    previewAccent(hex);
+  }
+
+  return (
+    <div>
+      <span className="mb-1.5 flex items-center gap-1.5 text-sm font-medium opacity-80">
+        <Palette size={14} />
+        Accent color
+      </span>
+      <div className="flex flex-wrap items-center gap-2">
+        {ACCENT_PRESETS.map((p) => (
+          <button
+            key={p.id}
+            type="button"
+            title={p.label}
+            aria-label={`Accent: ${p.label}`}
+            onClick={() => pick(p.id)}
+            className={cn(
+              "h-8 w-8 rounded-full border-2 transition active:scale-90",
+              state.presetId === p.id
+                ? "border-stone-900 dark:border-white"
+                : "border-transparent hover:scale-110",
+            )}
+            style={{ backgroundColor: p.base }}
+          />
+        ))}
+        <label
+          className={cn(
+            "relative grid h-8 w-8 cursor-pointer place-items-center overflow-hidden rounded-full border-2 transition active:scale-90",
+            state.presetId === "custom"
+              ? "border-stone-900 dark:border-white"
+              : "border-transparent hover:scale-110",
+          )}
+          style={{ background: state.presetId === "custom" ? state.customHex : undefined }}
+          title="Custom color"
+        >
+          <Sparkles size={14} className={cn("mix-blend-difference text-white", state.presetId === "custom" && "opacity-0")} />
+          <input
+            type="color"
+            aria-label="Custom accent color"
+            value={state.presetId === "custom" ? state.customHex : "#10b981"}
+            onChange={(e) => pickCustom(e.target.value)}
+            onBlur={() => applyAccent(state)} // persist the last previewed value
+            className="absolute inset-0 cursor-pointer opacity-0"
+          />
+        </label>
+      </div>
+      <p className="mt-1.5 text-xs opacity-60">Applied instantly, saved on this device.</p>
+    </div>
+  );
+}
+
+/* ---------- Features (settings) ---------- */
+
+function FeaturesSection() {
+  const flags = useFeatures();
+  return (
+    <div>
+      <span className="mb-1.5 flex items-center gap-1.5 text-sm font-medium opacity-80">
+        <Sparkles size={14} />
+        Features
+      </span>
+      <div className="space-y-1">
+        {FEATURES.map((f) => (
+          <label
+            key={f.key}
+            className={cn(
+              "flex items-center gap-3 rounded-2xl px-3 py-2 transition",
+              f.ready ? "cursor-pointer hover:bg-stone-100 dark:hover:bg-zinc-800" : "opacity-50",
+            )}
+          >
+            <Toggle
+              checked={!!flags[f.key]}
+              disabled={!f.ready}
+              label={f.label}
+              onChange={(v) => setFeature(f.key, v)}
+            />
+            <span className="min-w-0">
+              <span className="block text-sm font-medium">
+                {f.label}
+                {!f.ready && <span className="ml-1.5 text-xs opacity-60">(soon)</span>}
+              </span>
+              <span className="block text-xs opacity-60">{f.hint}</span>
+            </span>
+          </label>
+        ))}
+      </div>
+      <p className="mt-1.5 text-xs opacity-60">Applied instantly, saved on this device.</p>
+    </div>
+  );
+}
diff --git a/frontend/src/components/ui.tsx b/frontend/src/components/ui.tsx
index 7e97af4..6dea31c 100644
--- a/frontend/src/components/ui.tsx
+++ b/frontend/src/components/ui.tsx
@@ -19,8 +19,8 @@ export function Button({ variant = "primary", size = "md", className, ...props }
         size === "md" && "px-5 py-2.5 text-sm",
         size === "lg" && "px-6 py-3 text-base",
         size === "icon" && "h-9 w-9",
-        variant === "primary" && "bg-emerald-600 text-white shadow-sm hover:bg-emerald-500 dark:bg-emerald-500 dark:hover:bg-emerald-400 dark:text-zinc-950",
-        variant === "gradient" && "bg-gradient-to-r from-emerald-600 to-teal-500 text-white shadow-lg shadow-emerald-600/25 hover:from-emerald-500 hover:to-teal-400 dark:from-emerald-500 dark:to-teal-400 dark:text-zinc-950",
+        variant === "primary" && "bg-accent-600 text-white shadow-sm hover:bg-accent-500 dark:bg-accent-500 dark:hover:bg-accent-400 dark:text-zinc-950",
+        variant === "gradient" && "bg-gradient-to-r from-accent-600 to-teal-500 text-white shadow-lg shadow-accent-600/25 hover:from-accent-500 hover:to-teal-400 dark:from-accent-500 dark:to-teal-400 dark:text-zinc-950",
         variant === "secondary" && "border border-stone-200 bg-white hover:bg-stone-50 dark:border-zinc-700 dark:bg-zinc-900 dark:hover:bg-zinc-800",
         variant === "ghost" && "hover:bg-stone-200/60 dark:hover:bg-zinc-800",
         variant === "danger" && "bg-red-600 text-white hover:bg-red-500",
@@ -53,10 +53,10 @@ export function Input({ variant = "default", className, ...props }: React.InputH
       className={cn(
         "w-full text-sm outline-none transition placeholder:text-stone-400 dark:placeholder:text-zinc-500",
         variant === "default" &&
-          "rounded-2xl border border-stone-200 bg-white px-4 py-2.5 focus:border-emerald-500 focus:ring-2 focus:ring-emerald-500/20 dark:border-zinc-700 dark:bg-zinc-900",
+          "rounded-2xl border border-stone-200 bg-white px-4 py-2.5 focus:border-accent-500 focus:ring-2 focus:ring-accent-500/20 dark:border-zinc-700 dark:bg-zinc-900",
         // soft: onboarding-style pill field, blends into rounded cards
         variant === "soft" &&
-          "rounded-full border border-transparent bg-stone-100 px-5 py-3 focus:border-emerald-500/60 focus:bg-white focus:ring-4 focus:ring-emerald-500/15 dark:bg-zinc-800/80 dark:focus:bg-zinc-900",
+          "rounded-full border border-transparent bg-stone-100 px-5 py-3 focus:border-accent-500/60 focus:bg-white focus:ring-4 focus:ring-accent-500/15 dark:bg-zinc-800/80 dark:focus:bg-zinc-900",
         className,
       )}
       {...props}
@@ -170,12 +170,12 @@ export function Picker({
         onClick={() => setOpen((o) => !o)}
         className={cn(
           "flex max-w-56 items-center gap-2 rounded-full border border-stone-200 bg-white py-2 pl-3.5 pr-3 text-sm font-medium shadow-sm transition",
-          "hover:border-emerald-500/60 hover:shadow disabled:cursor-not-allowed disabled:opacity-50",
+          "hover:border-accent-500/60 hover:shadow disabled:cursor-not-allowed disabled:opacity-50",
           "dark:border-zinc-700 dark:bg-zinc-900",
-          open && "border-emerald-500 ring-2 ring-emerald-500/20",
+          open && "border-accent-500 ring-2 ring-accent-500/20",
         )}
       >
-        {Icon && <Icon size={15} className="shrink-0 text-emerald-600 dark:text-emerald-400" />}
+        {Icon && <Icon size={15} className="shrink-0 text-accent-600 dark:text-accent-400" />}
         <span className="truncate">{selected?.label ?? placeholder}</span>
         <ChevronDown size={15} className={cn("shrink-0 opacity-50 transition-transform", open && "rotate-180")} />
       </button>
@@ -208,7 +208,7 @@ export function Picker({
                       className={cn(
                         "flex w-full items-center gap-2 rounded-xl px-3 py-2 text-left text-sm transition",
                         active
-                          ? "bg-emerald-600/10 font-medium text-emerald-900 dark:bg-emerald-500/10 dark:text-emerald-100"
+                          ? "bg-accent-600/10 font-medium text-accent-900 dark:bg-accent-500/10 dark:text-accent-100"
                           : "hover:bg-stone-100 dark:hover:bg-zinc-800",
                       )}
                     >
@@ -216,7 +216,7 @@ export function Picker({
                         <span className="block truncate">{o.label}</span>
                         {o.hint && <span className="block truncate text-xs opacity-50">{o.hint}</span>}
                       </span>
-                      {active && <Check size={15} className="shrink-0 text-emerald-600 dark:text-emerald-400" />}
+                      {active && <Check size={15} className="shrink-0 text-accent-600 dark:text-accent-400" />}
                     </button>
                   );
                 })}
@@ -297,7 +297,7 @@ export function Modal({
         </div>
         <div className="mb-4 flex items-center gap-2.5">
           {Icon && (
-            <span className="grid h-9 w-9 place-items-center rounded-full bg-emerald-600/10 text-emerald-600 dark:text-emerald-400">
+            <span className="grid h-9 w-9 place-items-center rounded-full bg-accent-600/10 text-accent-600 dark:text-accent-400">
               <Icon size={18} />
             </span>
           )}
@@ -401,8 +401,36 @@ export function ContextMenu({ x, y, items, onClose }: { x: number; y: number; it
 
 /* ---------- Avatar ---------- */
 
+// Uploaded avatars reuse the same /cdn/avatar/<userId> path, so the <img> URL
+// never changes and browsers keep serving the stale cached file. A global
+// version counter (bumped after each successful upload) cache-busts every
+// /cdn/ URL rendered by <Avatar>, refreshing previews app-wide instantly.
+let cdnVersion = 0;
+const cdnVersionListeners = new Set<() => void>();
+
+/** Call after a successful CDN upload so every <Avatar> re-fetches the file. */
+export function bumpCdnVersion(): void {
+  cdnVersion++;
+  cdnVersionListeners.forEach((l) => l());
+}
+
+function useCdnVersion(): number {
+  const [v, setV] = useState(cdnVersion);
+  useEffect(() => {
+    const l = () => setV(cdnVersion);
+    cdnVersionListeners.add(l);
+    return () => { cdnVersionListeners.delete(l); };
+  }, []);
+  return v;
+}
+
+function withCdnVersion(url: string, v: number): string {
+  if (!url.startsWith("/cdn/")) return url;
+  return `${url}${url.includes("?") ? "&" : "?"}v=${v}`;
+}
+
 const GRADIENTS = [
-  "from-emerald-500 to-teal-600",
+  "from-accent-500 to-teal-600",
   "from-violet-500 to-purple-600",
   "from-amber-500 to-orange-600",
   "from-sky-500 to-cyan-600",
@@ -410,8 +438,9 @@ const GRADIENTS = [
 ];
 
 export function Avatar({ name, url, size = 36 }: { name: string; url?: string; size?: number }) {
+  const cdnV = useCdnVersion();
   if (url) {
-    return <img src={url} alt={name} width={size} height={size} className="rounded-full object-cover" style={{ width: size, height: size }} />;
+    return <img src={withCdnVersion(url, cdnV)} alt={name} width={size} height={size} className="rounded-full object-cover" style={{ width: size, height: size }} />;
   }
   const initial = (name.trim()[0] || "?").toUpperCase();
   const g = GRADIENTS[(name.charCodeAt(0) || 0) % GRADIENTS.length];
@@ -443,12 +472,74 @@ export function Logo({ size = 36, className }: { size?: number; className?: stri
   );
 }
 
+/* ---------- Switch (feature toggle) ---------- */
+
+export function Switch({ checked, onChange, label }: { checked: boolean; onChange: (v: boolean) => void; label: string }) {
+  return (
+    <button
+      type="button"
+      role="switch"
+      aria-checked={checked}
+      aria-label={label}
+      onClick={() => onChange(!checked)}
+      className={cn(
+        "relative h-6 w-11 shrink-0 rounded-full transition",
+        checked ? "bg-emerald-600 dark:bg-emerald-500" : "bg-stone-300 dark:bg-zinc-700",
+      )}
+    >
+      <span
+        className={cn(
+          "absolute top-0.5 h-5 w-5 rounded-full bg-white shadow transition-all",
+          checked ? "left-[1.375rem]" : "left-0.5",
+        )}
+      />
+    </button>
+  );
+}
+
 /* ---------- Misc ---------- */
 
 export function Spinner({ size = 18 }: { size?: number }) {
   return <Loader2 size={size} className="animate-spin" />;
 }
 
+/** Accessible on/off switch (emerald→accent colored when on). */
+export function Toggle({
+  checked,
+  onChange,
+  label,
+  disabled = false,
+}: {
+  checked: boolean;
+  onChange: (v: boolean) => void;
+  label: string;
+  disabled?: boolean;
+}) {
+  return (
+    <button
+      type="button"
+      role="switch"
+      aria-checked={checked}
+      aria-label={label}
+      disabled={disabled}
+      onClick={() => onChange(!checked)}
+      className={cn(
+        "relative h-6 w-11 shrink-0 rounded-full border transition disabled:opacity-40",
+        checked
+          ? "border-transparent bg-accent-600 dark:bg-accent-500"
+          : "border-stone-300 bg-stone-200 dark:border-zinc-600 dark:bg-zinc-700",
+      )}
+    >
+      <span
+        className={cn(
+          "absolute top-0.5 h-5 w-5 rounded-full bg-white shadow transition-all dark:bg-zinc-100",
+          checked ? "left-[1.4rem]" : "left-0.5",
+        )}
+      />
+    </button>
+  );
+}
+
 export function CopyButton({ text, label = "Copy" }: { text: string; label?: string }) {
   const [done, setDone] = useState(false);
   return (
@@ -461,7 +552,7 @@ export function CopyButton({ text, label = "Copy" }: { text: string; label?: str
       }}
       className="inline-flex items-center gap-1.5 rounded-full border border-stone-200 bg-white px-3 py-1.5 text-xs font-medium transition hover:bg-stone-50 dark:border-zinc-700 dark:bg-zinc-900 dark:hover:bg-zinc-800"
     >
-      {done ? <Check size={13} className="text-emerald-500" /> : <Copy size={13} />}
+      {done ? <Check size={13} className="text-accent-500" /> : <Copy size={13} />}
       {done ? "Copied" : label}
     </button>
   );
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 209153e..aea924b 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -2,6 +2,21 @@
 @tailwind components;
 @tailwind utilities;
 
+/* Accent palette defaults (emerald). Overridden at runtime by lib/accent.ts
+   from the user's saved accent color / custom pick. Values are RGB triplets. */
+:root {
+  --ka-accent-50: 236 253 245;
+  --ka-accent-100: 209 250 229;
+  --ka-accent-200: 167 243 208;
+  --ka-accent-300: 110 231 183;
+  --ka-accent-400: 52 211 153;
+  --ka-accent-500: 16 185 129;
+  --ka-accent-600: 5 150 105;
+  --ka-accent-700: 4 120 87;
+  --ka-accent-800: 6 95 70;
+  --ka-accent-900: 6 78 59;
+}
+
 html, body, #root {
   height: 100%;
 }
@@ -59,12 +74,12 @@ body {
   @apply bg-stone-200/50 dark:bg-zinc-800;
 }
 .md a {
-  @apply text-emerald-600 underline dark:text-emerald-400;
+  @apply text-accent-600 underline dark:text-accent-400;
 }
 .md ul { @apply list-disc pl-5; }
 .md ol { @apply list-decimal pl-5; }
 .md blockquote {
-  @apply border-l-4 border-emerald-500/50 pl-3 italic opacity-80;
+  @apply border-l-4 border-accent-500/50 pl-3 italic opacity-80;
 }
 
 .typing-cursor::after {
diff --git a/frontend/src/lib/accent.ts b/frontend/src/lib/accent.ts
new file mode 100644
index 0000000..d91c7c7
--- /dev/null
+++ b/frontend/src/lib/accent.ts
@@ -0,0 +1,117 @@
+/**
+ * Runtime accent color (settings → accent color). Predefined palettes plus a
+ * custom picker; shades 50–900 are derived from a single base hex via HSL and
+ * written to the --ka-accent-* CSS variables that back Tailwind's `accent`
+ * palette. Persisted per-browser (localStorage), like the feature flags.
+ */
+
+export type AccentShades = Record<"50" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900", string>;
+
+export interface AccentPreset {
+  id: string;
+  label: string;
+  base: string; // hex, used as the 500 shade and to derive the ramp
+}
+
+export const ACCENT_PRESETS: AccentPreset[] = [
+  { id: "emerald", label: "Emerald", base: "#10b981" },
+  { id: "rose", label: "Rose", base: "#f43f5e" },
+  { id: "blue", label: "Blue", base: "#3b82f6" },
+  { id: "violet", label: "Violet", base: "#8b5cf6" },
+  { id: "amber", label: "Yellow", base: "#f59e0b" },
+  { id: "orange", label: "Orange", base: "#f97316" },
+  { id: "teal", label: "Teal", base: "#14b8a6" },
+  { id: "pink", label: "Pink", base: "#ec4899" },
+];
+
+const STORAGE_KEY = "ka:accent";
+const SHADE_KEYS = ["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"] as const;
+// Lightness ramps for 50→900 around a mid 500 (HSL L values in %).
+const RAMP: Record<(typeof SHADE_KEYS)[number], number> = {
+  "50": 97, "100": 93, "200": 86, "300": 76, "400": 64,
+  "500": 52, "600": 45, "700": 38, "800": 30, "900": 24,
+};
+
+function hexToHsl(hex: string): { h: number; s: number; l: number } {
+  const m = /^#?([0-9a-f]{6})$/i.exec(hex.trim());
+  if (!m) return { h: 160, s: 84, l: 52 }; // emerald fallback
+  const n = parseInt(m[1]!, 16);
+  const r = ((n >> 16) & 255) / 255, g = ((n >> 8) & 255) / 255, b = (n & 255) / 255;
+  const max = Math.max(r, g, b), min = Math.min(r, g, b);
+  let h = 0, s = 0;
+  const l = (max + min) / 2;
+  if (max !== min) {
+    const d = max - min;
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    if (max === r) h = ((g - b) / d + (g < b ? 6 : 0)) * 60;
+    else if (max === g) h = ((b - r) / d + 2) * 60;
+    else h = ((r - g) / d + 4) * 60;
+  }
+  return { h, s: s * 100, l: l * 100 };
+}
+
+function hslToRgbTriplet(h: number, s: number, l: number): string {
+  const sn = s / 100, ln = l / 100;
+  const c = (1 - Math.abs(2 * ln - 1)) * sn;
+  const x = c * (1 - Math.abs(((h / 60) % 2) - 1));
+  const m = ln - c / 2;
+  let r = 0, g = 0, b = 0;
+  if (h < 60) [r, g, b] = [c, x, 0];
+  else if (h < 120) [r, g, b] = [x, c, 0];
+  else if (h < 180) [r, g, b] = [0, c, x];
+  else if (h < 240) [r, g, b] = [0, x, c];
+  else if (h < 300) [r, g, b] = [x, 0, c];
+  else [r, g, b] = [c, 0, x];
+  const to = (v: number) => Math.round((v + m) * 255);
+  return `${to(r)} ${to(g)} ${to(b)}`;
+}
+
+/** Build the 50–900 ramp from a base hex (HSL ramp, emerald-style). */
+export function shadesFor(baseHex: string): AccentShades {
+  const { h, s } = hexToHsl(baseHex);
+  const out = {} as AccentShades;
+  for (const k of SHADE_KEYS) {
+    // Keep saturation lively at the light end, richer at the dark end.
+    const sat = k === "50" || k === "100" ? s * 0.9 : s;
+    out[k] = hslToRgbTriplet(h, sat, RAMP[k]);
+  }
+  return out;
+}
+
+export interface AccentState {
+  /** preset id, or "custom" */
+  presetId: string;
+  /** hex for custom (ignored for presets — they derive from their base) */
+  customHex: string;
+}
+
+export function currentAccent(): AccentState {
+  try {
+    const raw = JSON.parse(localStorage.getItem(STORAGE_KEY) ?? "null") as AccentState | null;
+    if (raw && typeof raw.presetId === "string") return raw;
+  } catch { /* ignore */ }
+  return { presetId: "emerald", customHex: "#10b981" };
+}
+
+export function applyAccent(state: AccentState): void {
+  const preset = ACCENT_PRESETS.find((p) => p.id === state.presetId);
+  const base = preset ? preset.base : (/^#?[0-9a-f]{6}$/i.test(state.customHex) ? state.customHex : "#10b981");
+  const shades = shadesFor(base);
+  const root = document.documentElement;
+  for (const k of SHADE_KEYS) root.style.setProperty(`--ka-accent-${k}`, shades[k]);
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(state));
+  } catch { /* ignore */ }
+}
+
+/** Preview without persisting (used while the picker is open). */
+export function previewAccent(baseHex: string): void {
+  const shades = shadesFor(baseHex);
+  const root = document.documentElement;
+  for (const k of SHADE_KEYS) root.style.setProperty(`--ka-accent-${k}`, shades[k]);
+}
+
+// Restore the saved accent on load.
+if (typeof document !== "undefined") {
+  applyAccent(currentAccent());
+}
diff --git a/frontend/src/lib/api.ts b/frontend/src/lib/api.ts
index 1cfb842..b17cbf1 100644
--- a/frontend/src/lib/api.ts
+++ b/frontend/src/lib/api.ts
@@ -46,7 +46,9 @@ export const api = {
   verify: () => req<{ ok: boolean; user: User }>("/api/auth/verify"),
   logout: () => req<{ ok: boolean }>("/api/auth/logout", { method: "POST" }).catch(() => ({ ok: true as const })),
 
-  methods: () => req<{ recovery: boolean; from?: string }>("/api/auth/methods", {}, false),
+  methods: () => req<{ recovery: boolean; from?: string; registration: boolean }>("/api/auth/methods", {}, false),
+  register: (u: { username: string; displayName?: string; email?: string }) =>
+    req<{ user: User; key: string }>("/api/auth/register", { method: "POST", body: JSON.stringify(u) }, false),
   recover: (username: string) =>
     req<{ ok: boolean }>("/api/auth/recover", { method: "POST", body: JSON.stringify({ username }) }, false),
   resetCheck: (token: string) => req<{ ok: boolean; username: string }>(`/api/auth/reset/${token}`, {}, false),
@@ -64,6 +66,10 @@ export const api = {
   adminPatch: (id: string, patch: { displayName?: string; avatarUrl?: string; theme?: string; email?: string }) =>
     req<{ user: User }>(`/api/admin/users/${id}`, { method: "PATCH", body: JSON.stringify(patch) }),
 
+  adminGetSettings: () => req<{ settings: { registrationEnabled: boolean; ocrEnabled: boolean } }>("/api/admin/settings"),
+  adminPatchSettings: (patch: { registrationEnabled?: boolean; ocrEnabled?: boolean }) =>
+    req<{ settings: { registrationEnabled: boolean; ocrEnabled: boolean } }>("/api/admin/settings", { method: "PATCH", body: JSON.stringify(patch) }),
+
   convs: () => req<{ conversations: Conversation[] }>("/api/conversations"),
   createConv: (c: { title?: string; topic?: string; model?: string }) =>
     req<{ conversation: Conversation }>("/api/conversations", { method: "POST", body: JSON.stringify(c) }),
diff --git a/frontend/src/lib/features.ts b/frontend/src/lib/features.ts
new file mode 100644
index 0000000..5a4ff33
--- /dev/null
+++ b/frontend/src/lib/features.ts
@@ -0,0 +1,80 @@
+import { useSyncExternalStore } from "react";
+
+/**
+ * Per-browser feature flags (localStorage). Gate optional composer
+ * capabilities; kept client-side on purpose — they only change what the
+ * UI offers / what prompt decorations are sent, never auth or data access.
+ */
+export type FeatureKey = "thinking" | "attachments" | "deepSearch";
+
+export const FEATURES: { key: FeatureKey; label: string; hint: string; ready: boolean }[] = [
+  {
+    key: "thinking",
+    label: "Thinking",
+    hint: "Ask the model to reason step-by-step before answering.",
+    ready: true,
+  },
+  {
+    key: "attachments",
+    label: "Attachments",
+    hint: "Attach images (OCR transcription) and text files to messages.",
+    ready: true,
+  },
+  {
+    key: "deepSearch",
+    label: "Deep search",
+    hint: "Let the assistant search the web for fresh sources. Coming soon.",
+    ready: false,
+  },
+];
+
+const STORAGE_KEY = "ka:features";
+const DEFAULTS: Record<FeatureKey, boolean> = {
+  thinking: false,
+  attachments: true,
+  deepSearch: false,
+};
+
+function load(): Record<FeatureKey, boolean> {
+  try {
+    const raw = JSON.parse(localStorage.getItem(STORAGE_KEY) ?? "{}") as Partial<Record<FeatureKey, boolean>>;
+    return { ...DEFAULTS, ...raw };
+  } catch {
+    return { ...DEFAULTS };
+  }
+}
+
+let flags = load();
+const listeners = new Set<() => void>();
+
+function persist() {
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(flags));
+  } catch {
+    // private mode etc. — flags just won't survive a reload
+  }
+  listeners.forEach((l) => l());
+}
+
+export function featureEnabled(key: FeatureKey): boolean {
+  return flags[key];
+}
+
+export function setFeature(key: FeatureKey, value: boolean) {
+  flags = { ...flags, [key]: value };
+  persist();
+}
+
+export function useFeatures(): Record<FeatureKey, boolean> {
+  return useSyncExternalStore(
+    (cb) => {
+      listeners.add(cb);
+      return () => { listeners.delete(cb); };
+    },
+    () => flags,
+  );
+}
+
+/** System message prepended to /api/chat when the "thinking" flag is on. */
+export const THINKING_SYSTEM_PROMPT =
+  "Think step-by-step before answering. Start with a short 'Thoughts' section showing your reasoning, then give the final answer under an 'Answer' heading.";
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index a351643..db5e971 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -7,6 +7,22 @@ export default {
       fontFamily: {
         sans: ["Inter Variable", "Inter", "ui-sans-serif", "system-ui", "sans-serif"],
       },
+      /* Accent palette backed by CSS variables so the user can recolor the
+         UI at runtime (settings → accent color). Defaults = emerald. */
+      colors: {
+        accent: {
+          50: "rgb(var(--ka-accent-50) / <alpha-value>)",
+          100: "rgb(var(--ka-accent-100) / <alpha-value>)",
+          200: "rgb(var(--ka-accent-200) / <alpha-value>)",
+          300: "rgb(var(--ka-accent-300) / <alpha-value>)",
+          400: "rgb(var(--ka-accent-400) / <alpha-value>)",
+          500: "rgb(var(--ka-accent-500) / <alpha-value>)",
+          600: "rgb(var(--ka-accent-600) / <alpha-value>)",
+          700: "rgb(var(--ka-accent-700) / <alpha-value>)",
+          800: "rgb(var(--ka-accent-800) / <alpha-value>)",
+          900: "rgb(var(--ka-accent-900) / <alpha-value>)",
+        },
+      },
     },
   },
   plugins: [],
diff --git a/src/db.ts b/src/db.ts
index f3074e2..906df86 100644
--- a/src/db.ts
+++ b/src/db.ts
@@ -108,6 +108,11 @@ export function getDb(): Database {
       created_at INTEGER NOT NULL,
       expires_at INTEGER NOT NULL
     );
+    CREATE TABLE IF NOT EXISTS settings(
+      key TEXT PRIMARY KEY,
+      value TEXT NOT NULL,
+      updated_at INTEGER NOT NULL
+    );
   `);
   // Email column added after the initial schema — keep idempotent.
   const cols = db.query("PRAGMA table_info(users)").all() as { name: string }[];
@@ -332,6 +337,29 @@ export function deleteUserResets(userId: string): void {
   getDb().query("DELETE FROM resets WHERE user_id = ?").run(userId);
 }
 
+// --- platform settings (admin-controlled feature flags) ---
+
+export function getSetting(key: string, fallback: string): string {
+  const r = getDb().query("SELECT value FROM settings WHERE key = ?").get(key) as { value: string } | null;
+  return r?.value ?? fallback;
+}
+
+export function setSetting(key: string, value: string): void {
+  getDb().query(
+    "INSERT INTO settings (key, value, updated_at) VALUES (?, ?, ?) ON CONFLICT(key) DO UPDATE SET value = excluded.value, updated_at = excluded.updated_at",
+  ).run(key, value, Date.now());
+}
+
+/** Public self-registration switch (default off = admin-created accounts only). */
+export function isRegistrationEnabled(): boolean {
+  return getSetting("registration_enabled", "0") === "1";
+}
+
+/** Admin kill-switch for the OCR platform tool (default on). */
+export function isOcrToolEnabled(): boolean {
+  return getSetting("tools_ocr_enabled", "1") === "1";
+}
+
 // --- public shares ---
 
 export function ensureShare(convId: string): string {
diff --git a/src/index.ts b/src/index.ts
index 9aa18b4..528d8c0 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -28,11 +28,14 @@ import {
   getMessages,
   getShareByConv,
   getShareByPublic,
+  getSetting,
   getUserById,
   getUserByUsername,
+  isRegistrationEnabled,
   listConversations,
   listUsers,
   peekReset,
+  setSetting,
   toPublicUser,
   touchConversation,
   updateConversation,
@@ -41,6 +44,7 @@ import {
 import type { ChatMessage } from "./drivers/types.ts";
 import { DriverRegistry } from "./drivers/registry.ts";
 import { createHash, randomBytes } from "node:crypto";
+import { statSync } from "node:fs";
 import { mailEnabled, sendRecoveryEmail } from "./mail.ts";
 import {
   CDN_NAMESPACES,
@@ -61,6 +65,8 @@ import { tools } from "./tools/registry.ts";
 
 assertConfig();
 const registry = new DriverRegistry();
+// Ollama handles admin model pulls/deletes (host is loopback/LAN, no auth).
+const ollamaDriver = registry.get("ollama") as OllamaDriver;
 await tools.init();
 
 function json(data: unknown, status = 200): Response {
@@ -186,6 +192,28 @@ const server = Bun.serve({
       }
       const f = await cdnFile(ns, key, ext);
       if (!f.exists) return new Response("not found", { status: 404 });
+      if (ns === "avatar") {
+        // Same URL, new bytes after a re-upload: force revalidation (ETag)
+        // so the fresh picture shows immediately without a page refresh.
+        let etag = "";
+        try {
+          const st = statSync(f.path);
+          etag = `"${st.mtimeMs.toString(36)}-${st.size.toString(36)}"`;
+        } catch {
+          // stat failed — serve without ETag
+        }
+        if (etag && req.headers.get("if-none-match") === etag) {
+          return new Response(null, { status: 304 });
+        }
+        return new Response(Bun.file(f.path), {
+          headers: {
+            "Content-Type": cdnMime(ext),
+            "Cache-Control": "no-cache",
+            ...(etag ? { ETag: etag } : {}),
+            "X-Content-Type-Options": "nosniff",
+          },
+        });
+      }
       return new Response(Bun.file(f.path), {
         headers: {
           "Content-Type": cdnMime(ext),
@@ -271,7 +299,50 @@ const server = Bun.serve({
 
     // --- key recovery via email (optional — needs SMTP configured) ---
     if (path === "/api/auth/methods" && req.method === "GET") {
-      return json({ recovery: mailEnabled(), from: mailEnabled() ? config.smtpFrom : undefined });
+      return json({
+        recovery: mailEnabled(),
+        from: mailEnabled() ? config.smtpFrom : undefined,
+        registration: isRegistrationEnabled(),
+      });
+    }
+
+    // --- public self-registration (admin can disable it on the fly) ---
+    if (path === "/api/auth/register" && req.method === "POST") {
+      const ip = clientIp(req, server);
+      if (isRateLimited(ip)) return json({ error: "too many attempts, try again later" }, 429);
+      if (!isRegistrationEnabled()) {
+        recordAttempt(ip);
+        return json({ error: "registration is currently disabled on this platform" }, 403);
+      }
+      const { ok, body } = await readJson(req);
+      if (!ok) {
+        recordAttempt(ip);
+        return json({ error: "invalid JSON" }, 400);
+      }
+      const username = validUsername(body.username);
+      if (!username) {
+        recordAttempt(ip);
+        return json({ error: "username: 2-32 chars [a-z0-9._-], 'admin' reserved" }, 400);
+      }
+      if (getUserByUsername(username)) {
+        recordAttempt(ip);
+        return json({ error: "username taken" }, 409);
+      }
+      const displayName = body.displayName === undefined ? username : cleanStr(body.displayName, 60);
+      if (displayName === null) {
+        recordAttempt(ip);
+        return json({ error: "displayName: 1-60 chars" }, 400);
+      }
+      const email = body.email === undefined ? "" : validEmail(body.email);
+      if (email === null) {
+        recordAttempt(ip);
+        return json({ error: "invalid email address" }, 400);
+      }
+      const key = newAccessKey();
+      const created = createUser({ username, displayName, avatarUrl: "", theme: "auto", email, keyHash: hashSecret(key) });
+      clearAttempts(ip);
+      // Show the raw key exactly once.
+      return json({ user: toPublicUser(created), key }, 201);
     }
 
     if (path === "/api/auth/recover" && req.method === "POST") {
@@ -424,6 +495,128 @@ const server = Bun.serve({
         return json({ error: "not found" }, 404);
       }
 
+      // --- admin: platform settings (feature flags) ---
+      if (path === "/api/admin/settings" && req.method === "GET") {
+        if (!admin) return json({ error: "forbidden" }, 403);
+        return json({
+          settings: {
+            registrationEnabled: isRegistrationEnabled(),
+            ocrEnabled: getSetting("tools_ocr_enabled", "1") === "1",
+          },
+        });
+      }
+
+      if (path === "/api/admin/settings" && req.method === "PATCH") {
+        if (!admin) return json({ error: "forbidden" }, 403);
+        const { ok, body } = await readJson(req);
+        if (!ok) return json({ error: "invalid JSON" }, 400);
+        if (body.registrationEnabled !== undefined) {
+          if (typeof body.registrationEnabled !== "boolean") return json({ error: "registrationEnabled must be boolean" }, 400);
+          setSetting("registration_enabled", body.registrationEnabled ? "1" : "0");
+        }
+        if (body.ocrEnabled !== undefined) {
+          if (typeof body.ocrEnabled !== "boolean") return json({ error: "ocrEnabled must be boolean" }, 400);
+          setSetting("tools_ocr_enabled", body.ocrEnabled ? "1" : "0");
+        }
+        return json({
+          settings: {
+            registrationEnabled: isRegistrationEnabled(),
+            ocrEnabled: getSetting("tools_ocr_enabled", "1") === "1",
+          },
+        });
+      }
+
+      // --- admin: Ollama model management (pull from the library, delete) ---
+      // Pull streams Ollama's NDJSON progress straight to the admin client.
+      if (path === "/api/admin/ollama/pull" && req.method === "POST") {
+        if (!admin) return json({ error: "forbidden" }, 403);
+        const { ok, body } = await readJson(req);
+        if (!ok) return json({ error: "invalid JSON" }, 400);
+        const name = typeof body.name === "string" ? body.name.trim() : "";
+        if (!/^[a-z0-9._:\/-]{1,100}$/i.test(name)) return json({ error: "invalid model name" }, 400);
+        if (!ollamaDriver.enabled) return json({ error: "ollama driver is disabled" }, 502);
+        const abortUpstream = new AbortController();
+        const onClientAbort = () => abortUpstream.abort();
+        req.signal.addEventListener("abort", onClientAbort);
+        let clientGone = false;
+        const stream = new ReadableStream({
+          async start(controller) {
+            const enc = new TextEncoder();
+            const send = (obj: unknown): boolean => {
+              if (clientGone || req.signal.aborted) return false;
+              try {
+                controller.enqueue(enc.encode(JSON.stringify(obj) + "\n"));
+                return true;
+              } catch {
+                clientGone = true;
+                return false;
+              }
+            };
+            try {
+              const res = await fetch(`${ollamaDriver.host}/api/pull`, {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ model: name, stream: true }),
+                signal: abortUpstream.signal,
+              });
+              if (!res.ok || !res.body) {
+                const errText = await res.text().catch(() => "");
+                send({ error: `ollama /api/pull failed: ${res.status}${errText ? ` — ${errText.slice(0, 200)}` : ""}` });
+                return;
+              }
+              // Passthrough of the NDJSON progress lines (status/digest/completed/total).
+              const dec = new TextDecoder();
+              let buf = "";
+              for await (const chunk of res.body) {
+                if (req.signal.aborted) break;
+                buf += dec.decode(chunk, { stream: true });
+                let nl: number;
+                while ((nl = buf.indexOf("\n")) >= 0) {
+                  const line = buf.slice(0, nl).trim();
+                  buf = buf.slice(nl + 1);
+                  if (line && !send(JSON.parse(line))) break;
+                }
+              }
+              send({ status: "done" });
+            } catch (e) {
+              if (!req.signal.aborted && !clientGone) send({ error: (e as Error).message });
+            } finally {
+              req.signal.removeEventListener("abort", onClientAbort);
+              abortUpstream.abort();
+              if (!clientGone) {
+                try { controller.close(); } catch { /* already closed */ }
+              }
+            }
+          },
+          cancel() {
+            clientGone = true;
+            abortUpstream.abort();
+          },
+        });
+        return new Response(stream, {
+          headers: { "Content-Type": "application/x-ndjson", "Cache-Control": "no-store", "X-Accel-Buffering": "no" },
+        });
+      }
+
+      // Admin-only model removal (frees disk on the Ollama host).
+      const ollamaDeleteMatch = path.match(/^\/api\/admin\/ollama\/models\/([a-z0-9._:\/-]{1,100})$/i);
+      if (ollamaDeleteMatch && req.method === "DELETE") {
+        if (!admin) return json({ error: "forbidden" }, 403);
+        if (!ollamaDriver.enabled) return json({ error: "ollama driver is disabled" }, 502);
+        try {
+          const res = await fetch(`${ollamaDriver.host}/api/delete`, {
+            method: "DELETE",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ model: ollamaDeleteMatch[1] }),
+            signal: AbortSignal.timeout(15_000),
+          });
+          if (!res.ok) return json({ error: `ollama /api/delete failed: ${res.status}` }, 502);
+          return json({ ok: true });
+        } catch (e) {
+          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) });
diff --git a/src/tools/ocr.ts b/src/tools/ocr.ts
index 20d20b9..3438326 100644
--- a/src/tools/ocr.ts
+++ b/src/tools/ocr.ts
@@ -1,4 +1,5 @@
 import { config } from "../config.ts";
+import { isOcrToolEnabled } from "../db.ts";
 import { driverLog, fmtMs } from "../drivers/log.ts";
 import type { PlatformTool } from "./types.ts";
 
@@ -62,12 +63,15 @@ export class OcrTool implements PlatformTool {
   }
 
   isAvailable(): boolean {
-    return this.available ?? false;
+    return (this.available ?? false) && isOcrToolEnabled();
   }
 
   unavailableReason(): string | null {
-    if (this.isAvailable()) return null;
-    return `tesseract binary not found (looked for "${tessBin()}"). Install tesseract or set TESSERACT_BIN.`;
+    if (!(this.available ?? false)) {
+      return `tesseract binary not found (looked for "${tessBin()}"). Install tesseract or set TESSERACT_BIN.`;
+    }
+    if (!isOcrToolEnabled()) return "OCR is disabled by the administrator (Admin Center → Features).";
+    return null;
   }
 
   async transcribe(image: Uint8Array): Promise<{ text: string; truncated: boolean }> {