reafactor: rebase and move provider section

Author: TheGB0077

src/browser/features/Settings/Sections/ModelRow.tsx

@@ -15,6 +15,10 @@ import { formatModelDisplayName } from "@/common/utils/ai/modelDisplay";
 import { cn } from "@/common/lib/utils";
 import type { AvailableRoute } from "@/common/routing";
 import { getModelStats, type ModelStats } from "@/common/utils/tokens/modelStats";
+import {
+  isOpenAICompatibleProvider,
+  formatOpenAICompatibleDisplayName,
+} from "@/common/utils/providers/openaiCompatible";
 
 /** Format tokens as human-readable string (e.g. 200000 -> "200k") */
 function formatTokenCount(tokens: number): string {
@@ -329,6 +333,11 @@ export function ModelRow(props: ModelRowProps) {
           <span className="text-foreground min-w-0 truncate font-mono text-xs">
             {props.modelId}
           </span>
+          {isOpenAICompatibleProvider(props.provider) && (
+            <span className="text-muted shrink-0 rounded bg-background-secondary px-1.5 py-0.5 text-[10px]">
+              {formatOpenAICompatibleDisplayName(props.provider)}
+            </span>
+          )}
           {mappedModelDisplayName && (
             <span className="text-muted ml-1 flex shrink-0 items-center gap-1 text-[10px]">
               →

src/browser/features/Settings/Sections/OpenAICompatibleProvidersSection.tsx

@@ -262,7 +262,7 @@ export function OpenAICompatibleProvidersSection({
           <p className="text-muted text-xs">
             Configure OpenAI-compatible API endpoints (Together AI, Fireworks, LM Studio, etc.).
             Models are accessed via{" "}
-            <code className="text-accent">openai-compatible:provider-id:model-name</code>.
+            <code className="text-accent">openai-compatible/provider-id:model-name</code>.
           </p>
 
           {error && (
@@ -455,7 +455,7 @@ export function OpenAICompatibleProvidersSection({
                     placeholder="together-ai"
                   />
                   <p className="text-dim mt-1 text-xs">
-                    Used in model strings: openai-compatible:
+                    Used in model strings: openai-compatible/
                     <span className="text-accent">together-ai</span>:model-id
                   </p>
                 </div>

src/browser/features/Settings/Sections/ProvidersSection.tsx

@@ -31,7 +31,6 @@ import { CSS } from "@dnd-kit/utilities";
 import { createEditKeyHandler } from "@/browser/utils/ui/keybinds";
 import { getBrowserBackendBaseUrl } from "@/browser/utils/backendBaseUrl";
 import { PROVIDER_DEFINITIONS, type ProviderName } from "@/common/constants/providers";
-import type { ProvidersConfigMap } from "@/common/orpc/types";
 import { OpenAICompatibleProvidersSection } from "./OpenAICompatibleProvidersSection";
 import { usePolicy } from "@/browser/contexts/PolicyContext";
 import { getAllowedProvidersForUi } from "@/browser/utils/policyUi";
@@ -1228,10 +1227,27 @@ export function ProvidersSection() {
       {(
         [
           { key: "direct", label: "Direct Providers", providers: providerGroups.direct },
+          {
+            key: "openai-compatible",
+            label: "User Providers",
+            providers: [],
+            render: () => <OpenAICompatibleProvidersSection />,
+          },
           { key: "gateway", label: "Gateways", providers: providerGroups.gateway },
           { key: "local", label: "Local", providers: providerGroups.local },
         ] as const
       ).map((section) => {
+        if ("render" in section) {
+          return (
+            <div key={section.key} className="space-y-2">
+              <div className="text-muted text-xs font-medium tracking-wide uppercase">
+                {section.label}
+              </div>
+              {section.render()}
+            </div>
+          );
+        }
+
         if (section.providers.length === 0) {
           return null;
         }
@@ -2203,8 +2219,6 @@ export function ProvidersSection() {
         );
       })}
 
-      <OpenAICompatibleProvidersSection />
-
       {config && !hasAnyConfiguredProvider && (
         <div className="border-warning/40 bg-warning/10 text-warning rounded-md border px-3 py-2 text-xs">
           No providers are currently enabled. You won&apos;t be able to send messages until you

src/browser/features/Settings/Sections/System1Section.tsx

@@ -14,7 +14,6 @@ import { useAPI } from "@/browser/contexts/API";
 import { useOptionalWorkspaceContext } from "@/browser/contexts/WorkspaceContext";
 import { getDefaultModel, getSuggestedModels } from "@/browser/hooks/useModelsFromSettings";
 import { useProvidersConfig } from "@/browser/hooks/useProvidersConfig";
-import { useOpenAICompatibleProviders } from "@/browser/hooks/useOpenAICompatibleProviders";
 import { usePersistedState } from "@/browser/hooks/usePersistedState";
 import {
   getModelKey,

src/browser/hooks/useModelsFromSettings.ts

@@ -8,7 +8,6 @@ import {
 import { WORKSPACE_DEFAULTS } from "@/constants/workspaceDefaults";
 import { useProvidersConfig } from "./useProvidersConfig";
 import { useRouting } from "./useRouting";
-import { useOpenAICompatibleProviders } from "./useOpenAICompatibleProviders";
 import { usePolicy } from "@/browser/contexts/PolicyContext";
 import { useAPI } from "@/browser/contexts/API";
 import { isValidProvider } from "@/common/constants/providers";
@@ -20,9 +19,6 @@ import {
 } from "@/common/utils/ai/models";
 import { isModelAvailable } from "@/common/routing";
 import type { ProviderModelEntry, ProvidersConfigMap } from "@/common/orpc/types";
-import type {
-  OpenAICompatibleProvidersInfo,
-} from "@/common/orpc/types";
 import { DEFAULT_MODEL_KEY, HIDDEN_MODELS_KEY } from "@/common/constants/storage";
 
 import { getProviderModelEntryId } from "@/common/utils/providers/modelEntries";
@@ -127,7 +123,6 @@ export function useModelsFromSettings() {
   );
   const { config, refresh } = useProvidersConfig();
   const { routePriority, routeOverrides } = useRouting();
-  const { config: openaiCompatibleConfig } = useOpenAICompatibleProviders();
 
   const [defaultModel, setDefaultModel] = usePersistedState<string>(
     DEFAULT_MODEL_KEY,

src/common/utils/providers/openaiCompatible.ts

@@ -0,0 +1,13 @@
+const OPENAI_COMPATIBLE_PREFIX = "openai-compatible/";
+
+export function isOpenAICompatibleProvider(provider: string): boolean {
+  return provider.startsWith(OPENAI_COMPATIBLE_PREFIX);
+}
+
+export function formatOpenAICompatibleDisplayName(provider: string): string {
+  const instanceId = provider.slice(OPENAI_COMPATIBLE_PREFIX.length);
+  return instanceId
+    .split("-")
+    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+    .join(" ");
+}