From c33dc3e459ac315a0b40f5aa668325dc8ea12979 Mon Sep 17 00:00:00 2001 From: Kyle Carberry Date: Wed, 11 Mar 2026 08:58:14 -0700 Subject: [PATCH] fix(site): restore Add model button and fix header in Models/Providers sections (#22953) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Problem The refactor in #22914 moved the `SectionHeader` rendering into `ConfigureAgentsDialog`, but `ModelsSection` and `ProvidersSection` only render their action buttons (including the "Add model" dropdown) inside their own `SectionHeader`, which is gated on the `sectionLabel` prop. Since the dialog stopped passing `sectionLabel`, the Add button disappeared entirely — there was no way to add a model. Additionally, when clicking a model to edit, the `ModelForm` was supposed to take over the full panel (the section early-returns the form without any header), but the outer `SectionHeader` from the dialog remained visible above it. ## Fix Remove the duplicate `SectionHeader` from `ConfigureAgentsDialog` for both the Providers and Models sections. Instead, pass `sectionLabel`, `sectionDescription`, and `sectionBadge` through `ChatModelAdminPanel` to the inner `ProvidersSection`/`ModelsSection` components, which render their own headers with the appropriate action buttons. This restores: 1. The "Add" model dropdown button in the top-right of the Models section 2. Proper header hiding when clicking into a model edit form 3. The AdminBadge and rich description text on each section header --- .../ChatModelAdminPanel.tsx | 10 ++++++- .../ChatModelAdminPanel/ModelsSection.tsx | 11 ++++++-- .../ChatModelAdminPanel/ProvidersSection.tsx | 11 ++++++-- .../AgentsPage/ConfigureAgentsDialog.tsx | 28 ++++++++----------- 4 files changed, 39 insertions(+), 21 deletions(-) diff --git a/site/src/pages/AgentsPage/ChatModelAdminPanel/ChatModelAdminPanel.tsx b/site/src/pages/AgentsPage/ChatModelAdminPanel/ChatModelAdminPanel.tsx index 920ff3d5b6..9c7d03816c 100644 --- a/site/src/pages/AgentsPage/ChatModelAdminPanel/ChatModelAdminPanel.tsx +++ b/site/src/pages/AgentsPage/ChatModelAdminPanel/ChatModelAdminPanel.tsx @@ -13,7 +13,7 @@ import type * as TypesGen from "api/typesGenerated"; import { Alert, AlertDescription, AlertTitle } from "components/Alert/Alert"; import { ErrorAlert } from "components/Alert/ErrorAlert"; import { Spinner } from "components/Spinner/Spinner"; -import { type FC, useMemo, useState } from "react"; +import { type FC, type ReactNode, useMemo, useState } from "react"; import { useMutation, useQuery, useQueryClient } from "react-query"; import { cn } from "utils/cn"; import { formatProviderLabel } from "../modelOptions"; @@ -203,12 +203,16 @@ interface ChatModelAdminPanelProps { className?: string; section?: ChatModelAdminSection; sectionLabel?: string; + sectionDescription?: string; + sectionBadge?: ReactNode; } export const ChatModelAdminPanel: FC = ({ className, section = "providers", sectionLabel, + sectionDescription, + sectionBadge, }) => { const queryClient = useQueryClient(); const [requestedProvider, setRequestedProvider] = useState( @@ -311,6 +315,8 @@ export const ChatModelAdminPanel: FC = ({ {section === "providers" ? ( = ({ ) : ( = ({ sectionLabel, + sectionDescription, + sectionBadge, providerStates, selectedProvider, selectedProviderState, @@ -164,7 +168,10 @@ export const ModelsSection: FC = ({ {sectionLabel && ( )} diff --git a/site/src/pages/AgentsPage/ChatModelAdminPanel/ProvidersSection.tsx b/site/src/pages/AgentsPage/ChatModelAdminPanel/ProvidersSection.tsx index b8e57f0fcc..4a16da495b 100644 --- a/site/src/pages/AgentsPage/ChatModelAdminPanel/ProvidersSection.tsx +++ b/site/src/pages/AgentsPage/ChatModelAdminPanel/ProvidersSection.tsx @@ -1,6 +1,6 @@ import type * as TypesGen from "api/typesGenerated"; import { CheckCircleIcon, ChevronRightIcon, CircleIcon } from "lucide-react"; -import { type FC, useState } from "react"; +import { type FC, type ReactNode, useState } from "react"; import { cn } from "utils/cn"; import { SectionHeader } from "../SectionHeader"; import type { ProviderState } from "./ChatModelAdminPanel"; @@ -11,6 +11,8 @@ type ProviderView = { mode: "list" } | { mode: "detail"; provider: string }; interface ProvidersSectionProps { sectionLabel?: string; + sectionDescription?: string; + sectionBadge?: ReactNode; providerStates: readonly ProviderState[]; providerConfigsUnavailable: boolean; isProviderMutationPending: boolean; @@ -27,6 +29,8 @@ interface ProvidersSectionProps { export const ProvidersSection: FC = ({ sectionLabel, + sectionDescription, + sectionBadge, providerStates, providerConfigsUnavailable, isProviderMutationPending, @@ -80,7 +84,10 @@ export const ProvidersSection: FC = ({ {sectionLabel && ( )}
diff --git a/site/src/pages/AgentsPage/ConfigureAgentsDialog.tsx b/site/src/pages/AgentsPage/ConfigureAgentsDialog.tsx index 93687b3ea2..f816f37782 100644 --- a/site/src/pages/AgentsPage/ConfigureAgentsDialog.tsx +++ b/site/src/pages/AgentsPage/ConfigureAgentsDialog.tsx @@ -338,24 +338,20 @@ export const ConfigureAgentsDialog: FC = ({ )} {activeSection === "providers" && canManageChatModelConfigs && ( - <> - } - />{" "} - - + } + /> )} {activeSection === "models" && canManageChatModelConfigs && ( - <> - } - />{" "} - - + } + /> )}