.

frontend/src/App.tsx

@@ -9,6 +9,7 @@ import { ConvEditDialog, FilePreviewModal, SettingsModal, ShareModal } from "./c
 import { AdminCenter } from "./components/AdminCenter.tsx";
 import { SharePage } from "./components/SharePage.tsx";
 import { ResetPage } from "./components/ResetPage.tsx";
+import { ReviewPage } from "./components/ReviewPage.tsx";
 import { ConfirmDialog, LoadingScreen } from "./components/ui.tsx";
 
 function shareIdFromPath(): string | null {
@@ -19,6 +20,7 @@ function shareIdFromPath(): string | null {
 // Module-level: the path never changes without a full reload, so hook order stays stable.
 const SHARE_ID = typeof window !== "undefined" ? shareIdFromPath() : null;
 const RESET_TOKEN = typeof window !== "undefined" ? resetTokenFromPath() : null;
+const REVIEW_ID = typeof window !== "undefined" ? reviewIdFromPath() : null;
 const IS_ADMIN_PAGE = typeof window !== "undefined" && /^\/admin\/?$/.test(window.location.pathname);
 
 function resetTokenFromPath(): string | null {
@@ -26,6 +28,11 @@ function resetTokenFromPath(): string | null {
   return m ? m[1]! : null;
 }
 
+function reviewIdFromPath(): string | null {
+  const m = window.location.pathname.match(/^\/review\/([0-9a-f-]{36})\/?$/i);
+  return m ? m[1]! : null;
+}
+
 function applyTheme(theme: string) {
   const root = document.documentElement;
   const dark =
@@ -36,7 +43,7 @@ function applyTheme(theme: string) {
 
 export function App() {
   const [user, setUser] = useState<User | null>(null);
-  const [checking, setChecking] = useState(!SHARE_ID && !RESET_TOKEN && !IS_ADMIN_PAGE && !!getToken());
+  const [checking, setChecking] = useState(!SHARE_ID && !RESET_TOKEN && !REVIEW_ID && !IS_ADMIN_PAGE && !!getToken());
   const [models, setModels] = useState<DriverModel[]>([]);
   const [model, setModel] = useState("");
   const [convs, setConvs] = useState<Conversation[]>([]);
@@ -63,6 +70,9 @@ export function App() {
   if (RESET_TOKEN) {
     return <ResetPage token={RESET_TOKEN} />;
   }
+  if (REVIEW_ID) {
+    return <ReviewPage ticketId={REVIEW_ID} />;
+  }
   if (SHARE_ID) {
     return <SharePage publicId={SHARE_ID} />;
   }

frontend/src/components/AccessRequests.tsx

@@ -0,0 +1,242 @@
+import { useEffect, useState } from "react";
+import { CheckCircle2, Clock, Inbox, Search, SendHorizontal, Undo2, XCircle } from "lucide-react";
+import { api, type AccessMessage, type AccessRequest, type AccessStatus } from "../lib/api.ts";
+import { Button, CopyButton, Field, Input, Spinner } from "./ui.tsx";
+import { cn } from "../lib/cn.ts";
+
+const STATUS_STYLE: Record<AccessStatus, { label: string; cls: string }> = {
+  pending: { label: "Pending", cls: "bg-amber-500/10 text-amber-700 dark:text-amber-400" },
+  reviewing: { label: "Reviewing", cls: "bg-sky-500/10 text-sky-700 dark:text-sky-400" },
+  accepted: { label: "Accepted", cls: "bg-accent-500/10 text-accent-700 dark:text-accent-400" },
+  refused: { label: "Refused", cls: "bg-red-500/10 text-red-600 dark:text-red-400" },
+};
+
+type Filter = "all" | AccessStatus;
+const FILTERS: Filter[] = ["all", "pending", "reviewing", "accepted", "refused"];
+
+/** Admin triage for the access-request wishlist: accept / refuse / review. */
+export function AccessRequestsPanel() {
+  const [requests, setRequests] = useState<(AccessRequest & { message_count: number })[]>([]);
+  const [filter, setFilter] = useState<Filter>("pending");
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState("");
+
+  async function refresh(select?: string) {
+    try {
+      const res = await api.adminAccessList();
+      setRequests(res.requests);
+      if (select) setSelectedId(select);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Load failed");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  useEffect(() => {
+    refresh();
+  }, []);
+
+  const visible = requests.filter((r) => filter === "all" || r.status === filter);
+  const pendingCount = requests.filter((r) => r.status === "pending").length;
+
+  return (
+    <div className="space-y-3">
+      <div className="flex flex-wrap items-center gap-1.5">
+        {FILTERS.map((f) => {
+          const n = f === "all" ? requests.length : requests.filter((r) => r.status === f).length;
+          return (
+            <button
+              key={f}
+              onClick={() => setFilter(f)}
+              className={cn(
+                "rounded-full px-3.5 py-1.5 text-xs font-medium capitalize transition",
+                filter === f
+                  ? "bg-stone-900 text-white dark:bg-zinc-100 dark:text-zinc-900"
+                  : "bg-stone-200/70 hover:bg-stone-300/60 dark:bg-zinc-800 dark:hover:bg-zinc-700",
+              )}
+            >
+              {f} · {n}
+            </button>
+          );
+        })}
+        <button
+          onClick={() => refresh()}
+          className="ml-auto rounded-full p-2 opacity-60 transition hover:bg-stone-200/60 hover:opacity-100 dark:hover:bg-zinc-800"
+          title="Refresh"
+          aria-label="Refresh requests"
+        >
+          <Undo2 size={15} />
+        </button>
+      </div>
+
+      {error && <p className="rounded-2xl bg-red-500/10 px-4 py-2.5 text-sm text-red-600 dark:text-red-400" role="alert">{error}</p>}
+      {loading && <p className="flex items-center gap-2 text-sm opacity-60"><Spinner size={14} /> Loading…</p>}
+
+      {!loading && visible.length === 0 && (
+        <p className="flex items-center justify-center gap-2 rounded-3xl border border-dashed border-stone-300 px-4 py-8 text-sm opacity-50 dark:border-zinc-700">
+          <Inbox size={16} />
+          {pendingCount > 0 ? "Nothing with this status." : "No access requests. The wishlist is empty."}
+        </p>
+      )}
+
+      <ul className="space-y-2">
+        {visible.map((r) => (
+          <li key={r.id}>
+            <button
+              onClick={() => setSelectedId((cur) => (cur === r.id ? null : r.id))}
+              className={cn(
+                "flex w-full items-center gap-3 rounded-3xl border p-4 text-left transition",
+                selectedId === r.id
+                  ? "border-accent-500/50 bg-accent-500/5"
+                  : "border-stone-200/70 bg-white hover:border-stone-300 dark:border-zinc-800 dark:bg-zinc-900 dark:hover:border-zinc-700",
+              )}
+            >
+              <span className="grid h-10 w-10 shrink-0 place-items-center rounded-full bg-stone-200/70 text-sm font-semibold dark:bg-zinc-800">
+                {(r.username[0] || "?").toUpperCase()}
+              </span>
+              <span className="min-w-0 flex-1">
+                <span className="block truncate text-sm font-medium">@{r.username} <span className="font-normal opacity-50">{r.email}</span></span>
+                <span className="block truncate text-xs opacity-60">{r.message} · {r.message_count} message{r.message_count === 1 ? "" : "s"}</span>
+              </span>
+              <span className={cn("shrink-0 rounded-full px-2.5 py-1 text-xs font-medium", STATUS_STYLE[r.status].cls)}>
+                {STATUS_STYLE[r.status].label}
+              </span>
+            </button>
+            {selectedId === r.id && <TicketDetail request={r} onChanged={() => refresh(r.id)} />}
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+function TicketDetail({ request, onChanged }: { request: AccessRequest; onChanged: () => void }) {
+  const [messages, setMessages] = useState<AccessMessage[]>([]);
+  const [reason, setReason] = useState(request.reason);
+  const [draft, setDraft] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState("");
+  const [freshKey, setFreshKey] = useState<string | null>(null);
+
+  useEffect(() => {
+    setReason(request.reason);
+    setFreshKey(null);
+    api.adminAccessGet(request.id).then((res) => setMessages(res.messages)).catch(() => {});
+  }, [request.id, request.reason]);
+
+  const closed = request.status === "accepted" || request.status === "refused";
+
+  async function setStatus(status: AccessStatus) {
+    setBusy(true);
+    setError("");
+    try {
+      const res = await api.adminAccessPatch(request.id, { status, reason: reason.trim() });
+      if (res.key) setFreshKey(res.key);
+      onChanged();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Update failed");
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  async function reply(e: React.FormEvent) {
+    e.preventDefault();
+    const body = draft.trim();
+    if (!body || busy) return;
+    setBusy(true);
+    setError("");
+    try {
+      const res = await api.adminAccessReply(request.id, body);
+      setMessages((prev) => [...prev, res.message]);
+      setDraft("");
+      onChanged();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Send failed");
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <div className="mt-2 space-y-3 rounded-3xl border border-stone-200/70 bg-stone-50 p-4 dark:border-zinc-800 dark:bg-zinc-900/60">
+      {freshKey && (
+        <div className="rounded-2xl border border-accent-500/40 bg-accent-50 p-3 dark:bg-accent-950/30">
+          <p className="mb-2 flex items-center gap-2 text-sm font-medium"><CheckCircle2 size={15} /> Account created — key 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}</code>
+            <CopyButton text={freshKey} />
+          </div>
+        </div>
+      )}
+
+      <div className="max-h-64 space-y-2 overflow-y-auto">
+        {messages.map((m) => (
+          <div key={m.id} className={cn("flex", m.author === "admin" ? "justify-end" : "justify-start")}>
+            <div className={cn(
+              "max-w-[85%] rounded-2xl px-3 py-2 text-sm",
+              m.author === "admin"
+                ? "rounded-tr-lg bg-accent-600 text-white dark:bg-accent-500 dark:text-zinc-950"
+                : "rounded-tl-lg bg-white dark:bg-zinc-800",
+            )}>
+              <p className="mb-0.5 text-[11px] font-medium opacity-70">
+                {m.author === "admin" ? "You (admin)" : `@${request.username}`} · {new Date(m.created_at).toLocaleString()}
+              </p>
+              <p className="whitespace-pre-wrap">{m.body}</p>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      <form onSubmit={reply} className="flex items-end gap-2">
+        <textarea
+          rows={2}
+          value={draft}
+          onChange={(e) => setDraft(e.target.value)}
+          placeholder="Reply (emailed to the requester)…"
+          aria-label="Reply to requester"
+          className="max-h-32 flex-1 resize-none rounded-2xl border border-stone-200 bg-white px-3.5 py-2.5 text-sm outline-none transition placeholder:text-stone-400 focus:border-accent-500/60 dark:border-zinc-700 dark:bg-zinc-900 dark:placeholder:text-zinc-500"
+        />
+        <button
+          type="submit"
+          disabled={!draft.trim() || busy}
+          aria-label="Send reply"
+          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"
+        >
+          {busy ? <Spinner size={15} /> : <SendHorizontal size={15} />}
+        </button>
+      </form>
+
+      {!closed ? (
+        <div className="flex flex-wrap items-end gap-2 rounded-2xl border border-stone-200 bg-white p-3 dark:border-zinc-700 dark:bg-zinc-900">
+          <div className="min-w-48 flex-1">
+            <Field label="Reason (emailed with the decision)">
+              <Input value={reason} onChange={(e) => setReason(e.target.value)} placeholder="Optional reason…" maxLength={500} />
+            </Field>
+          </div>
+          <div className="flex gap-2">
+            {request.status === "pending" && (
+              <Button size="sm" variant="secondary" disabled={busy} onClick={() => setStatus("reviewing")}>
+                <Search size={14} /> Reviewing
+              </Button>
+            )}
+            <Button size="sm" disabled={busy} onClick={() => setStatus("accepted")}>
+              <CheckCircle2 size={14} /> Accept
+            </Button>
+            <Button size="sm" variant="secondary" disabled={busy} onClick={() => setStatus("refused")} className="!text-red-600 dark:!text-red-400">
+              <XCircle size={14} /> Refuse
+            </Button>
+          </div>
+        </div>
+      ) : (
+        <p className="flex items-center gap-2 text-xs opacity-60">
+          <Clock size={13} /> Ticket closed ({STATUS_STYLE[request.status].label.toLowerCase()}).
+          {request.reason && <> Reason: <em>{request.reason}</em></>}
+        </p>
+      )}
+      {error && <p className="text-sm text-red-600 dark:text-red-400">{error}</p>}
+    </div>
+  );
+}

frontend/src/components/AdminCenter.tsx

@@ -1,11 +1,12 @@
 import { useEffect, useState } from "react";
-import { ArrowLeft, LayoutDashboard, Mail, ShieldAlert, SlidersHorizontal, Users } from "lucide-react";
+import { ArrowLeft, Inbox, LayoutDashboard, Mail, ShieldAlert, SlidersHorizontal, Users } from "lucide-react";
 import { api } from "../lib/api.ts";
 import { AdminPanel } from "./AdminPanel.tsx";
-import { LoadingScreen, Logo, Spinner, Switch } from "./ui.tsx";
+import { AccessRequestsPanel } from "./AccessRequests.tsx";
+import { FlowerMark, LoadingScreen, Spinner, Switch } from "./ui.tsx";
 import { cn } from "../lib/cn.ts";
 
-type Tab = "accounts" | "features" | "mail";
+type Tab = "accounts" | "access" | "features" | "mail";
 
 function applyTheme(theme: string) {
   const root = document.documentElement;
@@ -16,6 +17,7 @@ function applyTheme(theme: string) {
 
 const TABS: { id: Tab; label: string; icon: typeof Users }[] = [
   { id: "accounts", label: "Accounts", icon: Users },
+  { id: "access", label: "Access", icon: Inbox },
   { id: "features", label: "Features", icon: SlidersHorizontal },
   { id: "mail", label: "Mail", icon: Mail },
 ];
@@ -80,7 +82,7 @@ export function AdminCenter() {
           <a href="/" aria-label="Back to chat" className="rounded-full p-2 transition hover:bg-stone-200/60 dark:hover:bg-zinc-800">
             <ArrowLeft size={18} />
           </a>
-          <Logo size={32} className="rounded-xl" />
+          <FlowerMark size={32} />
           <h1 className="flex items-center gap-2 text-lg font-bold tracking-tight">
             <LayoutDashboard size={18} className="text-accent-600 dark:text-accent-400" />
             Admin Center
@@ -116,6 +118,12 @@ export function AdminCenter() {
           </section>
         )}
 
+        {tab === "access" && (
+          <section className="rounded-3xl border border-stone-200/70 bg-white p-5 shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
+            <AccessRequestsPanel />
+          </section>
+        )}
+
         {tab === "features" && (
           <section className="space-y-3">
             <div className="flex items-center gap-4 rounded-3xl border border-stone-200/70 bg-white p-5 shadow-sm dark:border-zinc-800 dark:bg-zinc-900">

frontend/src/components/AdminPanel.tsx

@@ -1,8 +1,8 @@
 import { useEffect, useState, type FC, type ReactNode } from "react";
-import { Bot, Download, HardDrive, KeyRound, Pencil, RefreshCw, Trash2, UserPlus, Users } from "lucide-react";
+import { ArrowUpDown, Bot, ChevronLeft, ChevronRight, Download, Filter, HardDrive, KeyRound, Pencil, RefreshCw, Search, Trash2, UserPlus, Users } from "lucide-react";
 import { api } from "../lib/api.ts";
 import type { DriverModel, User } from "../lib/types.ts";
-import { Avatar, Button, ConfirmDialog, CopyButton, Field, Input, Modal, Picker, Spinner } from "./ui.tsx";
+import { Avatar, Button, ConfirmDialog, CopyButton, Field, IconButton, Input, Modal, Picker, Spinner } from "./ui.tsx";
 
 /** Curated Ollama library catalog (admin downloads only). */
 const OLLAMA_CATALOG: { name: string; desc: string; sizes: string[] }[] = [
@@ -187,6 +187,15 @@ export function AdminPanel({ open, onClose, bare }: { open: boolean; onClose: ()
   const [deleteTarget, setDeleteTarget] = useState<User | null>(null);
   const [editTarget, setEditTarget] = useState<User | null>(null);
   const [modelsOpen, setModelsOpen] = useState(false);
+  // Listing: search + sort + filter + pagination (server-side).
+  const [q, setQ] = useState("");
+  const [debouncedQ, setDebouncedQ] = useState("");
+  const [sort, setSort] = useState("newest");
+  const [filter, setFilter] = useState("all");
+  const [page, setPage] = useState(1);
+  const [total, setTotal] = useState(0);
+  const [pages, setPages] = useState(1);
+  const PER_PAGE = 8;
 
   // create form
   const [username, setUsername] = useState("");
@@ -197,8 +206,11 @@ export function AdminPanel({ open, onClose, bare }: { open: boolean; onClose: ()
     setBusy(true);
     setError("");
     try {
-      const res = await api.adminList();
+      const res = await api.adminList({ q: debouncedQ || undefined, sort, filter, page, per: PER_PAGE });
       setUsers(res.users);
+      setTotal(res.total);
+      setPages(res.pages);
+      if (res.page !== page) setPage(res.page);
     } catch (err) {
       setError(err instanceof Error ? err.message : "Load failed");
     } finally {
@@ -215,6 +227,20 @@ export function AdminPanel({ open, onClose, bare }: { open: boolean; onClose: ()
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [open, bare ]);
 
+  // Debounced search (resets to first page); sort/filter reload too.
+  useEffect(() => {
+    const t = setTimeout(() => {
+      setDebouncedQ(q);
+      setPage(1);
+    }, 300);
+    return () => clearTimeout(t);
+  }, [q ]);
+
+  useEffect(() => {
+    if (open || bare) refresh();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [debouncedQ, sort, filter, page ]);
+
   async function create(e: React.FormEvent) {
     e.preventDefault();
     setError("");
@@ -299,6 +325,38 @@ export function AdminPanel({ open, onClose, bare }: { open: boolean; onClose: ()
           </form>
         )}
 
+        <div className="mb-3 flex flex-wrap items-center gap-2">
+          <div className="relative min-w-40 flex-1">
+            <Search size={15} className="pointer-events-none absolute left-3.5 top-1/2 -translate-y-1/2 opacity-40" />
+            <Input value={q} onChange={(e) => setQ(e.target.value)} placeholder="Search accounts…" aria-label="Search accounts" className="pl-10" />
+          </div>
+          <Picker
+            ariaLabel="Sort accounts"
+            icon={ArrowUpDown}
+            value={sort}
+            onChange={(v) => { setSort(v); setPage(1); }}
+            align="right"
+            options={[
+              { value: "newest", label: "Newest first" },
+              { value: "oldest", label: "Oldest first" },
+              { value: "az", label: "A → Z" },
+              { value: "za", label: "Z → A" },
+            ]}
+          />
+          <Picker
+            ariaLabel="Filter accounts"
+            icon={Filter}
+            value={filter}
+            onChange={(v) => { setFilter(v); setPage(1); }}
+            align="right"
+            options={[
+              { value: "all", label: "All accounts" },
+              { value: "with-email", label: "With recovery email" },
+              { value: "no-email", label: "No recovery email" },
+            ]}
+          />
+        </div>
+
         {busy ? (
           <p className="flex items-center gap-2 text-sm opacity-60"><Spinner size={15} /> Loading…</p>
         ) : (
@@ -308,7 +366,7 @@ export function AdminPanel({ open, onClose, bare }: { open: boolean; onClose: ()
                 <Avatar name={u.displayName} url={u.avatarUrl} size={36} />
                 <div className="min-w-0 flex-1">
                   <p className="truncate text-sm font-medium">{u.displayName} <span className="font-normal opacity-50">@{u.username}</span></p>
-                  <p className="text-xs opacity-50">theme: {u.theme} · since {new Date(u.createdAt).toLocaleDateString()}</p>
+                  <p className="truncate text-xs opacity-50">{u.email || "no recovery email"} · {new Date(u.createdAt).toLocaleDateString()}</p>
                 </div>
                 {!u.isAdmin && (
                   <div className="flex shrink-0 gap-1">
@@ -321,6 +379,27 @@ export function AdminPanel({ open, onClose, bare }: { open: boolean; onClose: ()
             ))}
           </ul>
         )}
+        <div className="mt-3 flex items-center justify-between gap-2 text-sm">
+          <span className="opacity-60">{total} account{total === 1 ? "" : "s"} · page {page} of {pages}</span>
+          {pages > 1 && (
+            <div className="flex gap-2.5">
+              <IconButton
+                title="Previous page"
+                disabled={page <= 1}
+                onClick={() => setPage((p) => Math.max(1, p - 1))}
+              >
+                <ChevronLeft size={16} />
+              </IconButton>
+              <IconButton
+                title="Next page"
+                disabled={page >= pages}
+                onClick={() => setPage((p) => p + 1)}
+              >
+                <ChevronRight size={16} />
+              </IconButton>
+            </div>
+          )}
+        </div>
       </Shell>
 
       <ConfirmDialog

frontend/src/components/Chat.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState } from "react";
 import { BookOpen, Bot, Cpu, FileText, Menu, PanelLeftOpen, Paperclip, ScanText, SendHorizontal, Share2, User as UserIcon, X } from "lucide-react";
 import type { Attachment, ChatMessage, Conversation, DriverModel, User } from "../lib/types.ts";
-import { Avatar, IconButton, LOGO_URL, Logo, Picker, type PickerGroup, Spinner } from "./ui.tsx";
+import { AssistantAvatar, Avatar, FlowerMark, IconButton, Picker, type PickerGroup, Spinner } from "./ui.tsx";
 import { Markdown } from "./Markdown.tsx";
 import { cn } from "../lib/cn.ts";
 import { useFeatures } from "../lib/features.ts";
@@ -10,7 +10,9 @@ function MessageBubble({ msg, authorAvatar, authorName }: { msg: ChatMessage; au
   const isUser = msg.role === "user";
   return (
     <div className={cn("flex gap-3", isUser && "flex-row-reverse")}>
-      <Avatar name={authorName} url={isUser ? authorAvatar : LOGO_URL} size={32} />
+      {isUser
+        ? <Avatar name={authorName} url={authorAvatar} size={32} />
+        : <AssistantAvatar size={32} />}
       <div className={cn("min-w-0 max-w-[85%]", isUser && "flex flex-col items-end")}>
         <div className="mb-1 flex items-center gap-1.5 text-xs opacity-60">
           {isUser ? <UserIcon size={12} /> : <Bot size={12} />}
@@ -123,7 +125,7 @@ export function Chat({
           </span>
         )}
         <span className="hidden items-center gap-2 font-semibold sm:flex">
-          <Logo size={24} className="rounded-lg" />
+          <FlowerMark size={24} dynamic={false} />
           {conv?.title || "New chat"}
         </span>
         {conv?.topic && (
@@ -151,7 +153,7 @@ export function Chat({
         <div className="mx-auto w-full max-w-3xl space-y-5">
           {messages.length === 0 && !streaming && (
             <div className="py-16 text-center">
-              <Logo size={56} className="mx-auto mb-4 rounded-[1.3rem] shadow-lg shadow-red-900/10" />
+              <FlowerMark size={56} className="mx-auto mb-4" />
               <h2 className="text-2xl font-bold tracking-tight">How can I help, {user.displayName.split(" ")[0]}?</h2>
               <p className="mt-1 text-sm opacity-60">Pick a model, then type below. Markdown is supported.</p>
             </div>
@@ -161,7 +163,7 @@ export function Chat({
           ))}
           {streaming !== "" && (
             <div className="flex gap-3">
-              <Avatar name="KisAssistant" url={LOGO_URL} size={32} />
+              <AssistantAvatar size={32} />
               <div className="min-w-0 max-w-[85%]">
                 <div className="mb-1 text-xs opacity-60">KisAssistant</div>
                 <div className="rounded-3xl rounded-tl-lg border border-stone-200/70 bg-white px-5 py-3.5 shadow-sm dark:border-zinc-800 dark:bg-zinc-900">

frontend/src/components/Login.tsx

@@ -1,9 +1,10 @@
 import { useEffect, useState } from "react";
-import { ArrowRight, KeyRound, ShieldCheck, User, UserPlus, Zap } from "lucide-react";
+import { ArrowRight, KeyRound, MessageSquareText, ShieldCheck, User, UserPlus, Zap } from "lucide-react";
 import { api, setToken } from "../lib/api.ts";
 import type { User as UserType } from "../lib/types.ts";
-import { Button, Input, Logo, Spinner } from "./ui.tsx";
+import { Button, FlowerMark, Input, Spinner } from "./ui.tsx";
 import { RecoverDialog, RegisterDialog } from "./dialogs.tsx";
+import { AccessRequestModal } from "./ReviewPage.tsx";
 
 const PERKS = [
   { icon: ShieldCheck, text: "Private by design — no cookies, no tracking" },
@@ -20,6 +21,7 @@ export function Login({ onLogin }: { onLogin: (user: UserType) => void }) {
   const [recoveryFrom, setRecoveryFrom] = useState<string | undefined>(undefined);
   const [registerOpen, setRegisterOpen] = useState(false);
   const [registrationOn, setRegistrationOn] = useState(false);
+  const [requestOpen, setRequestOpen] = useState(false);
 
   useEffect(() => {
     api.methods().then((m) => {
@@ -50,7 +52,7 @@ export function Login({ onLogin }: { onLogin: (user: UserType) => void }) {
       <div className="w-full max-w-sm">
         <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" />
+            <FlowerMark size={68} className="mb-4 drop-shadow-lg" />
             <h1 className="text-2xl font-bold tracking-tight">Welcome back</h1>
             <p className="mt-1 text-sm opacity-60">Sign in to KisAssistant to continue</p>
           </div>
@@ -113,6 +115,20 @@ export function Login({ onLogin }: { onLogin: (user: UserType) => void }) {
             onClose={() => setRegisterOpen(false)}
             onDone={(u, k) => { setUsername(u); setKey(k); }}
           />
+          {/* Wishlist path: when open registration is off, visitors can still
+              reserve a username and plead their case; an admin triages it. */}
+          {!registrationOn && (
+            <Button
+              variant="secondary"
+              size="lg"
+              className="mt-3 w-full"
+              onClick={() => setRequestOpen(true)}
+            >
+              <MessageSquareText size={16} />
+              Request access
+            </Button>
+          )}
+          <AccessRequestModal open={requestOpen} onClose={() => setRequestOpen(false)} />
           {recoveryOn && (
             <button onClick={() => setRecoverOpen(true)} className="mt-3 w-full text-center text-sm opacity-60 transition hover:opacity-100 hover:underline">
               Forgot your access key?

frontend/src/components/ResetPage.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
 import { KeyRound, MailWarning, Sparkles } from "lucide-react";
 import { api } from "../lib/api.ts";
-import { Button, CopyButton, Logo, Spinner } from "./ui.tsx";
+import { Button, CopyButton, FlowerMark, Spinner } from "./ui.tsx";
 
 type State =
   | { kind: "loading" }
@@ -34,7 +34,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-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" />
+        <FlowerMark size={56} className="mx-auto mb-4" />
         {state.kind === "loading" && <p className="flex items-center justify-center gap-2 text-sm opacity-60"><Spinner size={15} /> Checking link…</p>}
         {state.kind === "invalid" && (
           <div className="space-y-3">

frontend/src/components/ReviewPage.tsx

@@ -0,0 +1,246 @@
+import { useEffect, useState } from "react";
+import { CheckCircle2, Clock, MailWarning, MessageSquareText, Search, SendHorizontal, XCircle } from "lucide-react";
+import { api, type AccessMessage, type AccessRequest } from "../lib/api.ts";
+import { Button, CopyButton, Field, FlowerMark, Input, Modal, Spinner } from "./ui.tsx";
+import { cn } from "../lib/cn.ts";
+
+const STATUS_STYLE: Record<AccessRequest["status"], { label: string; cls: string; icon: typeof Clock }> = {
+  pending: { label: "Pending review", cls: "bg-amber-500/10 text-amber-700 dark:text-amber-400", icon: Clock },
+  reviewing: { label: "Under review", cls: "bg-sky-500/10 text-sky-700 dark:text-sky-400", icon: Search },
+  accepted: { label: "Accepted", cls: "bg-accent-500/10 text-accent-700 dark:text-accent-400", icon: CheckCircle2 },
+  refused: { label: "Refused", cls: "bg-red-500/10 text-red-600 dark:text-red-400", icon: XCircle },
+};
+
+function StatusBadge({ status }: { status: AccessRequest["status"] }) {
+  const s = STATUS_STYLE[status];
+  return (
+    <span className={cn("inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-medium", s.cls)}>
+      <s.icon size={13} />
+      {s.label}
+    </span>
+  );
+}
+
+/** Public ticket page: /review/:id — argue your case, follow the decision. */
+export function ReviewPage({ ticketId }: { ticketId: string }) {
+  const [request, setRequest] = useState<AccessRequest | null>(null);
+  const [messages, setMessages] = useState<AccessMessage[]>([]);
+  const [draft, setDraft] = useState("");
+  const [loading, setLoading] = useState(true);
+  const [invalid, setInvalid] = useState(false);
+  const [sending, setSending] = useState(false);
+  const [error, setError] = useState("");
+
+  async function load() {
+    try {
+      const res = await api.accessTicket(ticketId);
+      setRequest(res.request);
+      setMessages(res.messages);
+    } catch {
+      setInvalid(true);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  useEffect(() => {
+    load();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [ticketId]);
+
+  async function send(e: React.FormEvent) {
+    e.preventDefault();
+    const body = draft.trim();
+    if (!body || sending) return;
+    setSending(true);
+    setError("");
+    try {
+      const res = await api.accessReply(ticketId, body);
+      setMessages((prev) => [...prev, res.message]);
+      setDraft("");
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Send failed");
+    } finally {
+      setSending(false);
+    }
+  }
+
+  const closed = request?.status === "accepted" || request?.status === "refused";
+
+  return (
+    <div className="grid min-h-full place-items-center bg-gradient-to-br from-stone-100 via-stone-50 to-accent-100/60 p-4 dark:from-zinc-950 dark:via-zinc-950 dark:to-accent-950/40 sm:p-6">
+      <div className="w-full max-w-xl rounded-[2rem] border border-white/60 bg-white/80 p-6 shadow-2xl backdrop-blur-xl dark:border-zinc-700/60 dark:bg-zinc-900/80 sm:p-8">
+        <FlowerMark size={48} className="mx-auto mb-3" />
+        <h1 className="text-center font-serif text-2xl font-bold tracking-tight">Access request</h1>
+
+        {loading && <p className="mt-4 flex items-center justify-center gap-2 text-sm opacity-60"><Spinner size={15} /> Loading ticket…</p>}
+
+        {invalid && (
+          <div className="mt-4 space-y-3 text-center">
+            <p className="flex items-center justify-center gap-2 font-semibold"><MailWarning size={18} className="text-red-500" /> Ticket not found</p>
+            <p className="text-sm opacity-70">This link is unknown. Check the URL from your email, or file a new request from the login page.</p>
+            <Button size="sm" onClick={() => (window.location.href = "/")}>Back to login</Button>
+          </div>
+        )}
+
+        {request && (
+          <div className="mt-4 space-y-4">
+            <div className="flex flex-wrap items-center justify-center gap-2">
+              <StatusBadge status={request.status} />
+              <span className="text-sm opacity-70">@{request.username}</span>
+            </div>
+            {request.reason && (
+              <p className="rounded-2xl bg-stone-100 px-4 py-2.5 text-center text-sm dark:bg-zinc-800">
+                <span className="font-medium">Admin note: </span>{request.reason}
+              </p>
+            )}
+            {request.status === "accepted" && (
+              <p className="rounded-2xl bg-accent-500/10 px-4 py-2.5 text-center text-sm">
+                Your account was created — check your email for the access key, then log in.
+              </p>
+            )}
+
+            <div className="max-h-80 space-y-2.5 overflow-y-auto rounded-2xl border border-stone-200/70 p-3 dark:border-zinc-800">
+              {messages.map((m) => (
+                <div key={m.id} className={cn("flex", m.author === "admin" ? "justify-start" : "justify-end")}>
+                  <div className={cn(
+                    "max-w-[85%] rounded-2xl px-3.5 py-2 text-sm",
+                    m.author === "admin"
+                      ? "rounded-tl-lg bg-stone-200/70 dark:bg-zinc-800"
+                      : "rounded-tr-lg bg-accent-600 text-white dark:bg-accent-500 dark:text-zinc-950",
+                  )}>
+                    <p className="mb-0.5 text-[11px] font-medium opacity-70">{m.author === "admin" ? "Admin" : "You"}</p>
+                    <p className="whitespace-pre-wrap">{m.body}</p>
+                  </div>
+                </div>
+              ))}
+            </div>
+
+            {closed ? (
+              <p className="text-center text-xs opacity-60">
+                This ticket is closed. Replies by email are not read — if needed, file a new request.
+              </p>
+            ) : (
+              <form onSubmit={send} className="space-y-2">
+                <div className="flex items-end gap-2">
+                  <textarea
+                    rows={2}
+                    value={draft}
+                    onChange={(e) => setDraft(e.target.value)}
+                    placeholder="Argue your case…"
+                    aria-label="Reply to your ticket"
+                    className="max-h-40 flex-1 resize-none rounded-2xl border border-stone-200 bg-white px-3.5 py-2.5 text-sm outline-none transition placeholder:text-stone-400 focus:border-accent-500/60 dark:border-zinc-700 dark:bg-zinc-900 dark:placeholder:text-zinc-500"
+                  />
+                  <button
+                    type="submit"
+                    disabled={!draft.trim() || sending}
+                    aria-label="Send reply"
+                    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"
+                  >
+                    {sending ? <Spinner size={16} /> : <SendHorizontal size={16} />}
+                  </button>
+                </div>
+                {error && <p className="text-sm text-red-600 dark:text-red-400">{error}</p>}
+                <p className="text-center text-xs opacity-60">
+                  Email notifications are one-way — always reply here, not by email.
+                </p>
+              </form>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+/** Wishlist form: reserve a username + email with a motivation message. */
+export function AccessRequestModal({ open, onClose }: { open: boolean; onClose: () => void }) {
+  const [username, setUsername] = useState("");
+  const [email, setEmail] = useState("");
+  const [message, setMessage] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState("");
+  const [done, setDone] = useState<{ reviewUrl: string; username: string } | null>(null);
+
+  useEffect(() => {
+    if (open) {
+      setUsername("");
+      setEmail("");
+      setMessage("");
+      setError("");
+      setDone(null);
+    }
+  }, [open ]);
+
+  async function submit(e: React.FormEvent) {
+    e.preventDefault();
+    if (busy) return;
+    setBusy(true);
+    setError("");
+    try {
+      const res = await api.accessRequest({
+        username: username.trim().toLowerCase(),
+        email: email.trim(),
+        message: message.trim(),
+      });
+      setDone({ reviewUrl: res.reviewUrl, username: res.request.username });
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Request failed");
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <Modal open={open} onClose={onClose} title="Request access" icon={MessageSquareText}>
+      {done ? (
+        <div className="space-y-4 text-center">
+          <p className="flex items-center justify-center gap-2 font-semibold text-accent-700 dark:text-accent-400">
+            <CheckCircle2 size={18} /> Request received
+          </p>
+          <p className="text-sm opacity-70">
+            @{done.username} is reserved for you while an admin reviews it.
+            A confirmation email with your personal ticket link is on its way.
+          </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-left text-xs dark:bg-zinc-800">{done.reviewUrl}</code>
+            <CopyButton text={done.reviewUrl} label="Copy link" />
+          </div>
+          <Button size="sm" className="w-full" onClick={() => (window.location.href = done.reviewUrl.replace(window.location.origin, ""))}>
+            Open my ticket
+          </Button>
+        </div>
+      ) : (
+        <form onSubmit={submit} className="space-y-4">
+          <p className="text-sm opacity-70">
+            Reserve a username and tell us why you want in. An admin reviews every request —
+            you follow the discussion on your personal ticket page and by email.
+          </p>
+          <Field label="Username">
+            <Input value={username} onChange={(e) => setUsername(e.target.value)} placeholder="alice" required minLength={2} maxLength={32} />
+          </Field>
+          <Field label="Email" hint="Required — status updates and ticket replies land here.">
+            <Input value={email} onChange={(e) => setEmail(e.target.value)} placeholder="[email protected]" inputMode="email" required />
+          </Field>
+          <Field label="Why should you get access?" hint="10+ characters. This starts your ticket thread.">
+            <textarea
+              value={message}
+              onChange={(e) => setMessage(e.target.value)}
+              placeholder="I want to…"
+              required
+              minLength={10}
+              maxLength={2000}
+              rows={4}
+              className="max-h-60 w-full resize-y rounded-2xl border border-stone-200 bg-white px-3.5 py-2.5 text-sm outline-none transition placeholder:text-stone-400 focus:border-accent-500/60 dark:border-zinc-700 dark:bg-zinc-900 dark:placeholder:text-zinc-500"
+            />
+          </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} /> : "Send request"}</Button>
+          </div>
+        </form>
+      )}
+    </Modal>
+  );
+}

frontend/src/components/SharePage.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
 import { Bot, Globe, User as UserIcon } from "lucide-react";
 import { api } from "../lib/api.ts";
 import type { SharedChat } from "../lib/types.ts";
-import { Avatar, LOGO_URL, Logo } from "./ui.tsx";
+import { AssistantAvatar, Avatar, FlowerMark } from "./ui.tsx";
 import { Markdown } from "./Markdown.tsx";
 
 export function SharePage({ publicId }: { publicId: string }) {
@@ -19,7 +19,7 @@ export function SharePage({ publicId }: { publicId: string }) {
     <div className="min-h-full">
       <header className="border-b border-stone-200/70 bg-white/70 backdrop-blur dark:border-zinc-800 dark:bg-zinc-900/70">
         <div className="mx-auto flex w-full max-w-3xl items-center gap-2.5 px-4 py-3">
-          <Logo size={36} className="rounded-2xl" />
+          <FlowerMark size={36} dynamic={false} />
           <div className="min-w-0 flex-1">
             <p className="truncate font-semibold">{chat?.title ?? "Shared chat"}</p>
             {chat && (
@@ -39,7 +39,9 @@ export function SharePage({ publicId }: { publicId: string }) {
         {!chat && !error && <p className="py-16 text-center text-sm opacity-60">Loading shared chat…</p>}
         {chat?.messages.map((m, i) => (
           <div key={i} className="flex gap-3">
-            <Avatar name={m.role === "user" ? chat.authorName : "KisAssistant"} url={m.role === "user" ? undefined : LOGO_URL} size={32} />
+            {m.role === "user"
+              ? <Avatar name={chat.authorName} size={32} />
+              : <AssistantAvatar size={32} />}
             <div className="min-w-0 max-w-[90%] flex-1">
               <div className="mb-1 flex items-center gap-1.5 text-xs opacity-60">
                 {m.role === "user" ? <UserIcon size={12} /> : <Bot size={12} />}

frontend/src/components/Sidebar.tsx

@@ -271,7 +271,7 @@ export function Sidebar({
       )}
 
       <div className="space-y-2 rounded-2xl border border-stone-200/70 bg-white p-2.5 dark:border-zinc-800 dark:bg-zinc-900">
-        <button onClick={onOpenSettings} className="flex w-full items-center gap-2.5 rounded-xl p-1.5 text-left transition hover:bg-stone-100 dark:hover:bg-zinc-800">
+        <button onClick={onOpenSettings} className="m-0.5 flex w-[calc(100%-4px)] items-center gap-2.5 rounded-xl p-1.5 text-left transition hover:bg-accent-600/10" title="Profile & settings">
           <Avatar name={user.displayName} url={user.avatarUrl} size={34} />
           <span className="min-w-0 flex-1">
             <span className="block truncate text-sm font-medium">{user.displayName}</span>

frontend/src/components/dialogs.tsx

@@ -357,13 +357,22 @@ export function SettingsModal({
   const [search, setSearch] = useState("");
   const fileRef = useRef<HTMLInputElement>(null);
 
-  // Section search: each section lists keywords; a section shows when the
-  // query is empty or matches its title/keywords.
-  function show(...keywords: string[]): boolean {
+  // Two-column settings: categories on the left, content on the right.
+  // Searching filters the category list and jumps to the first match.
+  const CATS = [
+    { id: "profile", title: "Profile", icon: UserIcon, keywords: ["profile", "avatar", "picture", "photo", "name", "display", "email", "account"] },
+    { id: "appearance", title: "Appearance", icon: Palette, keywords: ["appearance", "theme", "dark", "light", "color", "colour", "accent", "palette"] },
+    { id: "features", title: "Features", icon: Sparkles, keywords: ["features", "thinking", "attachments", "search", "deep", "upload", "ocr", "capabilities", "enable", "disable"] },
+  ] as const;
+  type CatId = (typeof CATS)[number]["id"];
+  const [cat, setCat] = useState<CatId>("profile");
+
+  const visibleCats = CATS.filter((c) => {
     const q = search.trim().toLowerCase();
     if (!q) return true;
-    return keywords.some((k) => k.toLowerCase().includes(q));
-  }
+    return c.title.toLowerCase().includes(q) || c.keywords.some((k) => k.includes(q));
+  });
+  const activeCat = visibleCats.some((c) => c.id === cat) ? cat : (visibleCats[0]?.id ?? "profile");
 
   useEffect(() => {
     if (user) {
@@ -442,9 +451,31 @@ export function SettingsModal({
           )}
         </div>
 
-        {show("profile", "avatar", "picture", "photo", "name", "display", "email", "account") && (
-          <SettingSection icon={UserIcon} title="Profile">
-            <div className="flex items-center gap-3">
+        <div className="flex flex-col gap-4 sm:flex-row">
+          <nav aria-label="Settings categories" className="flex shrink-0 gap-1.5 overflow-x-auto sm:w-44 sm:flex-col">
+            {visibleCats.map((c) => (
+              <button
+                key={c.id}
+                type="button"
+                onClick={() => setCat(c.id)}
+                aria-current={activeCat === c.id}
+                className={cn(
+                  "flex shrink-0 items-center gap-2.5 rounded-2xl px-3.5 py-2.5 text-sm transition",
+                  activeCat === c.id
+                    ? "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",
+                )}
+              >
+                <c.icon size={16} className="opacity-70" />
+                {c.title}
+              </button>
+            ))}
+          </nav>
+
+          <div className="min-w-0 flex-1 space-y-4">
+            {activeCat === "profile" && (
+              <SettingsPane>
+                <div className="flex items-center gap-3">
               <Avatar name={displayName || "?"} url={avatarUrl || undefined} size={52} />
               <div className="min-w-0 flex-1">
                 <p className="truncate text-sm font-medium">{displayName || "…"}</p>
@@ -501,11 +532,11 @@ export function SettingsModal({
             <Field label="Recovery email" hint="Optional. Used only to send you a fresh access key if you lose it.">
               <Input value={email} onChange={(e) => setEmail(e.target.value)} placeholder="[email protected]" inputMode="email" />
             </Field>
-          </SettingSection>
-        )}
+              </SettingsPane>
+            )}
 
-        {show("appearance", "theme", "dark", "light", "color", "colour", "accent", "palette") && (
-          <SettingSection icon={Palette} title="Appearance">
+            {activeCat === "appearance" && (
+              <SettingsPane>
             <Field label="Theme">
               <Picker
                 ariaLabel="Theme"
@@ -520,18 +551,19 @@ export function SettingsModal({
               />
             </Field>
             <AccentSection />
-          </SettingSection>
-        )}
+              </SettingsPane>
+            )}
 
-        {show("features", "thinking", "attachments", "search", "deep", "upload", "ocr", "capabilities", "enable", "disable") && (
-          <SettingSection icon={Sparkles} title="Features" hint="Turn composer capabilities on or off. Applied instantly, saved on this device.">
+            {activeCat === "features" && (
+              <SettingsPane>
+            <p className="-mb-2 text-xs opacity-60">Turn composer capabilities on or off. Applied instantly, saved on this device.</p>
             <FeaturesSection />
-          </SettingSection>
-        )}
+              </SettingsPane>
+            )}
+          </div>
+        </div>
 
-        {search.trim() && !show("profile", "avatar", "picture", "photo", "name", "display", "email", "account")
-          && !show("appearance", "theme", "dark", "light", "color", "colour", "accent", "palette")
-          && !show("features", "thinking", "attachments", "search", "deep", "upload", "ocr", "capabilities", "enable", "disable") && (
+        {search.trim() && visibleCats.length === 0 && (
           <p className="px-2 py-4 text-center text-sm opacity-50">No settings match “{search.trim()}”.</p>
         )}
 
@@ -545,27 +577,14 @@ export function SettingsModal({
   );
 }
 
-/* ---------- Settings sections ---------- */
+/* ---------- Settings pane (unified glass card for every category) ---------- */
 
-function SettingSection({
-  icon: Icon,
-  title,
-  hint,
-  children,
-}: {
-  icon: typeof Settings2;
-  title: string;
-  hint?: string;
-  children: React.ReactNode;
-}) {
+function SettingsPane({ children }: { children: React.ReactNode }) {
+  // Single unified surface for every settings section: flat matte card, no
+  // blur, no gradient — identical gloss on profile, appearance and features.
   return (
-    <section className="rounded-3xl border border-stone-200/70 p-4 dark:border-zinc-800">
-      <h3 className="mb-1 flex items-center gap-2 text-sm font-semibold">
-        <Icon size={15} className="opacity-60" />
-        {title}
-      </h3>
-      {hint && <p className="mb-3 text-xs opacity-60">{hint}</p>}
-      <div className="mt-3 space-y-4">{children}</div>
+    <section className="space-y-4 rounded-3xl border border-stone-200/70 bg-stone-50 p-4 dark:border-zinc-800 dark:bg-zinc-800/60">
+      {children}
     </section>
   );
 }

frontend/src/components/ui.tsx

@@ -455,20 +455,52 @@ export function Avatar({ name, url, size = 36 }: { name: string; url?: string; s
   );
 }
 
-/* ---------- Brand logo ---------- */
+/* ---------- Brand logo (single declaration — import anywhere) ---------- */
 
-export const LOGO_URL = "/logo.jpg";
-
-export function Logo({ size = 36, className }: { size?: number; className?: string }) {
+/**
+ * The KisAssistant flower mark. Petals follow the runtime accent color,
+ * heart stays amber — same artwork as the loading screen and favicon.
+ * `dynamic` controls the bloom animation: pass false for a static,
+ * full-bloom mark (e.g. thread bars and headers).
+ */
+export function FlowerMark({ size, className, dynamic = true }: { size?: number; className?: string; dynamic?: boolean }) {
+  const petals = [0, 60, 120, 180, 240, 300];
   return (
-    <img
-      src={LOGO_URL}
-      alt="KisAssistant logo"
+    <svg
       width={size}
       height={size}
-      className={cn("shrink-0 object-cover", className)}
+      viewBox="0 0 100 100"
+      className={cn("shrink-0", className)}
+      role="img"
+      aria-label="KisAssistant"
+    >
+      {petals.map((r, i) => (
+        <g key={r} transform={`rotate(${r} 50 50)`}>
+          <ellipse
+            cx="50"
+            cy="25"
+            rx="13"
+            ry="21"
+            className={dynamic ? "flower-petal fill-accent-500" : "fill-accent-500"}
+            style={dynamic ? { animationDelay: `${i * 0.22}s` } : undefined}
+          />
+        </g>
+      ))}
+      <circle cx="50" cy="50" r="10" className={dynamic ? "flower-core fill-amber-400" : "fill-amber-400"} />
+    </svg>
+  );
+}
+
+/** Assistant identity: flower mark on a soft circle (message avatars, headers). */
+export function AssistantAvatar({ size = 32 }: { size?: number }) {
+  return (
+    <span
+      className="grid shrink-0 place-items-center rounded-full bg-accent-600/10"
       style={{ width: size, height: size }}
-    />
+      aria-label="KisAssistant"
+    >
+      <FlowerMark size={Math.round(size * 0.78)} />
+    </span>
   );
 }
 
@@ -542,18 +574,10 @@ export function CopyButton({ text, label = "Copy" }: { text: string; label?: str
 
 /** Animated blooming flower shown while the app boots (themed, mobile-safe). */
 export function LoadingScreen() {
-  const petals = [0, 60, 120, 180, 240, 300];
   return (
-    <div className="grid min-h-full place-items-center" role="status" aria-label="Loading KisAssistant">
+    <div className="loading-enter grid min-h-full place-items-center" role="status" aria-label="Loading KisAssistant">
       <div className="flex flex-col items-center gap-4 px-6 text-center">
-        <svg width="72" height="72" viewBox="0 0 100 100" className="h-16 w-16 sm:h-20 sm:w-20" aria-hidden="true">
-          {petals.map((r, i) => (
-            <g key={r} transform={`rotate(${r} 50 50)`}>
-              <ellipse cx="50" cy="25" rx="13" ry="21" className="flower-petal fill-accent-500" style={{ animationDelay: `${i * 0.22}s` }} />
-            </g>
-          ))}
-          <circle cx="50" cy="50" r="10" className="flower-core fill-accent-700 dark:fill-accent-400" />
-        </svg>
+        <FlowerMark className="h-16 w-16 sm:h-20 sm:w-20" />
         <p className="font-serif text-2xl font-bold tracking-tight">KisAssistant</p>
         <p className="loading-dots text-sm opacity-60">Preparing your chats</p>
       </div>

frontend/src/index.css

@@ -109,6 +109,15 @@ body {
   0%, 100% { transform: scale(0.85); }
   50% { transform: scale(1.15); }
 }
+/* Smooth entrance for full-screen loaders. */
+@keyframes loading-in {
+  from { opacity: 0; transform: scale(0.94); }
+  to { opacity: 1; transform: scale(1); }
+}
+.loading-enter {
+  animation: loading-in 0.45s ease-out both;
+}
+
 .loading-dots::after {
   content: "";
   animation: dots 1.4s steps(4) infinite;
@@ -120,6 +129,12 @@ body {
   75% { content: "..."; }
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .flower-petal, .flower-core, .loading-dots::after, .loading-enter, .typing-cursor::after {
+    animation: none;
+  }
+}
+
 /* Kill Chrome's yellow autofill background (login / password fields) */
 input:-webkit-autofill,
 input:-webkit-autofill:hover,

frontend/src/lib/api.ts

@@ -1,5 +1,26 @@
 import type { ChatMessage, Conversation, DriverModel, SharedChat, User } from "./types.ts";
 
+export type AccessStatus = "pending" | "reviewing" | "accepted" | "refused";
+
+export interface AccessRequest {
+  id: string;
+  username: string;
+  email: string;
+  message: string;
+  status: AccessStatus;
+  reason: string;
+  created_at: number;
+  updated_at: number;
+}
+
+export interface AccessMessage {
+  id: number;
+  request_id: string;
+  author: "user" | "admin";
+  body: string;
+  created_at: number;
+}
+
 const TOKEN_KEY = "kisassistant_token";
 
 export function getToken(): string | null {
@@ -58,7 +79,18 @@ export const api = {
   updateMe: (patch: { displayName?: string; avatarUrl?: string; theme?: string; email?: string }) =>
     req<{ user: User }>("/api/me", { method: "PATCH", body: JSON.stringify(patch) }),
 
-  adminList: () => req<{ users: User[] }>("/api/admin/users"),
+  adminList: (p: { q?: string; sort?: string; filter?: string; page?: number; per?: number } = {}) => {
+    const qs = new URLSearchParams();
+    if (p.q) qs.set("q", p.q);
+    if (p.sort) qs.set("sort", p.sort);
+    if (p.filter) qs.set("filter", p.filter);
+    if (p.page) qs.set("page", String(p.page));
+    if (p.per) qs.set("per", String(p.per));
+    const s = qs.toString();
+    return req<{ users: User[]; total: number; page: number; perPage: number; pages: number }>(
+      `/api/admin/users${s ? `?${s}` : ""}`,
+    );
+  },
   adminCreate: (u: { username: string; displayName?: string; avatarUrl?: string; theme?: string; email?: string }) =>
     req<{ user: User; key: string }>("/api/admin/users", { method: "POST", body: JSON.stringify(u) }),
   adminDelete: (id: string) => req<{ ok: boolean }>(`/api/admin/users/${id}`, { method: "DELETE" }),
@@ -90,7 +122,34 @@ export const api = {
 
   models: () => req<{ models: DriverModel[] }>("/api/models"),
 
-  /** Admin: stream an Ollama /api/pull as NDJSON progress events. */
+  /** Access-request wishlist (public, no auth). */
+  accessRequest: (a: { username: string; email: string; message: string }) =>
+    req<{ request: AccessRequest; reviewUrl: string }>("/api/access/request", {
+      method: "POST",
+      body: JSON.stringify(a),
+    }, false),
+  accessTicket: (id: string) =>
+    req<{ request: AccessRequest; messages: AccessMessage[] }>(`/api/access/ticket/${id}`, {}, false),
+  accessReply: (id: string, body: string) =>
+    req<{ message: AccessMessage }>(`/api/access/ticket/${id}/message`, {
+      method: "POST",
+      body: JSON.stringify({ body }),
+    }, false),
+
+  /** Admin: access-request triage. */
+  adminAccessList: () => req<{ requests: (AccessRequest & { message_count: number })[] }>("/api/admin/access"),
+  adminAccessGet: (id: string) =>
+    req<{ request: AccessRequest; messages: AccessMessage[] }>(`/api/admin/access/${id}`),
+  adminAccessPatch: (id: string, patch: { status: AccessStatus; reason?: string }) =>
+    req<{ request: AccessRequest; key?: string }>(`/api/admin/access/${id}`, {
+      method: "PATCH",
+      body: JSON.stringify(patch),
+    }),
+  adminAccessReply: (id: string, body: string) =>
+    req<{ message: AccessMessage }>(`/api/admin/access/${id}/message`, {
+      method: "POST",
+      body: JSON.stringify({ body }),
+    }),
   ollamaPull: async (
     name: string,
     onProgress: (p: { status?: string; digest?: string; total?: number; completed?: number; error?: string }) => void,