feat: allow user-configurable AI model selection with server-side validation

apps/web/src/components/user-menu.tsx

@@ -35,6 +35,13 @@ export default function UserMenu() {
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end" className="bg-card" sideOffset={16}>
         <DropdownMenuLabel>My Account</DropdownMenuLabel>
+        <DropdownMenuItem
+          onClick={() => {
+            navigate({ to: "/settings" });
+          }}
+        >
+          Settings
+        </DropdownMenuItem>
         <DropdownMenuItem
           onClick={async () => {
             await authClient.signOut();

apps/web/src/lib/tldraw/processing.ts

@@ -19,7 +19,7 @@ async function postBinary(url: string, file: File): Promise<{ text: string }> {
 async function postJson<TReq extends object, TRes>(url: string, body: TReq): Promise<TRes> {
   const res = await fetch(url, {
     method: "POST",
-    headers: { "Content-Type": "application/json" },
+    headers: { "Content-Type": "application/json", "x-ai-model": localStorage.getItem("aiModel") ?? "" },
     body: JSON.stringify(body),
   });
   if (!res.ok) throw new Error(`Request failed: ${res.status}`);

apps/web/src/routeTree.gen.ts

@@ -11,6 +11,7 @@
 import { Route as rootRouteImport } from './routes/__root'
 import { Route as VerifyEmailRouteImport } from './routes/verify-email'
 import { Route as SpaceRouteImport } from './routes/space'
+import { Route as SettingsRouteImport } from './routes/settings'
 import { Route as PasswordRouteImport } from './routes/password'
 import { Route as LoginRouteImport } from './routes/login'
 import { Route as DashboardRouteImport } from './routes/dashboard'
@@ -26,6 +27,11 @@ const SpaceRoute = SpaceRouteImport.update({
   path: '/space',
   getParentRoute: () => rootRouteImport,
 } as any)
+const SettingsRoute = SettingsRouteImport.update({
+  id: '/settings',
+  path: '/settings',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const PasswordRoute = PasswordRouteImport.update({
   id: '/password',
   path: '/password',
@@ -52,6 +58,7 @@ export interface FileRoutesByFullPath {
   '/dashboard': typeof DashboardRoute
   '/login': typeof LoginRoute
   '/password': typeof PasswordRoute
+  '/settings': typeof SettingsRoute
   '/space': typeof SpaceRoute
   '/verify-email': typeof VerifyEmailRoute
 }
@@ -60,6 +67,7 @@ export interface FileRoutesByTo {
   '/dashboard': typeof DashboardRoute
   '/login': typeof LoginRoute
   '/password': typeof PasswordRoute
+  '/settings': typeof SettingsRoute
   '/space': typeof SpaceRoute
   '/verify-email': typeof VerifyEmailRoute
 }
@@ -69,6 +77,7 @@ export interface FileRoutesById {
   '/dashboard': typeof DashboardRoute
   '/login': typeof LoginRoute
   '/password': typeof PasswordRoute
+  '/settings': typeof SettingsRoute
   '/space': typeof SpaceRoute
   '/verify-email': typeof VerifyEmailRoute
 }
@@ -79,16 +88,25 @@ export interface FileRouteTypes {
     | '/dashboard'
     | '/login'
     | '/password'
+    | '/settings'
     | '/space'
     | '/verify-email'
   fileRoutesByTo: FileRoutesByTo
-  to: '/' | '/dashboard' | '/login' | '/password' | '/space' | '/verify-email'
+  to:
+    | '/'
+    | '/dashboard'
+    | '/login'
+    | '/password'
+    | '/settings'
+    | '/space'
+    | '/verify-email'
   id:
     | '__root__'
     | '/'
     | '/dashboard'
     | '/login'
     | '/password'
+    | '/settings'
     | '/space'
     | '/verify-email'
   fileRoutesById: FileRoutesById
@@ -98,6 +116,7 @@ export interface RootRouteChildren {
   DashboardRoute: typeof DashboardRoute
   LoginRoute: typeof LoginRoute
   PasswordRoute: typeof PasswordRoute
+  SettingsRoute: typeof SettingsRoute
   SpaceRoute: typeof SpaceRoute
   VerifyEmailRoute: typeof VerifyEmailRoute
 }
@@ -118,6 +137,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof SpaceRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/settings': {
+      id: '/settings'
+      path: '/settings'
+      fullPath: '/settings'
+      preLoaderRoute: typeof SettingsRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/password': {
       id: '/password'
       path: '/password'
@@ -154,6 +180,7 @@ const rootRouteChildren: RootRouteChildren = {
   DashboardRoute: DashboardRoute,
   LoginRoute: LoginRoute,
   PasswordRoute: PasswordRoute,
+  SettingsRoute: SettingsRoute,
   SpaceRoute: SpaceRoute,
   VerifyEmailRoute: VerifyEmailRoute,
 }

apps/web/src/routes/settings.tsx

@@ -0,0 +1,161 @@
+import { useEffect, useMemo, useState } from "react";
+import { createFileRoute } from "@tanstack/react-router";
+import { useQueryClient } from "@tanstack/react-query";
+import { toast } from "sonner";
+import { authClient, account } from "@/lib/auth-client";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Label } from "@/components/ui/label";
+import { Button } from "@/components/ui/button";
+import { useQuery } from "@tanstack/react-query";
+import { trpc } from "@/utils/trpc";
+import { ALLOWED_MODELS } from "../../../server/src/lib/ai-models";
+
+
+export const Route = createFileRoute("/settings")({
+    component: SettingsPage,
+});
+
+function SettingsPage() {
+    const { data: session, isPending } = authClient.useSession();
+    const navigate = Route.useNavigate();
+    const queryClient = useQueryClient();
+
+    const [model, setModel] = useState<string>("");
+    const [isSaving, setIsSaving] = useState(false);
+
+    // Load allowed models from server
+    const allowed = useQuery(trpc.allowedModels.queryOptions());
+
+    // Derive account info safely
+    const accountName = session?.name ?? "";
+    const accountEmail = session?.email ?? "";
+    const emailVerified = Boolean(session?.emailVerification);
+
+    // Initial load of preference from Appwrite prefs or localStorage fallback
+    useEffect(() => {
+        if (!isPending && !session) {
+            navigate({ to: "/login" });
+            return;
+        }
+
+        const fromStorage = () => {
+            try {
+                return localStorage.getItem("aiModel") || "";
+            } catch {
+                return "";
+            }
+        };
+
+        async function loadPrefs() {
+            try {
+                if (!session) return;
+                // Appwrite stores arbitrary preferences per user
+                const me = await account.get();
+                const prefs = (me as any).prefs as Record<string, unknown> | undefined;
+                const existing = (prefs?.["aiModel"] as string) || fromStorage();
+                const defaultModel = allowed.data?.defaultModel || ALLOWED_MODELS[0];
+                setModel(existing || defaultModel);
+            } catch {
+                const defaultModel = allowed.data?.defaultModel || ALLOWED_MODELS[0];
+                setModel(fromStorage() || defaultModel);
+            }
+        }
+
+        loadPrefs();
+    }, [session, isPending, navigate, allowed.data?.defaultModel]);
+
+    const models = useMemo(() => {
+        const list = allowed.data?.models ?? ALLOWED_MODELS;
+        // Shape to id+name (use id as label by default)
+        return list.map((id) => ({ id, name: id }));
+    }, [allowed.data?.models]);
+
+    async function handleSave() {
+        if (!session) return;
+        setIsSaving(true);
+        try {
+            // Persist to Appwrite preferences
+            await account.updatePrefs({ aiModel: model } as any);
+            // Persist locally for quick header injection
+            try {
+                localStorage.setItem("aiModel", model);
+            } catch {
+                // ignore
+            }
+            // Invalidate session cache to refresh prefs quickly if needed
+            queryClient.invalidateQueries({ queryKey: ["session", "me"] });
+            toast.success("Preferences saved");
+        } catch (e: any) {
+            toast.error(e?.message ?? "Failed to save preferences");
+        } finally {
+            setIsSaving(false);
+        }
+    }
+
+    if (isPending) {
+        return <div className="container mx-auto max-w-5xl px-4 py-10">Loading...</div>;
+    }
+
+    return (
+        <div className="container mx-auto max-w-5xl px-4 py-10">
+            <div className="grid gap-6 md:grid-cols-2">
+                <Card className="border-border/60 bg-card/60 backdrop-blur">
+                    <CardHeader>
+                        <CardTitle>Account</CardTitle>
+                        <CardDescription>Your account information</CardDescription>
+                    </CardHeader>
+                    <CardContent className="space-y-3 text-sm">
+                        <div className="flex items-center justify-between">
+                            <span className="text-muted-foreground">Name</span>
+                            <span className="font-medium">{accountName || "—"}</span>
+                        </div>
+                        <div className="flex items-center justify-between">
+                            <span className="text-muted-foreground">Email</span>
+                            <span className="font-medium">{accountEmail || "—"}</span>
+                        </div>
+                        <div className="flex items-center justify-between">
+                            <span className="text-muted-foreground">Email Verified</span>
+                            <span className={"font-medium " + (emailVerified ? "text-emerald-400" : "text-amber-400")}>{emailVerified ? "Yes" : "No"}</span>
+                        </div>
+                    </CardContent>
+                </Card>
+
+                <Card className="border-border/60 bg-card/60 backdrop-blur">
+                    <CardHeader>
+                        <CardTitle>AI Model</CardTitle>
+                        <CardDescription>Select the model for AI operations</CardDescription>
+                    </CardHeader>
+                    <CardContent>
+                        <div className="space-y-4">
+                            <div className="space-y-2">
+                                <Label htmlFor="model">Model</Label>
+                                <div className="relative">
+                                    <select
+                                        id="model"
+                                        className="w-full appearance-none rounded-md border border-border bg-background px-3 py-2 pr-10 text-sm outline-none ring-0 transition focus:border-primary"
+                                        value={model}
+                                        onChange={(e) => setModel(e.target.value)}
+                                    >
+                                        {models.map((m) => (
+                                            <option key={m.id} value={m.id}>
+                                                {m.name}
+                                            </option>
+                                        ))}
+                                    </select>
+                                    <span className="pointer-events-none absolute inset-y-0 right-0 grid w-10 place-items-center text-muted-foreground">▾</span>
+                                </div>
+                            </div>
+
+                            <div className="flex justify-end gap-2">
+                                <Button variant="outline" onClick={() => window.history.back()}>Cancel</Button>
+                                <Button disabled={isSaving || !model} onClick={handleSave}>
+                                    {isSaving ? "Saving..." : "Save"}
+                                </Button>
+                            </div>
+                        </div>
+                    </CardContent>
+                </Card>
+            </div>
+        </div>
+    );
+}

apps/web/src/utils/trpc.ts

@@ -30,6 +30,16 @@ export const trpcClient = createTRPCClient<AppRouter>({
         if (jwt) {
           headers.set("Authorization", `Bearer ${jwt}`);
         }
+        // Inject selected AI model into every request for server-side routing
+        // Preference is saved by the Settings page to localStorage (and Appwrite)
+        try {
+          const model = localStorage.getItem("aiModel") ?? "";
+          if (model) {
+            headers.set("x-ai-model", model);
+          }
+        } catch {
+          // ignore storage access issues (e.g., SSR or privacy modes)
+        }
         return fetch(url, {
           ...options,
           headers,