(feat) Auto get free models from openrouter

e2e-tests/openrouter_free_models.spec.ts

@@ -0,0 +1,32 @@
+import { expect } from "@playwright/test";
+import { testWithConfig } from "./helpers/test_helper";
+
+const testOpenRouter = testWithConfig({
+  preLaunchHook: async () => {
+    process.env.OPENROUTER_API_KEY = "or-test-key";
+  },
+});
+
+testOpenRouter(
+  "openrouter free models are listed in the model picker",
+  async ({ po }) => {
+    await po.setUp();
+
+    await po.page.getByTestId("model-picker").click();
+    await po.page.getByText("Other AI providers", { exact: true }).click();
+    await po.page.getByText("OpenRouter", { exact: true }).click();
+
+    await expect(
+      po.page.getByText("Free models", { exact: true }),
+    ).toBeVisible();
+    await po.page.getByText("Free models", { exact: true }).click();
+
+    await expect(
+      po.page.getByText("OpenRouter Free Models", { exact: true }),
+    ).toBeVisible();
+
+    await expect(
+      po.page.getByRole("menuitem").filter({ hasText: "Free (OpenRouter)" }),
+    ).toBeVisible();
+  },
+);

src/__tests__/openrouter_free_models.test.ts

@@ -0,0 +1,56 @@
+import { describe, expect, it } from "vitest";
+import { buildOpenRouterFreeModels } from "@/ipc/shared/openrouter_free_models";
+
+describe("buildOpenRouterFreeModels", () => {
+  it("filters to free models and decorates display names", () => {
+    const models = [
+      {
+        id: "paid/model",
+        name: "Paid Model",
+        pricing: { prompt: "0.01", completion: "0.02" },
+      },
+      {
+        id: "free/model",
+        name: "Awesome Model",
+        pricing: { prompt: "0", completion: "0" },
+        context_length: 128_000,
+        top_provider: { max_completion_tokens: 16_384 },
+      },
+      {
+        id: "free/with-label",
+        name: "Free Model",
+        pricing: { prompt: 0, completion: 0, image: 0 },
+      },
+    ];
+
+    const result = buildOpenRouterFreeModels(models);
+
+    expect(result).toHaveLength(2);
+    const awesome = result.find((model) => model.apiName === "free/model");
+    expect(awesome?.displayName).toBe("Awesome Model");
+    expect(awesome?.contextWindow).toBe(128_000);
+    expect(awesome?.maxOutputTokens).toBe(16_384);
+    expect(awesome?.tag).toBe("Free");
+
+    const labeled = result.find((model) => model.apiName === "free/with-label");
+    expect(labeled?.displayName).toBe("Free Model");
+    expect(labeled?.dollarSigns).toBe(0);
+  });
+
+  it("sanitizes external model name and description fields", () => {
+    const models = [
+      {
+        id: "free/sanitized",
+        name: "  <img src=x onerror=alert(1)>Safe Name (free)  ",
+        description: "<script>alert(1)</script>  Useful model  ",
+        pricing: { prompt: 0, completion: 0 },
+      },
+    ];
+
+    const result = buildOpenRouterFreeModels(models);
+
+    expect(result).toHaveLength(1);
+    expect(result[0]?.displayName).toBe("Safe Name");
+    expect(result[0]?.description).toBe("alert(1) Useful model");
+  });
+});

src/components/ModelPicker.tsx

@@ -16,7 +16,7 @@ import { useLocalModels } from "@/hooks/useLocalModels";
 import { useLocalLMSModels } from "@/hooks/useLMStudioModels";
 import { useLanguageModelsByProviders } from "@/hooks/useLanguageModelsByProviders";
 
-import { ipc, LocalModel } from "@/ipc/types";
+import { ipc, LocalModel, type LanguageModel } from "@/ipc/types";
 import { useLanguageModelProviders } from "@/hooks/useLanguageModelProviders";
 import { useSettings } from "@/hooks/useSettings";
 import { PriceBadge } from "@/components/PriceBadge";
@@ -304,6 +304,22 @@ export function ModelPicker() {
                   provider?.id === "auto"
                     ? "Dyad Turbo"
                     : (provider?.name ?? providerId);
+                const isOpenRouter = providerId === "openrouter";
+                const isOpenRouterFreeModel = (model: LanguageModel) =>
+                  model.tag === "Free" ||
+                  model.apiName.endsWith(":free") ||
+                  model.dollarSigns === 0;
+                const openRouterFreeModels = isOpenRouter
+                  ? models.filter((model) => isOpenRouterFreeModel(model))
+                  : [];
+                const openRouterFreeModelNames = new Set(
+                  openRouterFreeModels.map((model) => model.apiName),
+                );
+                const displayModels = isOpenRouter
+                  ? models.filter(
+                      (model) => !openRouterFreeModelNames.has(model.apiName),
+                    )
+                  : models;
                 return (
                   <DropdownMenuSub key={providerId}>
                     <DropdownMenuSubTrigger className="w-full font-normal">
@@ -333,7 +349,68 @@ export function ModelPicker() {
                         {providerDisplayName + " Models"}
                       </DropdownMenuLabel>
                       <DropdownMenuSeparator />
-                      {models.map((model) => (
+                      {isOpenRouter && openRouterFreeModels.length > 0 && (
+                        <>
+                          <DropdownMenuSub>
+                            <DropdownMenuSubTrigger className="w-full font-normal">
+                              <div className="flex flex-col items-start w-full">
+                                <span>Free models</span>
+                                <span className="text-xs text-muted-foreground">
+                                  {openRouterFreeModels.length} models
+                                </span>
+                              </div>
+                            </DropdownMenuSubTrigger>
+                            <DropdownMenuSubContent className="w-56 max-h-100 overflow-y-auto">
+                              <DropdownMenuLabel>
+                                OpenRouter Free Models
+                              </DropdownMenuLabel>
+                              <DropdownMenuSeparator />
+                              {openRouterFreeModels.map((model) => (
+                                <DropdownMenuItem
+                                  key={`${providerId}-${model.apiName}-free`}
+                                  title={model.description}
+                                  className={
+                                    selectedModel.provider === providerId &&
+                                    selectedModel.name === model.apiName
+                                      ? "bg-secondary"
+                                      : ""
+                                  }
+                                  onClick={() => {
+                                    const customModelId =
+                                      model.type === "custom"
+                                        ? model.id
+                                        : undefined;
+                                    onModelSelect({
+                                      name: model.apiName,
+                                      provider: providerId,
+                                      customModelId,
+                                    });
+                                    setOpen(false);
+                                  }}
+                                >
+                                  <div className="flex justify-between items-start w-full">
+                                    <span>{model.displayName}</span>
+                                    <PriceBadge
+                                      dollarSigns={model.dollarSigns}
+                                    />
+                                    {model.tag &&
+                                      (model.tag !== "Free" ||
+                                        model.dollarSigns !== 0) && (
+                                        <span className="text-[10px] bg-primary/10 text-primary px-1.5 py-0.5 rounded-full font-medium">
+                                          {model.tag}
+                                        </span>
+                                      )}
+                                  </div>
+                                </DropdownMenuItem>
+                              ))}
+                            </DropdownMenuSubContent>
+                          </DropdownMenuSub>
+                          {displayModels.length > 0 && (
+                            <DropdownMenuSeparator />
+                          )}
+                        </>
+                      )}
+                      {displayModels.map((model) => (
                         <DropdownMenuItem
                           key={`${providerId}-${model.apiName}`}
                           title={model.description}
@@ -357,11 +434,13 @@ export function ModelPicker() {
                           <div className="flex justify-between items-start w-full">
                             <span>{model.displayName}</span>
                             <PriceBadge dollarSigns={model.dollarSigns} />
-                            {model.tag && (
-                              <span className="text-[10px] bg-primary/10 text-primary px-1.5 py-0.5 rounded-full font-medium">
-                                {model.tag}
-                              </span>
-                            )}
+                            {model.tag &&
+                              (model.tag !== "Free" ||
+                                model.dollarSigns !== 0) && (
+                                <span className="text-[10px] bg-primary/10 text-primary px-1.5 py-0.5 rounded-full font-medium">
+                                  {model.tag}
+                                </span>
+                              )}
                           </div>
                         </DropdownMenuItem>
                       ))}

src/ipc/shared/language_model_constants.ts

@@ -271,6 +271,17 @@ export const MODEL_OPTIONS: Record<string, ModelOption[]> = {
       temperature: 0,
       dollarSigns: 1,
     },
+    // https://openrouter.ai/qwen/qwen3-coder
+    {
+      name: "qwen/qwen3-coder:free",
+      displayName: "Qwen3 Coder",
+      description: "Use for free (data may be used for training)",
+      maxOutputTokens: 32_000,
+      contextWindow: 196_608,
+      temperature: 0,
+      dollarSigns: 1,
+    },
+    // https://openrouter.ai/z-ai/glm-5
     {
       name: "z-ai/glm-5",
       displayName: "GLM 5",
@@ -280,6 +291,16 @@ export const MODEL_OPTIONS: Record<string, ModelOption[]> = {
       temperature: 0.7,
       dollarSigns: 2,
     },
+    // https://openrouter.ai/mistralai/devstral-2512
+    {
+      name: "mistralai/devstral-2512:free",
+      displayName: "Devstral 2",
+      description: "Use for free (data may be used for training)",
+      maxOutputTokens: 32_000,
+      contextWindow: 200_000,
+      temperature: 0.7,
+      dollarSigns: 2,
+    },
     {
       name: "z-ai/glm-4.7",
       displayName: "GLM 4.7",
@@ -321,7 +342,7 @@ export const MODEL_OPTIONS: Record<string, ModelOption[]> = {
     },
     {
       name: "free",
-      displayName: "Free (OpenRouter)",
+      displayName: "Free",
       description: "Selects from one of the free OpenRouter models",
       tag: "Free",
       // These are below Gemini 2.5 Pro & Flash limits
@@ -505,7 +526,6 @@ export const FREE_OPENROUTER_MODEL_NAMES = MODEL_OPTIONS.openrouter
     (model) => model.name.endsWith(":free") || model.name.endsWith("/free"),
   )
   .map((model) => model.name);
-
 export const PROVIDER_TO_ENV_VAR: Record<string, string> = {
   openai: "OPENAI_API_KEY",
   anthropic: "ANTHROPIC_API_KEY",

src/ipc/shared/language_model_helpers.ts

@@ -11,6 +11,7 @@ import {
   MODEL_OPTIONS,
   PROVIDER_TO_ENV_VAR,
 } from "./language_model_constants";
+import { getOpenRouterFreeModels } from "./openrouter_free_models";
 /**
  * Fetches language model providers from both the database (custom) and hardcoded constants (cloud),
  * merging them with custom providers taking precedence.
@@ -148,6 +149,15 @@ export async function getLanguageModels({
     }
   }
 
+  if (providerId === "openrouter") {
+    const freeModels = getOpenRouterFreeModels();
+    const dedupe = new Map<string, LanguageModel>();
+    [...freeModels, ...hardcodedModels].forEach((model) => {
+      dedupe.set(model.apiName, model);
+    });
+    hardcodedModels = Array.from(dedupe.values());
+  }
+
   return [...hardcodedModels, ...customModels];
 }