Fix bug strip image

src/shared/components/UsageStats.js

@@ -2,6 +2,7 @@
 
 import { useState, useEffect, useMemo, useCallback } from "react";
 import { useSearchParams, useRouter } from "next/navigation";
+import { FREE_PROVIDERS } from "@/shared/constants/providers";
 import Badge from "./Badge";
 import Card from "./Card";
 import OverviewCards from "@/app/(dashboard)/dashboard/usage/components/OverviewCards";
@@ -196,18 +197,21 @@ export default function UsageStats() {
   const [period, setPeriod] = useState("7d");
 
   // Fetch connected providers once, deduplicate by provider type
+  // Always include noAuth free providers (e.g. opencode) regardless of connections
   useEffect(() => {
     fetch("/api/providers")
       .then((r) => r.ok ? r.json() : null)
       .then((d) => {
-        if (!d?.connections) return;
         const seen = new Set();
-        const unique = d.connections.filter((c) => {
+        const unique = (d?.connections || []).filter((c) => {
           if (seen.has(c.provider)) return false;
           seen.add(c.provider);
           return true;
         });
-        setProviders(unique);
+        const noAuthProviders = Object.values(FREE_PROVIDERS)
+          .filter((p) => p.noAuth && !seen.has(p.id))
+          .map((p) => ({ provider: p.id, name: p.name }));
+        setProviders([...unique, ...noAuthProviders]);
       })
       .catch(() => {});
   }, []);

src/shared/constants/models.js

@@ -1,13 +1,12 @@
 // Import directly from file to avoid pulling in server-side dependencies via index.js
 export {
   PROVIDER_MODELS,
-  MODEL_CAPS,
   getProviderModels,
   getDefaultModel,
   isValidModel as isValidModelCore,
   findModelName,
   getModelTargetFormat,
-  getModelCaps,
+  getModelStrip,
   PROVIDER_ID_TO_ALIAS,
   getModelsByProviderId
 } from "open-sse/config/providerModels.js";

src/shared/constants/providers.js

@@ -43,7 +43,7 @@ export const APIKEY_PROVIDERS = {
   "alicode-intl": { id: "alicode-intl", alias: "alicode-intl", name: "Alibaba Intl", icon: "cloud", color: "#FF6A00", textIcon: "ALi" },
   openai: { id: "openai", alias: "openai", name: "OpenAI", icon: "auto_awesome", color: "#10A37F", textIcon: "OA", website: "https://platform.openai.com", serviceKinds: ["llm", "embedding", "tts"] },
   anthropic: { id: "anthropic", alias: "anthropic", name: "Anthropic", icon: "smart_toy", color: "#D97757", textIcon: "AN", website: "https://console.anthropic.com", serviceKinds: ["llm"] },
-  gemini: { id: "gemini", alias: "gemini", name: "Gemini", icon: "diamond", color: "#4285F4", textIcon: "GE", website: "https://ai.google.dev", serviceKinds: ["llm", "embedding"] },
+
   deepseek: { id: "deepseek", alias: "ds", name: "DeepSeek", icon: "bolt", color: "#4D6BFE", textIcon: "DS", website: "https://deepseek.com" },
   groq: { id: "groq", alias: "groq", name: "Groq", icon: "speed", color: "#F55036", textIcon: "GQ", website: "https://groq.com" },
   xai: { id: "xai", alias: "xai", name: "xAI (Grok)", icon: "auto_awesome", color: "#1DA1F2", textIcon: "XA", website: "https://x.ai" },