fix: update the permission for viewing provider pages

src/app/(dashboard)/dashboard/providers/[id]/page.js

@@ -10,7 +10,6 @@ import { getModelsByProviderId, getModelKind } from "@/shared/constants/models";
 import { getThinkingLevels } from "open-sse/providers/thinkingLevels.js";
 import { useCopyToClipboard } from "@/shared/hooks/useCopyToClipboard";
 import { useModelCaps } from "@/shared/hooks/useModelCaps";
-import useUserStore from "@/store/userStore";
 import { translate } from "@/i18n/runtime";
 import { fetchSuggestedModels } from "@/shared/utils/providerModelsFetcher";
 import { getProviderCustomModelRows } from "@/shared/utils/providerCustomModels";
@@ -39,7 +38,6 @@ export default function ProviderDetailPage() {
   const router = useRouter();
   const providerId = params.id;
   const { getCaps } = useModelCaps();
-  const user = useUserStore((state) => state.user);
   const [connections, setConnections] = useState([]);
   const [loading, setLoading] = useState(true);
   const [providerNode, setProviderNode] = useState(null);
@@ -81,8 +79,6 @@ export default function ProviderDetailPage() {
   const [importingQoderModels, setImportingQoderModels] = useState(false);
   const { copied, copy } = useCopyToClipboard();
 
-  const canManageModelAvailability = user?.role === "admin";
-
   const AG_RISK_STORAGE_KEY = "ag_risk_confirmed";
 
   const openOAuthConnection = () => {
@@ -1121,7 +1117,7 @@ export default function ProviderDetailPage() {
               onTest={connections.length > 0 || isFreeNoAuth ? () => handleTestModel(model.id) : undefined}
               isTesting={testingModelIds.has(model.id)}
               isFree={model.isFree}
-              onDisable={canManageModelAvailability ? () => handleDisableModel(model.id) : undefined}
+              onDisable={() => handleDisableModel(model.id)}
               caps={getCaps(`${providerId}/${model.id}`)}
               thinkingSuffix={resolveThinkingSuffix(model.id)}
             />
@@ -1185,7 +1181,7 @@ export default function ProviderDetailPage() {
         })()}
 
         {/* Disabled models — restorable */}
-        {canManageModelAvailability && disabledDisplayModels.length > 0 && (
+        {disabledDisplayModels.length > 0 && (
           <div className="w-full mt-2">
             <p className="text-xs text-text-muted mb-2">Disabled models ({disabledDisplayModels.length}):</p>
             <div className="flex flex-wrap gap-2">
@@ -1616,7 +1612,7 @@ export default function ProviderDetailPage() {
               </select>
             )}
           </div>
-          {canManageModelAvailability && !isCompatible && (() => {
+          {!isCompatible && (() => {
             const allIds = [
               ...models,
               ...kiloFreeModels.filter((fm) => !models.some((m) => m.id === fm.id)),

src/app/(dashboard)/dashboard/providers/new/page.js

@@ -1,220 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { useRouter } from "next/navigation";
-import Link from "next/link";
-import { Card, Button, Input, Select, Toggle } from "@/shared/components";
-import { AI_PROVIDERS, AUTH_METHODS } from "@/shared/constants/config";
-
-const providerOptions = Object.values(AI_PROVIDERS).map((p) => ({
-  value: p.id,
-  label: p.name,
-}));
-
-const authMethodOptions = Object.values(AUTH_METHODS).map((m) => ({
-  value: m.id,
-  label: m.name,
-}));
-
-export default function NewProviderPage() {
-  const router = useRouter();
-  const [loading, setLoading] = useState(false);
-  const [formData, setFormData] = useState({
-    provider: "",
-    authMethod: "api_key",
-    apiKey: "",
-    displayName: "",
-    isActive: true,
-  });
-  const [errors, setErrors] = useState({});
-
-  const handleChange = (field, value) => {
-    setFormData((prev) => ({ ...prev, [field]: value }));
-    if (errors[field]) {
-      setErrors((prev) => ({ ...prev, [field]: null }));
-    }
-  };
-
-  const validate = () => {
-    const newErrors = {};
-    if (!formData.provider) newErrors.provider = "Please select a provider";
-    if (formData.authMethod === "api_key" && !formData.apiKey) {
-      newErrors.apiKey = "API Key is required";
-    }
-    setErrors(newErrors);
-    return Object.keys(newErrors).length === 0;
-  };
-
-  const handleSubmit = async (e) => {
-    e.preventDefault();
-    if (!validate()) return;
-
-    setLoading(true);
-    try {
-      const response = await fetch("/api/providers", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify(formData),
-      });
-
-      if (response.ok) {
-        router.push("/dashboard/providers");
-      } else {
-        const data = await response.json();
-        setErrors({ submit: data.error || "Failed to create provider" });
-      }
-    } catch (error) {
-      setErrors({ submit: "An error occurred. Please try again." });
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const selectedProvider = AI_PROVIDERS[formData.provider];
-
-  return (
-    <div className="max-w-2xl mx-auto">
-      {/* Header */}
-      <div className="mb-8">
-        <Link
-          href="/dashboard/providers"
-          className="inline-flex items-center gap-1 text-sm text-text-muted hover:text-primary transition-colors mb-4"
-        >
-          <span className="material-symbols-outlined text-lg">arrow_back</span>
-          Back to Providers
-        </Link>
-        <h1 className="text-3xl font-semibold tracking-tight">Add New Provider</h1>
-        <p className="text-text-muted mt-2">
-          Configure a new AI provider to use with your applications.
-        </p>
-      </div>
-
-      {/* Form */}
-      <Card>
-        <form onSubmit={handleSubmit} className="flex flex-col gap-6">
-          {/* Provider Selection */}
-          <Select
-            label="Provider"
-            options={providerOptions}
-            value={formData.provider}
-            onChange={(e) => handleChange("provider", e.target.value)}
-            placeholder="Select a provider"
-            error={errors.provider}
-            required
-          />
-
-          {/* Provider Info */}
-          {selectedProvider && (
-            <Card.Section className="flex items-center gap-3">
-              <div
-                className="size-10 rounded-lg flex items-center justify-center bg-bg border border-border"
-              >
-                <span
-                  className="material-symbols-outlined text-xl"
-                  style={{ color: selectedProvider.color }}
-                >
-                  {selectedProvider.icon}
-                </span>
-              </div>
-              <div>
-                <p className="font-medium">{selectedProvider.name}</p>
-                <p className="text-sm text-text-muted">
-                  Selected provider
-                </p>
-              </div>
-            </Card.Section>
-          )}
-
-          {/* Auth Method */}
-          <div className="flex flex-col gap-3">
-            <label className="text-sm font-medium">
-              Authentication Method <span className="text-red-500">*</span>
-            </label>
-            <div className="flex gap-3">
-              {authMethodOptions.map((method) => (
-                <button
-                  key={method.value}
-                  type="button"
-                  onClick={() => handleChange("authMethod", method.value)}
-                  className={`flex-1 flex items-center justify-center gap-2 p-4 rounded-lg border transition-all ${
-                    formData.authMethod === method.value
-                      ? "border-primary bg-primary/5 text-primary"
-                      : "border-border hover:border-primary/50"
-                  }`}
-                >
-                  <span className="material-symbols-outlined">
-                    {method.value === "api_key" ? "key" : "lock"}
-                  </span>
-                  <span className="font-medium">{method.label}</span>
-                </button>
-              ))}
-            </div>
-          </div>
-
-          {/* API Key Input */}
-          {formData.authMethod === "api_key" && (
-            <Input
-              label="API Key"
-              type="password"
-              placeholder="Enter your API key"
-              value={formData.apiKey}
-              onChange={(e) => handleChange("apiKey", e.target.value)}
-              error={errors.apiKey}
-              hint="Your API key will be encrypted and stored securely."
-              required
-            />
-          )}
-
-          {/* OAuth2 Button */}
-          {formData.authMethod === "oauth2" && (
-            <Card.Section>
-              <p className="text-sm text-text-muted mb-4">
-                Connect your account using OAuth2 authentication.
-              </p>
-              <Button type="button" variant="secondary" icon="link">
-                Connect with OAuth2
-              </Button>
-            </Card.Section>
-          )}
-
-          {/* Display Name */}
-          <Input
-            label="Display Name"
-            placeholder="e.g., Production API, Dev Environment"
-            value={formData.displayName}
-            onChange={(e) => handleChange("displayName", e.target.value)}
-            hint="Optional. A friendly name to identify this configuration."
-          />
-
-          {/* Active Toggle */}
-          <Toggle
-            checked={formData.isActive}
-            onChange={(checked) => handleChange("isActive", checked)}
-            label="Active"
-            description="Enable this provider for use in your applications"
-          />
-
-          {/* Error Message */}
-          {errors.submit && (
-            <div className="p-4 rounded-lg bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 text-red-600 dark:text-red-400 text-sm">
-              {errors.submit}
-            </div>
-          )}
-
-          {/* Actions */}
-          <div className="flex gap-3 pt-4 border-t border-border">
-            <Link href="/dashboard/providers" className="flex-1">
-              <Button type="button" variant="ghost" fullWidth>
-                Cancel
-              </Button>
-            </Link>
-            <Button type="submit" loading={loading} fullWidth className="flex-1">
-              Create Provider
-            </Button>
-          </div>
-        </form>
-      </Card>
-    </div>
-  );
-}
-

src/app/(dashboard)/dashboard/providers/page.js

@@ -22,7 +22,6 @@ import Link from "next/link";
 import { getErrorCode, getRelativeTime } from "@/shared/utils";
 import { useNotificationStore } from "@/store/notificationStore";
 import { useHeaderSearchStore } from "@/store/headerSearchStore";
-import useUserStore from "@/store/userStore";
 import ModelAvailabilityBadge from "./components/ModelAvailabilityBadge";
 import AddCompatibleModal from "./components/AddCompatibleModal";
 
@@ -106,12 +105,9 @@ export default function ProvidersPage() {
   const [testingMode, setTestingMode] = useState(null);
   const [testResults, setTestResults] = useState(null);
   const notify = useNotificationStore();
-  const user = useUserStore((state) => state.user);
   const searchQuery = useHeaderSearchStore((s) => s.query);
   const registerSearch = useHeaderSearchStore((s) => s.register);
   const unregisterSearch = useHeaderSearchStore((s) => s.unregister);
-  const isAdmin = user?.role === "admin";
-
   useEffect(() => {
     registerSearch("Search providers...");
     return () => unregisterSearch();
@@ -287,7 +283,6 @@ export default function ProvidersPage() {
     .filter(
       ([, info]) =>
         !info.hidden &&
-        (user?.role === "admin" || !info.noAuth) &&
         matchSearch(info.name),
     )
     .sort(([, a], [, b]) => (b.noAuth ? 1 : 0) - (a.noAuth ? 1 : 0));
@@ -295,7 +290,6 @@ export default function ProvidersPage() {
     Object.entries(FREE_TIER_PROVIDERS).filter(
       ([, info]) =>
         !info.hidden &&
-        (user?.role === "admin" || !info.noAuth) &&
         matchSearch(info.name) &&
         (info.serviceKinds ?? ["llm"]).includes("llm"),
     ),
@@ -336,10 +330,10 @@ export default function ProvidersPage() {
     freeEntries.length > 0 ||
     freeTierEntries.length > 0 ||
     apikeyEntries.length > 0 ||
-    (isAdmin && (
+    (
       compatibleProviders.length > 0 ||
       anthropicCompatibleProviders.length > 0
-    ));
+    );
 
   return (
     <div className="flex min-w-0 flex-col gap-6 px-1 sm:px-0">
@@ -353,7 +347,6 @@ export default function ProvidersPage() {
       )}
 
       {/* Custom provider configuration is administered centrally. */}
-      {isAdmin && (
       <div className="flex flex-col gap-4">
         <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
           <h2 className="text-lg sm:text-xl font-semibold flex items-center gap-2 leading-tight">
@@ -404,7 +397,6 @@ export default function ProvidersPage() {
           </div>
         )}
       </div>
-      )}
 
       {/* OAuth Providers */}
       {oauthEntries.length > 0 && (
@@ -582,7 +574,7 @@ export default function ProvidersPage() {
         </div>
       </div> */}
 
-      {isAdmin && <AddCompatibleModal
+      <AddCompatibleModal
         variant="openai"
         isOpen={showAddCompatibleModal}
         onClose={() => setShowAddCompatibleModal(false)}
@@ -590,8 +582,8 @@ export default function ProvidersPage() {
           setProviderNodes((prev) => [...prev, node]);
           setShowAddCompatibleModal(false);
         }}
-      />}
-      {isAdmin && <AddCompatibleModal
+      />
+      <AddCompatibleModal
         variant="anthropic"
         isOpen={showAddAnthropicCompatibleModal}
         onClose={() => setShowAddAnthropicCompatibleModal(false)}
@@ -599,7 +591,7 @@ export default function ProvidersPage() {
           setProviderNodes((prev) => [...prev, node]);
           setShowAddAnthropicCompatibleModal(false);
         }}
-      />}
+      />
 
       {/* Test Results Modal */}
       {testResults && (

src/app/(dashboard)/dashboard/usage/components/RequestDetailsTab.js

@@ -17,13 +17,13 @@ async function fetchProviderNames() {
     return { providerNameCache, providerNodesCache };
   }
 
-  const nodesRes = await fetch("/api/provider-nodes");
-  const nodesData = await nodesRes.json();
-  const nodes = nodesData.nodes || [];
+  const topologyRes = await fetch("/api/usage/topology-providers");
+  const topologyData = topologyRes.ok ? await topologyRes.json() : {};
+  const nodes = topologyData.providers || [];
   providerNodesCache = {};
 
   for (const node of nodes) {
-    providerNodesCache[node.id] = node.name;
+    providerNodesCache[node.provider] = node.nodeName || node.name || node.provider;
   }
 
   providerNameCache = {