Bring-your-own keys for cloud providers (OpenAI-compatible)

Settings -> Providers takes keys for OpenAI, Anthropic (their official
OpenAI-compatibility layer), DeepSeek, Groq, OpenRouter and any custom
OpenAI-compatible endpoint. One adapter (lib/openai-compat) covers
listing, streaming chat, JSON generation and vision, and every model
flow can run on a provider: the chat picker lists each enabled
provider's models (labelled, remembered), and a "Study generation"
choice moves decks, homework, grading and attachment transcription onto
a provider model.

Keys stay in this browser exactly like the Ollama one
(freezmo.providers.v1): never stored server-side, never in a backup or
the sync payload, forwarded only with the request that needs them. The
provider test asserts the key reaches the provider while the routing
header stays on the app side.

New suite tests/providers-test.mjs (13 checks) stubs both protocols:
model listing, chat streaming, study generation and the Settings flow.
Privacy policy updated (en+cs). Contrast 0 findings, axe clean, mobile
126/126, chat 102/102, wizard 95/95, bubbles 34/34, regression 44/44,
i18n 13/13, native 33/33. Version 0.4.7, SW -> freezmo-v72.
This commit is contained in:
Martin Dvořák 2026-10-14 06:29:39 +00:00
commit 4372423167
28 changed files with 1538 additions and 150 deletions

View file

@ -5,6 +5,7 @@ import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
import { CheckCircleIcon } from "@/components/icons";
import { useI18n } from "@/lib/i18n";
import { providerInfo } from "@/lib/providers";
import { springSheet } from "@/lib/motion";
import { useIsPhone } from "@/lib/use-phone";
import type { ChatModelChoice } from "@/lib/chat";
@ -20,13 +21,16 @@ export function ModelPicker({
onClose,
models,
value,
valueProvider,
onChange,
}: {
open: boolean;
onClose: () => void;
models: ChatModelChoice[];
value: string;
onChange: (model: string) => void;
/** Provider that owns `value` (Ollama when omitted). */
valueProvider?: string;
onChange: (model: string, provider?: string) => void;
}) {
const { t } = useI18n();
const isPhone = useIsPhone();
@ -66,6 +70,8 @@ export function ModelPicker({
return () => document.removeEventListener("pointerdown", onDown);
}, [open, isPhone, onClose]);
const providerLabel = (id: string) => providerInfo(id)?.label ?? id;
const badge = (model: ChatModelChoice) =>
model.badge === "vision" ? t("chat.modelVision") : model.badge === "both" ? t("chat.modelBoth") : t("chat.modelText");
@ -87,7 +93,7 @@ export function ModelPicker({
<li className="px-3 py-2 text-[12.5px] text-[var(--text-subtle)]">{t("chat.modelSearchEmpty")}</li>
) : null}
{visible.map((model) => {
const selected = model.name === value;
const selected = model.name === value && (model.provider ?? "ollama") === (valueProvider ?? "ollama");
const unavailable = model.available === false;
return (
<li key={model.name}>
@ -96,7 +102,7 @@ export function ModelPicker({
disabled={unavailable}
aria-pressed={selected}
onClick={() => {
onChange(model.name);
onChange(model.name, model.provider);
onClose();
}}
className={cn(
@ -110,7 +116,9 @@ export function ModelPicker({
<span className="min-w-0 flex-1">
<span className="block truncate text-[13.5px] font-semibold text-[var(--text)]">{model.name}</span>
<span className="mt-0.5 flex items-center gap-2 text-[11.5px] text-[var(--text-subtle)]">
<span className="rounded-md border border-[var(--hairline-soft)] px-1.5 py-0.5">{badge(model)}</span>
<span className="rounded-md border border-[var(--hairline-soft)] px-1.5 py-0.5">
{model.provider ? `${providerLabel(model.provider)} · ${badge(model)}` : badge(model)}
</span>
{model.available === true ? (
<span className="text-emerald-600 dark:text-emerald-300">{t("chat.modelAvailable")}</span>
) : model.available === false ? (