| {idx + 1} |
@@ -271,7 +325,7 @@ export default function FreeProviderRankingsPage() {
)}
- {rankings.length === 0 && !error && (
+ {displayedRankings.length === 0 && !error && (
{t("emptyState")}
diff --git a/src/app/(dashboard)/dashboard/onboarding/components/TierFlowDiagram.tsx b/src/app/(dashboard)/dashboard/onboarding/components/TierFlowDiagram.tsx
index d2cc88ad13..ded42fdf0d 100644
--- a/src/app/(dashboard)/dashboard/onboarding/components/TierFlowDiagram.tsx
+++ b/src/app/(dashboard)/dashboard/onboarding/components/TierFlowDiagram.tsx
@@ -5,7 +5,8 @@ import { useTranslations } from "next-intl";
import Image from "next/image";
export function TierFlowDiagram() {
- const t = useTranslations("onboarding");
+ const t = useTranslations("onboarding.tier");
+ const tOnboarding = useTranslations("onboarding");
const { resolvedTheme } = useTheme();
const src =
resolvedTheme === "dark" ? "/images/tier-flow-dark.svg" : "/images/tier-flow-light.svg";
@@ -14,15 +15,14 @@ export function TierFlowDiagram() {
-
- Requests flow through your subscription quotas first, then pay-per-token cheap providers,
- then free-tier providers — automatic, zero-config.
+
+ {t("flowCaption")}
);
diff --git a/src/app/(dashboard)/dashboard/onboarding/page.tsx b/src/app/(dashboard)/dashboard/onboarding/page.tsx
index a1cbf3544e..de8b44e3cf 100644
--- a/src/app/(dashboard)/dashboard/onboarding/page.tsx
+++ b/src/app/(dashboard)/dashboard/onboarding/page.tsx
@@ -274,7 +274,12 @@ export default function OnboardingWizard() {
>
{currentStep.icon}
- {currentStep.title}
+ {currentStep.title}
+ {currentStep.id === "tiers" && (
+
+ {t("tier.subtitle")}
+
+ )}
{/* Step Content */}
@@ -283,7 +288,7 @@ export default function OnboardingWizard() {
{currentStep.id === "welcome" && (
{t("welcomeDesc")}
-
+
{[
{ icon: "swap_horiz", label: t("multiProvider") },
{ icon: "monitoring", label: t("usageTracking") },
@@ -291,12 +296,14 @@ export default function OnboardingWizard() {
].map((f) => (
-
- {f.icon}
-
- {f.label}
+
+
+ {f.icon}
+
+ {f.label}
+
))}
diff --git a/src/app/(dashboard)/dashboard/onboarding/steps/TierTour.tsx b/src/app/(dashboard)/dashboard/onboarding/steps/TierTour.tsx
index 02f0d3d286..c09276df3d 100644
--- a/src/app/(dashboard)/dashboard/onboarding/steps/TierTour.tsx
+++ b/src/app/(dashboard)/dashboard/onboarding/steps/TierTour.tsx
@@ -19,7 +19,7 @@ function TierCard({ number, colorClass, label, description, examples }: TierCard
{number}
{label}
- {description}
+ {description}
{examples.map((e) => (
- · {e}
@@ -34,10 +34,6 @@ export function TierTour() {
return (
-
-
@@ -68,7 +64,7 @@ export function TierTour() {
{t("configure")}
{" "}
- after setup.
+ {t("afterSetup")}
);
diff --git a/src/app/(dashboard)/dashboard/providers/[id]/ProviderDetailPageClient.tsx b/src/app/(dashboard)/dashboard/providers/[id]/ProviderDetailPageClient.tsx
index 0862282ba2..87851fe1f0 100644
--- a/src/app/(dashboard)/dashboard/providers/[id]/ProviderDetailPageClient.tsx
+++ b/src/app/(dashboard)/dashboard/providers/[id]/ProviderDetailPageClient.tsx
@@ -131,6 +131,8 @@ export default function ProviderDetailPageClient() {
handleRetestConnection,
handleRefreshToken,
handleSwapPriority,
+ handleReorderByAvailability,
+ reorderingByAvailability,
handleBatchSetActive,
handleBatchDeleteOpenModal,
handleBatchDeleteConfirm,
@@ -498,6 +500,8 @@ export default function ProviderDetailPageClient() {
retestingId={retestingId}
distributingProxies={distributingProxies}
proxyConfig={proxyConfig}
+ reorderingByAvailability={reorderingByAvailability}
+ handleReorderByAvailability={handleReorderByAvailability}
preferClaudeCodeForUnprefixedClaudeModels={preferClaudeCodeForUnprefixedClaudeModels}
claudeRoutingSettingsLoaded={claudeRoutingSettingsLoaded}
claudeRoutingSettingsLoadError={claudeRoutingSettingsLoadError}
diff --git a/src/app/(dashboard)/dashboard/providers/[id]/codexPlanLabel.ts b/src/app/(dashboard)/dashboard/providers/[id]/codexPlanLabel.ts
new file mode 100644
index 0000000000..767bd651cd
--- /dev/null
+++ b/src/app/(dashboard)/dashboard/providers/[id]/codexPlanLabel.ts
@@ -0,0 +1,19 @@
+/**
+ * Codex subscription plan label (e.g. "Plus", "Pro", "Team"), persisted on the
+ * connection's providerSpecificData.chatgptPlanType at OAuth import time (see
+ * src/lib/oauth/services/codexImport.ts). Returns "" when the connection is
+ * not Codex or the value is missing/blank — callers gate rendering on that.
+ *
+ * Kept in its own module (not providerPageHelpers.ts) because that file is
+ * frozen at its file-size ratchet cap (config/quality/file-size-baseline.json)
+ * and this helper is fully self-contained.
+ */
+export function getCodexPlanLabel(isCodex: boolean, providerSpecificData: unknown): string {
+ if (!isCodex) return "";
+ const record =
+ providerSpecificData && typeof providerSpecificData === "object"
+ ? (providerSpecificData as Record )
+ : {};
+ const raw = record.chatgptPlanType;
+ return typeof raw === "string" ? raw.trim() : "";
+}
diff --git a/src/app/(dashboard)/dashboard/providers/[id]/components/ConnectionRow.tsx b/src/app/(dashboard)/dashboard/providers/[id]/components/ConnectionRow.tsx
index 267cfda72e..72e9229c02 100644
--- a/src/app/(dashboard)/dashboard/providers/[id]/components/ConnectionRow.tsx
+++ b/src/app/(dashboard)/dashboard/providers/[id]/components/ConnectionRow.tsx
@@ -15,7 +15,12 @@ import {
getCodexEffectiveServiceTier,
type CodexGlobalServiceMode,
} from "@/lib/providers/codexFastTier";
-import { normalizeCodexLimitPolicy, providerText, ERROR_TYPE_LABELS } from "../providerPageHelpers";
+import {
+ normalizeCodexLimitPolicy,
+ providerText,
+ ERROR_TYPE_LABELS,
+} from "../providerPageHelpers";
+import { getCodexPlanLabel } from "../codexPlanLabel";
// ---------------------------------------------------------------------------
// Types (exported so the client can reference them without re-importing)
@@ -499,6 +504,7 @@ export default function ConnectionRow({
const claudeBlockExtraUsageEnabled = isClaude
? isClaudeExtraUsageBlockEnabled("claude", connection.providerSpecificData)
: false;
+ const codexPlanLabel = getCodexPlanLabel(!!isCodex, connection.providerSpecificData);
const cliproxyapiDeepMode = !!cliproxyapiEnabled;
return (
@@ -540,6 +546,11 @@ export default function ConnectionRow({
{statusPresentation.statusLabel}
+ {codexPlanLabel && (
+
+ {codexPlanLabel}
+
+ )}
{/* T12: Token expiry status indicator (state-driven, no Date.now in render) */}
{/* #5836: the red "Token Expired" badge is TERMINAL-only — for OAuth
refresh-capable providers (Antigravity/Gemini) the access token lapses
diff --git a/src/app/(dashboard)/dashboard/providers/[id]/components/ConnectionsHeaderToolbar.tsx b/src/app/(dashboard)/dashboard/providers/[id]/components/ConnectionsHeaderToolbar.tsx
index 2fe7c8d0e3..0ccd343137 100644
--- a/src/app/(dashboard)/dashboard/providers/[id]/components/ConnectionsHeaderToolbar.tsx
+++ b/src/app/(dashboard)/dashboard/providers/[id]/components/ConnectionsHeaderToolbar.tsx
@@ -16,6 +16,8 @@ type ConnectionsHeaderToolbarProps = {
batchRetesting: boolean;
retestingId: string | null;
proxyConfig: any;
+ reorderingByAvailability: boolean;
+ handleReorderByAvailability: () => void | Promise;
// from useProviderSettings
preferClaudeCodeForUnprefixedClaudeModels: boolean;
claudeRoutingSettingsLoaded: boolean;
@@ -61,6 +63,8 @@ export default function ConnectionsHeaderToolbar({
batchRetesting,
retestingId,
proxyConfig,
+ reorderingByAvailability,
+ handleReorderByAvailability,
preferClaudeCodeForUnprefixedClaudeModels,
claudeRoutingSettingsLoaded,
claudeRoutingSettingsLoadError,
@@ -245,6 +249,23 @@ export default function ConnectionsHeaderToolbar({
{batchTesting ? t("testing") : t("testAll")}
)}
+ {connections.length > 1 && (
+
+ )}
{!isCompatible ? (
<>
{isCommandCode || providerId === "clinepass" ? (
diff --git a/src/app/(dashboard)/dashboard/providers/[id]/components/CustomModelsSection.tsx b/src/app/(dashboard)/dashboard/providers/[id]/components/CustomModelsSection.tsx
index 76b861739d..dd2e842159 100644
--- a/src/app/(dashboard)/dashboard/providers/[id]/components/CustomModelsSection.tsx
+++ b/src/app/(dashboard)/dashboard/providers/[id]/components/CustomModelsSection.tsx
@@ -98,6 +98,11 @@ export default function CustomModelsSection({
// #4125: manual context-window override (Feature 5004 table) — free text so the
// field can be left blank (no override) without fighting a number input's "0".
const [editingContextWindowOverride, setEditingContextWindowOverride] = useState("");
+ // #1904: manual vision-capability override — some self-hosted/local OpenAI-compatible
+ // backends don't self-report an image input modality, so the user needs a way to flag
+ // the model as vision-capable by hand (read back by getCustomVisionCapabilityFields()).
+ const [newSupportsVision, setNewSupportsVision] = useState(false);
+ const [editingSupportsVision, setEditingSupportsVision] = useState(false);
const customMap = useMemo(() => buildCompatMap(customModels), [customModels]);
const overrideMap = useMemo(() => buildCompatMap(modelCompatOverrides), [modelCompatOverrides]);
@@ -135,6 +140,7 @@ export default function CustomModelsSection({
apiFormat: newApiFormat,
supportedEndpoints: newEndpoints,
...(newTargetFormat ? { targetFormat: newTargetFormat } : {}),
+ ...(newSupportsVision ? { supportsVision: true } : {}),
}),
});
if (res.ok) {
@@ -143,6 +149,7 @@ export default function CustomModelsSection({
setNewApiFormat("chat-completions");
setNewEndpoints(["chat"]);
setNewTargetFormat("");
+ setNewSupportsVision(false);
await fetchCustomModels();
onModelsChanged?.();
}
@@ -202,6 +209,7 @@ export default function CustomModelsSection({
setEditingContextWindowOverride(
typeof model.contextWindowOverride === "number" ? String(model.contextWindowOverride) : ""
);
+ setEditingSupportsVision(model.supportsVision === true);
};
const cancelEdit = () => {
@@ -210,6 +218,7 @@ export default function CustomModelsSection({
setEditingEndpoints(["chat"]);
setEditingTargetFormat("");
setEditingContextWindowOverride("");
+ setEditingSupportsVision(false);
setSavingModelId(null);
};
@@ -268,6 +277,9 @@ export default function CustomModelsSection({
...(editingTargetFormat ? { targetFormat: editingTargetFormat } : {}),
// #4125: manual context-window override — number to set, null to clear.
contextWindowOverride,
+ // #1904: manual vision-capability override — true/false to set, null to
+ // clear back to the id-based heuristic.
+ supportsVision: editingSupportsVision ? true : null,
}),
});
@@ -425,6 +437,23 @@ export default function CustomModelsSection({
))}
+
+
+
+
@@ -482,6 +511,14 @@ export default function CustomModelsSection({
{`🪟 ${model.contextWindowOverride.toLocaleString()}`}
)}
+ {model.supportsVision === true && (
+
+ {`👁️ ${t("visionCapableLabel")}`}
+
+ )}
{model.supportedEndpoints?.includes("embeddings") && (
{`📐 ${t("supportedEndpointEmbeddings")}`}
@@ -578,6 +615,23 @@ export default function CustomModelsSection({
className="w-full px-2.5 py-2 text-xs border border-border rounded-lg bg-background text-text-main focus:outline-none focus:border-primary"
/>
+
+
+
+
{t("supportedEndpointsLabel")}
diff --git a/src/app/(dashboard)/dashboard/providers/[id]/components/connectionRowHelpers.ts b/src/app/(dashboard)/dashboard/providers/[id]/components/connectionRowHelpers.ts
index be7e5fdf9f..3899c27f56 100644
--- a/src/app/(dashboard)/dashboard/providers/[id]/components/connectionRowHelpers.ts
+++ b/src/app/(dashboard)/dashboard/providers/[id]/components/connectionRowHelpers.ts
@@ -13,3 +13,63 @@ export function shouldShowConnectionLastError(connection: {
}): boolean {
return Boolean(connection.lastError);
}
+
+/**
+ * Availability-sort input shape — the two resilience-runtime fields that
+ * decide whether a connection is currently usable. Deliberately narrow: this
+ * mirrors the two fields `ConnectionRow`'s own `effectiveStatus` computation
+ * reads (`rateLimitedUntil` = connection cooldown, `testStatus` = last test
+ * result), so the "Reorder" button and the row badges never disagree about
+ * what "available" means.
+ */
+export interface AvailabilitySortableConnection {
+ testStatus?: string;
+ rateLimitedUntil?: string;
+}
+
+/**
+ * Effective status for a connection, factoring in connection cooldown.
+ *
+ * A connection can be recorded as `testStatus: "unavailable"` (see the
+ * "Connection Cooldown" resilience layer in CLAUDE.md) yet the cooldown
+ * itself is lazy — once `rateLimitedUntil` is in the past, the connection is
+ * eligible again even though nothing has re-tested it yet. Treat that case
+ * as "active" so the reorder button (and the row's own badge, which this
+ * mirrors) reflect the lazy-recovery model instead of stale state.
+ */
+export function getConnectionEffectiveStatus(
+ connection: AvailabilitySortableConnection
+): string | undefined {
+ const isCooldown = Boolean(
+ connection.rateLimitedUntil && new Date(connection.rateLimitedUntil).getTime() > Date.now()
+ );
+ return connection.testStatus === "unavailable" && !isCooldown ? "active" : connection.testStatus;
+}
+
+/** A connection is "available" for reorder purposes when its effective status is active/success. */
+export function isConnectionAvailable(connection: AvailabilitySortableConnection): boolean {
+ const status = getConnectionEffectiveStatus(connection);
+ return status === "active" || status === "success";
+}
+
+/**
+ * Sort connections with available ones first, unavailable ones last.
+ *
+ * Stable sort: connections within the same availability group keep their
+ * relative (existing priority) order, so reordering only moves groups
+ * relative to each other, never scrambles ties. `Array.prototype.sort` has
+ * been a stable sort in V8/Node since ES2019, so no manual tie-break index
+ * is needed here (unlike `handleSwapPriority`'s two-item swap, which reads
+ * ordering intent directly instead).
+ */
+export function sortConnectionsByAvailability(
+ connections: T[]
+): T[] {
+ return [...connections].sort((a, b) => {
+ const availableA = isConnectionAvailable(a);
+ const availableB = isConnectionAvailable(b);
+ if (availableA && !availableB) return -1;
+ if (!availableA && availableB) return 1;
+ return 0;
+ });
+}
diff --git a/src/app/(dashboard)/dashboard/providers/[id]/hooks/useProviderConnections.ts b/src/app/(dashboard)/dashboard/providers/[id]/hooks/useProviderConnections.ts
index a5f8a8fcd0..ca31016194 100644
--- a/src/app/(dashboard)/dashboard/providers/[id]/hooks/useProviderConnections.ts
+++ b/src/app/(dashboard)/dashboard/providers/[id]/hooks/useProviderConnections.ts
@@ -27,6 +27,7 @@ import { useNotificationStore } from "@/store/notificationStore";
import { isClaudeCodeCompatibleProvider } from "@/shared/constants/providers";
import type { ConnectionRowConnection } from "../components/ConnectionRow";
import { normalizeCodexLimitPolicy } from "../providerPageHelpers";
+import { useReorderByAvailability } from "./useReorderByAvailability";
// Max connection ids accepted per bulk request — mirrors API-side cap.
const MAX_BULK_IDS = 100;
@@ -93,6 +94,8 @@ export interface UseProviderConnectionsReturn {
handleRetestConnection: (connectionId: string) => Promise;
handleRefreshToken: (connectionId: string) => Promise;
handleSwapPriority: (conn1: any, conn2: any) => Promise;
+ handleReorderByAvailability: () => Promise;
+ reorderingByAvailability: boolean;
// Batch handlers
handleBatchSetActive: (isActive: boolean) => Promise;
@@ -607,6 +610,16 @@ export function useProviderConnections(
}
};
+ // Reorder-by-availability toolbar action — extracted to its own hook
+ // (see useReorderByAvailability.ts) to keep this file under the file-size cap.
+ const { reorderingByAvailability, handleReorderByAvailability } = useReorderByAvailability({
+ connections,
+ setConnections,
+ fetchConnections,
+ notify,
+ t,
+ });
+
// ────────────────────────────────────────────────────────────────────────
// Selection handlers
// ────────────────────────────────────────────────────────────────────────
@@ -880,6 +893,7 @@ export function useProviderConnections(
connProxyMap,
cpaProviderEnabled,
refreshingId,
+ reorderingByAvailability,
// Setters
setPage,
@@ -906,6 +920,7 @@ export function useProviderConnections(
handleRetestConnection,
handleRefreshToken,
handleSwapPriority,
+ handleReorderByAvailability,
// Batch handlers
handleBatchSetActive,
diff --git a/src/app/(dashboard)/dashboard/providers/[id]/hooks/useReorderByAvailability.ts b/src/app/(dashboard)/dashboard/providers/[id]/hooks/useReorderByAvailability.ts
new file mode 100644
index 0000000000..9527e4b99c
--- /dev/null
+++ b/src/app/(dashboard)/dashboard/providers/[id]/hooks/useReorderByAvailability.ts
@@ -0,0 +1,88 @@
+"use client";
+
+/**
+ * useReorderByAvailability — extracted from useProviderConnections (file-size
+ * ratchet: useProviderConnections.ts is frozen at 954 lines; this feature
+ * pushed it to 974) to keep the god-file from growing.
+ *
+ * Owns the "Reorder by availability" toolbar action: sorts a provider's
+ * connections so available ones float to the top and unavailable ones sink
+ * to the bottom (stable sort — see `sortConnectionsByAvailability`), then
+ * persists the new order via the same per-connection priority PUT endpoint
+ * `handleSwapPriority` already uses in useProviderConnections.
+ *
+ * Cycle-safe: imports only from leaf modules. No import from
+ * ProviderDetailPageClient or useProviderConnections.
+ */
+
+import { useState } from "react";
+import { sortConnectionsByAvailability } from "../components/connectionRowHelpers";
+import type { ConnectionRowConnection } from "../components/ConnectionRow";
+
+/** Minimal surface of the notification store this hook needs. */
+interface ReorderNotifier {
+ error: (message: string) => void;
+}
+
+export interface UseReorderByAvailabilityParams {
+ connections: ConnectionRowConnection[];
+ setConnections: (
+ updater:
+ | ConnectionRowConnection[]
+ | ((prev: ConnectionRowConnection[]) => ConnectionRowConnection[])
+ ) => void;
+ fetchConnections: () => Promise;
+ notify: ReorderNotifier;
+ t: (key: string, params?: Record) => string;
+}
+
+export interface UseReorderByAvailabilityReturn {
+ reorderingByAvailability: boolean;
+ handleReorderByAvailability: () => Promise;
+}
+
+export function useReorderByAvailability({
+ connections,
+ setConnections,
+ fetchConnections,
+ notify,
+ t,
+}: UseReorderByAvailabilityParams): UseReorderByAvailabilityReturn {
+ const [reorderingByAvailability, setReorderingByAvailability] = useState(false);
+
+ /**
+ * Reorder every connection for this provider by availability: connections
+ * whose effective status is active/success move to the top, the rest move
+ * to the bottom, each group keeping its existing relative order (stable
+ * sort — see `sortConnectionsByAvailability`). Persists the new order as
+ * sequential `priority` values via the same PUT endpoint `handleSwapPriority`
+ * already uses, then re-fetches from the server so the UI never runs ahead
+ * of persisted state on a partial failure (#2558 upstream: fzrilsh).
+ */
+ const handleReorderByAvailability = async () => {
+ if (reorderingByAvailability || (connections as any[]).length < 2) return;
+ setReorderingByAvailability(true);
+ const sorted = sortConnectionsByAvailability(connections as any[]);
+ setConnections(sorted as ConnectionRowConnection[]);
+ try {
+ await Promise.all(
+ sorted.map((conn: any, idx: number) =>
+ fetch(`/api/providers/${conn.id}`, {
+ method: "PUT",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify({ priority: idx }),
+ })
+ )
+ );
+ await fetchConnections();
+ } catch (error) {
+ console.log("Error reordering connections by availability:", error);
+ notify.error(t("reorderByAvailabilityError"));
+ await fetchConnections();
+ } finally {
+ setReorderingByAvailability(false);
+ }
+ };
+
+ return { reorderingByAvailability, handleReorderByAvailability };
+}
diff --git a/src/app/(dashboard)/dashboard/providers/[id]/providerCredentialText.ts b/src/app/(dashboard)/dashboard/providers/[id]/providerCredentialText.ts
new file mode 100644
index 0000000000..6c2c20026d
--- /dev/null
+++ b/src/app/(dashboard)/dashboard/providers/[id]/providerCredentialText.ts
@@ -0,0 +1,132 @@
+// Pure, shared helpers for provider credential copy (labels/hints/titles for
+// the API-key and web-session-credential modals). Extracted out of
+// providerPageHelpers.ts (Issue #3501 strangler-fig decomposition) — that leaf
+// is frozen at its file-size cap, so this cohesive slice (message-translation
+// utility + the 4 web-session-credential text builders) lives here instead and
+// is re-exported from providerPageHelpers.ts for backward compatibility. Leaf
+// module — imports only from @/shared, @/lib and colocated sibling modules.
+import { type WebSessionCredentialRequirement } from "./webSessionCredentials";
+
+export type ProviderMessageTranslator = ((
+ key: string,
+ values?: Record
+) => string) & {
+ has?: (key: string) => boolean;
+};
+
+export function providerText(
+ t: ProviderMessageTranslator,
+ key: string,
+ fallback: string,
+ values?: Record
+): string {
+ if (typeof t.has === "function" && t.has(key)) {
+ return t(key, values);
+ }
+ if (values) {
+ return Object.entries(values).reduce(
+ (acc, [name, value]) => acc.replaceAll(`{${name}}`, String(value)),
+ fallback
+ );
+ }
+ return fallback;
+}
+
+export function getWebSessionCredentialLabel(
+ t: ProviderMessageTranslator,
+ requirement: WebSessionCredentialRequirement,
+ optional: boolean
+): string {
+ if (requirement.kind === "none") {
+ return providerText(t, "webNoAuthCredentialLabel", "No credential required");
+ }
+ const baseLabel =
+ requirement.kind === "token"
+ ? providerText(t, "webTokenCredentialLabel", "Web session token")
+ : t("sessionCookieLabel");
+ return optional ? `${baseLabel} (${t("optional").toLowerCase()})` : baseLabel;
+}
+
+export function getWebSessionCredentialHint(
+ t: ProviderMessageTranslator,
+ requirement: WebSessionCredentialRequirement,
+ providerName: string,
+ editing: boolean
+): string | undefined {
+ if (requirement.kind === "none") return undefined;
+
+ const values = { provider: providerName, credential: requirement.credentialName };
+ if (editing) {
+ return requirement.kind === "token"
+ ? providerText(
+ t,
+ "webTokenEditHint",
+ "Leave blank to keep the current web session token. Credential: {credential}.",
+ values
+ )
+ : providerText(
+ t,
+ "webCookieEditHint",
+ "Leave blank to keep the current session cookie. Required cookie: {credential}.",
+ values
+ );
+ }
+
+ // #5465 — a provider-specific hint (e.g. t3.chat's step-by-step DevTools copy)
+ // replaces the generic one-line cookie/token template when that template is
+ // unclear for the provider (t3.chat needs a localStorage value AND the Cookie
+ // header, so "Required cookie: convex-session-id + Cookie header…" reads
+ // circular). The override key ships translated in every locale.
+ if (requirement.hintKey) {
+ return providerText(
+ t,
+ requirement.hintKey,
+ requirement.hintFallback ??
+ "Open the provider's web session in DevTools, copy the required credential(s), and paste them in the fields below.",
+ values
+ );
+ }
+
+ return requirement.kind === "token"
+ ? providerText(
+ t,
+ "webTokenCredentialHint",
+ "Credential: {credential}. Paste the token value from your own signed-in {provider} web session, or a DevTools HAR export if the provider supports it.",
+ values
+ )
+ : providerText(
+ t,
+ "webCookieCredentialHint",
+ "Required cookie: {credential}. Paste the Cookie header value from your own signed-in {provider} web session. Do not include the Cookie: prefix.",
+ values
+ );
+}
+
+export function getWebSessionCredentialCheckLabel(
+ t: ProviderMessageTranslator,
+ requirement: WebSessionCredentialRequirement
+): string {
+ if (requirement.kind === "token") return providerText(t, "checkWebToken", "Check token");
+ return providerText(t, "checkCookie", "Check cookie");
+}
+
+export function getAddCredentialModalTitle(
+ t: ProviderMessageTranslator,
+ providerName: string,
+ requirement: WebSessionCredentialRequirement | null
+): string {
+ if (!requirement) return t("addProviderApiKeyTitle", { provider: providerName });
+ if (requirement.kind === "none") {
+ return providerText(t, "addProviderConnectionTitle", "Add {provider} connection", {
+ provider: providerName,
+ });
+ }
+ if (requirement.kind === "token") {
+ return providerText(t, "addProviderWebTokenTitle", "Add {provider} web token", {
+ provider: providerName,
+ });
+ }
+ return providerText(t, "addProviderSessionCookieTitle", "Add {provider} session cookie", {
+ provider: providerName,
+ });
+}
diff --git a/src/app/(dashboard)/dashboard/providers/[id]/providerPageHelpers.ts b/src/app/(dashboard)/dashboard/providers/[id]/providerPageHelpers.ts
index 4345d11962..641fe055a5 100644
--- a/src/app/(dashboard)/dashboard/providers/[id]/providerPageHelpers.ts
+++ b/src/app/(dashboard)/dashboard/providers/[id]/providerPageHelpers.ts
@@ -16,20 +16,32 @@ import {
type CodexServiceTier,
} from "@/lib/providers/requestDefaults";
import { type CodexGlobalServiceMode } from "@/lib/providers/codexFastTier";
-import { type WebSessionCredentialRequirement } from "./webSessionCredentials";
import { CC_COMPATIBLE_DEFAULT_CHAT_PATH } from "./providerDetailConstants";
+import {
+ type ProviderMessageTranslator,
+ providerText,
+ getWebSessionCredentialLabel,
+ getWebSessionCredentialHint,
+ getWebSessionCredentialCheckLabel,
+ getAddCredentialModalTitle,
+} from "./providerCredentialText";
+
+// Re-exported for backward compatibility — these used to be defined here
+// (Issue #3501 strangler-fig home), but were extracted to providerCredentialText.ts
+// once this leaf hit its frozen file-size cap (#1904 own growth).
+export {
+ type ProviderMessageTranslator,
+ providerText,
+ getWebSessionCredentialLabel,
+ getWebSessionCredentialHint,
+ getWebSessionCredentialCheckLabel,
+ getAddCredentialModalTitle,
+};
// ---------------------------------------------------------------------------
// Types shared between page + modals
// ---------------------------------------------------------------------------
-export type ProviderMessageTranslator = ((
- key: string,
- values?: Record
-) => string) & {
- has?: (key: string) => boolean;
-};
-
export type LocalProviderMetadata = {
name?: string;
localDefault?: string;
@@ -76,6 +88,9 @@ export type CompatModelRow = {
compatByProtocol?: CompatByProtocolMap;
/** #2905: per-model upstream wire-format override. */ targetFormat?: string;
/** #4125: manual context-window override (tokens), when set. */ contextWindowOverride?: number;
+ /** #1904: manual vision-capability override for custom models whose upstream
+ * discovery metadata doesn't self-report an image input modality. */
+ supportsVision?: boolean;
};
export type CompatModelMap = Map;
@@ -98,28 +113,6 @@ export function targetFormatBadgeI18nKey(value: string): string | null {
return TARGET_FORMAT_BADGE_I18N_KEYS[value] ?? null;
}
-// ---------------------------------------------------------------------------
-// Utility — message translation with fallback
-// ---------------------------------------------------------------------------
-
-export function providerText(
- t: ProviderMessageTranslator,
- key: string,
- fallback: string,
- values?: Record
-): string {
- if (typeof t.has === "function" && t.has(key)) {
- return t(key, values);
- }
- if (values) {
- return Object.entries(values).reduce(
- (acc, [name, value]) => acc.replaceAll(`{${name}}`, String(value)),
- fallback
- );
- }
- return fallback;
-}
-
/** #5442 — badge for add-credential validation; unsupported → neutral N/A (not red Invalid). */
export function validationBadgeProps(result: string): {
variant: "success" | "error" | "info";
@@ -229,6 +222,7 @@ export const CONFIGURABLE_BASE_URL_PROVIDERS = new Set([
"snowflake",
"searxng-search",
"petals",
+ "comfyui",
]);
export const DEFAULT_PROVIDER_BASE_URLS: Record = {
@@ -239,6 +233,7 @@ export const DEFAULT_PROVIDER_BASE_URLS: Record = {
siliconflow: "https://api.siliconflow.com/v1",
"searxng-search": "http://localhost:8888/search",
petals: "https://chat.petals.dev/api/v1/generate",
+ comfyui: "http://localhost:8188",
};
export function getLocalProviderMetadata(providerId?: string | null) {
@@ -320,6 +315,7 @@ export function getProviderBaseUrlPlaceholder(providerId?: string | null) {
return "https://my-resource.openai.azure.com";
case "bailian-coding-plan":
case "xiaomi-mimo":
+ case "comfyui":
return getProviderBaseUrlDefault(providerId);
case "siliconflow":
return "https://api.siliconflow.cn/v1";
@@ -385,108 +381,10 @@ export function formatExcludedModelsInput(value: unknown): string {
}
// ---------------------------------------------------------------------------
-// Web-session credential label / hint helpers (Phase 2b)
+// Web-session credential label / hint helpers (Phase 2b) — moved to
+// providerCredentialText.ts (#1904 own growth); re-exported above.
// ---------------------------------------------------------------------------
-export function getWebSessionCredentialLabel(
- t: ProviderMessageTranslator,
- requirement: WebSessionCredentialRequirement,
- optional: boolean
-): string {
- if (requirement.kind === "none") {
- return providerText(t, "webNoAuthCredentialLabel", "No credential required");
- }
- const baseLabel =
- requirement.kind === "token"
- ? providerText(t, "webTokenCredentialLabel", "Web session token")
- : t("sessionCookieLabel");
- return optional ? `${baseLabel} (${t("optional").toLowerCase()})` : baseLabel;
-}
-
-export function getWebSessionCredentialHint(
- t: ProviderMessageTranslator,
- requirement: WebSessionCredentialRequirement,
- providerName: string,
- editing: boolean
-): string | undefined {
- if (requirement.kind === "none") return undefined;
-
- const values = { provider: providerName, credential: requirement.credentialName };
- if (editing) {
- return requirement.kind === "token"
- ? providerText(
- t,
- "webTokenEditHint",
- "Leave blank to keep the current web session token. Credential: {credential}.",
- values
- )
- : providerText(
- t,
- "webCookieEditHint",
- "Leave blank to keep the current session cookie. Required cookie: {credential}.",
- values
- );
- }
-
- // #5465 — a provider-specific hint (e.g. t3.chat's step-by-step DevTools copy)
- // replaces the generic one-line cookie/token template when that template is
- // unclear for the provider (t3.chat needs a localStorage value AND the Cookie
- // header, so "Required cookie: convex-session-id + Cookie header…" reads
- // circular). The override key ships translated in every locale.
- if (requirement.hintKey) {
- return providerText(
- t,
- requirement.hintKey,
- requirement.hintFallback ??
- "Open the provider's web session in DevTools, copy the required credential(s), and paste them in the fields below.",
- values
- );
- }
-
- return requirement.kind === "token"
- ? providerText(
- t,
- "webTokenCredentialHint",
- "Credential: {credential}. Paste the token value from your own signed-in {provider} web session, or a DevTools HAR export if the provider supports it.",
- values
- )
- : providerText(
- t,
- "webCookieCredentialHint",
- "Required cookie: {credential}. Paste the Cookie header value from your own signed-in {provider} web session. Do not include the Cookie: prefix.",
- values
- );
-}
-
-export function getWebSessionCredentialCheckLabel(
- t: ProviderMessageTranslator,
- requirement: WebSessionCredentialRequirement
-): string {
- if (requirement.kind === "token") return providerText(t, "checkWebToken", "Check token");
- return providerText(t, "checkCookie", "Check cookie");
-}
-
-export function getAddCredentialModalTitle(
- t: ProviderMessageTranslator,
- providerName: string,
- requirement: WebSessionCredentialRequirement | null
-): string {
- if (!requirement) return t("addProviderApiKeyTitle", { provider: providerName });
- if (requirement.kind === "none") {
- return providerText(t, "addProviderConnectionTitle", "Add {provider} connection", {
- provider: providerName,
- });
- }
- if (requirement.kind === "token") {
- return providerText(t, "addProviderWebTokenTitle", "Add {provider} web token", {
- provider: providerName,
- });
- }
- return providerText(t, "addProviderSessionCookieTitle", "Add {provider} session cookie", {
- provider: providerName,
- });
-}
-
// ---------------------------------------------------------------------------
// Upstream-headers helpers (Phase 2b)
// ---------------------------------------------------------------------------
diff --git a/src/app/(dashboard)/dashboard/providers/hooks/useSyncedModelsByProvider.ts b/src/app/(dashboard)/dashboard/providers/hooks/useSyncedModelsByProvider.ts
new file mode 100644
index 0000000000..86e89abcee
--- /dev/null
+++ b/src/app/(dashboard)/dashboard/providers/hooks/useSyncedModelsByProvider.ts
@@ -0,0 +1,36 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import type { LiveModelsByProviderId } from "../providerPageUtils";
+
+/**
+ * useSyncedModelsByProvider — fetch the live/synced model catalog for every
+ * provider connection via GET /api/synced-available-models, so the Providers
+ * page model-name filter can match against real upstream models (not just
+ * the static curated registry). See #7250: aggregator providers (openrouter,
+ * kilocode, theoldllm...) declare a single-entry static placeholder, so a
+ * search for a real model name never matched and silently hid the provider.
+ *
+ * Fails soft — a fetch error leaves the map empty, and callers fall back to
+ * the static registry only.
+ */
+export function useSyncedModelsByProvider(): LiveModelsByProviderId {
+ const [models, setModels] = useState({});
+
+ useEffect(() => {
+ let cancelled = false;
+ fetch("/api/synced-available-models")
+ .then((res) => (res.ok ? res.json() : null))
+ .then((data) => {
+ if (!cancelled && data && typeof data === "object") {
+ setModels(data as LiveModelsByProviderId);
+ }
+ })
+ .catch(() => {});
+ return () => {
+ cancelled = true;
+ };
+ }, []);
+
+ return models;
+}
diff --git a/src/app/(dashboard)/dashboard/providers/page.tsx b/src/app/(dashboard)/dashboard/providers/page.tsx
index 2393ac6046..f6192498ef 100644
--- a/src/app/(dashboard)/dashboard/providers/page.tsx
+++ b/src/app/(dashboard)/dashboard/providers/page.tsx
@@ -17,6 +17,7 @@ import { pickDisplayValue } from "@/shared/utils/maskEmail";
import useEmailPrivacyStore from "@/store/emailPrivacyStore";
import { useNotificationStore } from "@/store/notificationStore";
import { useTranslations } from "next-intl";
+import { useSyncedModelsByProvider } from "./hooks/useSyncedModelsByProvider";
import {
buildStaticProviderEntries,
buildCompatibleProviderGroups,
@@ -191,6 +192,7 @@ export default function ProvidersPage() {
const [repairingEnv, setRepairingEnv] = useState(false);
const [searchQuery, setSearchQuery] = useState("");
const [modelSearchQuery, setModelSearchQuery] = useState("");
+ const liveModelsByProviderId = useSyncedModelsByProvider();
const [showFreeOnly, setShowFreeOnly] = useState(false);
const [activeCategory, setActiveCategory] = useState(null);
// #4240: media-category (serviceKind) filter — composes with activeCategory,
@@ -497,7 +499,8 @@ export default function ProvidersPage() {
searchQuery,
showFreeOnly,
modelSearchQuery,
- activeServiceKind
+ activeServiceKind,
+ liveModelsByProviderId
);
const rawNoAuthEntriesAll = buildStaticProviderEntries("no-auth", getProviderStats);
@@ -514,7 +517,8 @@ export default function ProvidersPage() {
searchQuery,
showFreeOnly,
modelSearchQuery,
- activeServiceKind
+ activeServiceKind,
+ liveModelsByProviderId
);
const apiKeyProviderEntriesAll = buildStaticProviderEntries("apikey", getProviderStats);
@@ -532,7 +536,8 @@ export default function ProvidersPage() {
searchQuery,
showFreeOnly,
modelSearchQuery,
- activeServiceKind
+ activeServiceKind,
+ liveModelsByProviderId
);
const aggregatorProviderEntriesAll = apiKeyProviderEntriesAll.filter((entry) =>
AGGREGATOR_PROVIDER_IDS.has(entry.providerId)
@@ -543,7 +548,8 @@ export default function ProvidersPage() {
searchQuery,
showFreeOnly,
modelSearchQuery,
- activeServiceKind
+ activeServiceKind,
+ liveModelsByProviderId
);
const imageProviderEntriesAll = apiKeyProviderEntriesAll.filter((entry) =>
IMAGE_ONLY_PROVIDER_IDS.has(entry.providerId)
@@ -554,7 +560,8 @@ export default function ProvidersPage() {
searchQuery,
showFreeOnly,
modelSearchQuery,
- activeServiceKind
+ activeServiceKind,
+ liveModelsByProviderId
);
const enterpriseProviderEntriesAll = apiKeyProviderEntriesAll.filter((entry) =>
ENTERPRISE_CLOUD_PROVIDER_IDS.has(entry.providerId)
@@ -565,7 +572,8 @@ export default function ProvidersPage() {
searchQuery,
showFreeOnly,
modelSearchQuery,
- activeServiceKind
+ activeServiceKind,
+ liveModelsByProviderId
);
const videoProviderEntriesAll = apiKeyProviderEntriesAll.filter((entry) =>
VIDEO_PROVIDER_IDS.has(entry.providerId)
@@ -576,7 +584,8 @@ export default function ProvidersPage() {
searchQuery,
showFreeOnly,
modelSearchQuery,
- activeServiceKind
+ activeServiceKind,
+ liveModelsByProviderId
);
const embeddingRerankProviderEntriesAll = apiKeyProviderEntriesAll.filter((entry) =>
EMBEDDING_RERANK_PROVIDER_IDS.has(entry.providerId)
@@ -587,7 +596,8 @@ export default function ProvidersPage() {
searchQuery,
showFreeOnly,
modelSearchQuery,
- activeServiceKind
+ activeServiceKind,
+ liveModelsByProviderId
);
const webCookieProviderEntriesAll = buildStaticProviderEntries("web-cookie", getProviderStats);
@@ -597,7 +607,8 @@ export default function ProvidersPage() {
searchQuery,
showFreeOnly,
modelSearchQuery,
- activeServiceKind
+ activeServiceKind,
+ liveModelsByProviderId
);
const localProviderEntriesAll = buildStaticProviderEntries("local", getProviderStats);
@@ -607,7 +618,8 @@ export default function ProvidersPage() {
searchQuery,
showFreeOnly,
modelSearchQuery,
- activeServiceKind
+ activeServiceKind,
+ liveModelsByProviderId
);
const searchProviderEntriesAll = buildStaticProviderEntries("search", getProviderStats);
@@ -617,7 +629,8 @@ export default function ProvidersPage() {
searchQuery,
showFreeOnly,
modelSearchQuery,
- activeServiceKind
+ activeServiceKind,
+ liveModelsByProviderId
);
const audioProviderEntriesAll = buildStaticProviderEntries("audio", getProviderStats);
@@ -627,7 +640,8 @@ export default function ProvidersPage() {
searchQuery,
showFreeOnly,
modelSearchQuery,
- activeServiceKind
+ activeServiceKind,
+ liveModelsByProviderId
);
const cloudAgentProviderEntriesAll = buildStaticProviderEntries("cloud-agent", getProviderStats);
@@ -637,7 +651,8 @@ export default function ProvidersPage() {
searchQuery,
showFreeOnly,
modelSearchQuery,
- activeServiceKind
+ activeServiceKind,
+ liveModelsByProviderId
);
const upstreamProxyEntriesAll = buildStaticProviderEntries("upstream-proxy", getProviderStats);
@@ -647,7 +662,8 @@ export default function ProvidersPage() {
searchQuery,
showFreeOnly,
modelSearchQuery,
- activeServiceKind
+ activeServiceKind,
+ liveModelsByProviderId
);
const compatibleProviderEntriesAll = [
@@ -679,7 +695,8 @@ export default function ProvidersPage() {
searchQuery,
showFreeOnly,
modelSearchQuery,
- activeServiceKind
+ activeServiceKind,
+ liveModelsByProviderId
);
const staticProviderEntriesAll = dedupeProviderEntries([
@@ -704,7 +721,8 @@ export default function ProvidersPage() {
searchQuery,
undefined,
modelSearchQuery,
- activeServiceKind
+ activeServiceKind,
+ liveModelsByProviderId
);
// IDE providers: subset of oauth/apikey providers that are editors/IDEs with
@@ -719,7 +737,8 @@ export default function ProvidersPage() {
searchQuery,
showFreeOnly,
modelSearchQuery,
- activeServiceKind
+ activeServiceKind,
+ liveModelsByProviderId
);
const oauthOnlyEntriesAll = oauthProviderEntriesAll
@@ -739,7 +758,8 @@ export default function ProvidersPage() {
searchQuery,
showFreeOnly,
modelSearchQuery,
- activeServiceKind
+ activeServiceKind,
+ liveModelsByProviderId
);
const compactProviderEntries = buildCompactProviderEntriesForPage({
diff --git a/src/app/(dashboard)/dashboard/providers/providerPageUtils.ts b/src/app/(dashboard)/dashboard/providers/providerPageUtils.ts
index 762a9bb629..3c9edf35f6 100644
--- a/src/app/(dashboard)/dashboard/providers/providerPageUtils.ts
+++ b/src/app/(dashboard)/dashboard/providers/providerPageUtils.ts
@@ -212,13 +212,35 @@ export function buildCompatibleProviderGroups(
return { openai, anthropic, claudeCode };
}
+export type LiveModelsByProviderId = Record>;
+
+/**
+ * Models to match against for the model-name filter: the static curated
+ * registry PLUS any live/synced catalog for that provider connection (#7250).
+ * Aggregator providers (openrouter, kilocode, theoldllm...) declare a
+ * single-entry static placeholder — matching only that entry means a search
+ * for any real upstream model name can never match, silently hiding the
+ * provider. When the live catalog is empty/unavailable we fall back to the
+ * static-only list so already-correct static providers are unaffected.
+ */
+function getFilterableModelsForEntry(
+ providerId: string,
+ liveModelsByProviderId?: LiveModelsByProviderId
+): Array<{ id: string; name?: string }> {
+ const staticModels = getModelsByProviderId(providerId);
+ const liveModels = liveModelsByProviderId?.[providerId];
+ if (!liveModels || liveModels.length === 0) return staticModels;
+ return [...staticModels, ...liveModels];
+}
+
export function filterConfiguredProviderEntries(
entries: ProviderEntry[],
showConfiguredOnly: boolean,
searchQuery?: string,
showFreeOnly?: boolean,
modelSearchQuery?: string,
- serviceKindFilter?: string | null
+ serviceKindFilter?: string | null,
+ liveModelsByProviderId?: LiveModelsByProviderId
): ProviderEntry[] {
let filtered = entries;
@@ -261,8 +283,8 @@ export function filterConfiguredProviderEntries(
if (modelSearchQuery && modelSearchQuery.trim()) {
const q = modelSearchQuery.trim();
filtered = filtered.filter((entry) => {
- const models = getModelsByProviderId(entry.providerId);
- return models.some((m) => matchesSearch(m.id, q) || matchesSearch(m.name, q));
+ const models = getFilterableModelsForEntry(entry.providerId, liveModelsByProviderId);
+ return models.some((m) => matchesSearch(m.id, q) || matchesSearch(m.name || "", q));
});
}
diff --git a/src/app/(dashboard)/dashboard/settings/components/BackgroundDegradationTab.tsx b/src/app/(dashboard)/dashboard/settings/components/BackgroundDegradationTab.tsx
index ef35d57e96..f23e91f65d 100644
--- a/src/app/(dashboard)/dashboard/settings/components/BackgroundDegradationTab.tsx
+++ b/src/app/(dashboard)/dashboard/settings/components/BackgroundDegradationTab.tsx
@@ -1,7 +1,7 @@
"use client";
import { useState, useEffect } from "react";
-import { Card, Toggle } from "@/shared/components";
+import { Card, ModelSelectField, Toggle } from "@/shared/components";
import { useTranslations } from "next-intl";
export default function BackgroundDegradationTab() {
@@ -153,21 +153,21 @@ export default function BackgroundDegradationTab() {
{/* Add new mapping */}
- setNewFrom(e.target.value)}
- className="flex-1 px-3 py-2 rounded-lg text-sm bg-surface border border-border/50 focus:border-sky-500/50 focus:outline-none"
- />
+
+
+
→
- setNewTo(e.target.value)}
- className="flex-1 px-3 py-2 rounded-lg text-sm bg-surface border border-border/50 focus:border-sky-500/50 focus:outline-none"
- />
+
+
+
-
+ onChange={(v) =>
setComboDefaults((prev) => ({
...prev,
- handoffModel: e.target.value,
+ handoffModel: v,
}))
}
className="text-sm"
diff --git a/src/app/(dashboard)/dashboard/settings/components/RoutingTab.tsx b/src/app/(dashboard)/dashboard/settings/components/RoutingTab.tsx
index a0860e29e6..8694dbcc4f 100644
--- a/src/app/(dashboard)/dashboard/settings/components/RoutingTab.tsx
+++ b/src/app/(dashboard)/dashboard/settings/components/RoutingTab.tsx
@@ -2,6 +2,7 @@
import { useEffect, useMemo, useState } from "react";
import { Button, Card, Collapsible, Input, Select, Toggle } from "@/shared/components";
+import ModelSelectField from "@/shared/components/ModelSelectField";
import { useTranslations } from "next-intl";
import { useNotificationStore } from "@/store/notificationStore";
import {
@@ -1502,18 +1503,12 @@ export default function RoutingTab() {
"When a request includes a native web_search tool, route the whole request to this model instead of the default — useful for providers that don't implement Anthropic's web_search server tool. Leave blank to disable."}
- updateSetting({ webSearchRouteModel: e.target.value })}
- placeholder={
- t("webSearchRoutePlaceholder") || "e.g. openrouter,anthropic/claude-3.5-sonnet"
- }
+ updateSetting({ webSearchRouteModel: v })}
+ placeholder={t("webSearchRoutePlaceholder") || "Search or select a model…"}
disabled={loading}
- aria-label={t("webSearchRouteTitle") || "Web search routing model"}
+ ariaLabel={t("webSearchRouteTitle") || "Web search routing model"}
/>
@@ -183,6 +205,12 @@ export default function ModelRoutingSection({ combos: externalCombos }: { combos
bg-white dark:bg-black/20 focus:outline-none focus:ring-1 focus:ring-primary"
/>
{t("patternHint")}
+ {patternIsPaidOnly && (
+
+ {t("paidModelPatternWarning") ||
+ "This pattern only matches paid models — enable paid models or adjust the pattern."}
+
+ )}
|