Merge pull request Stack-Cairn#330 from hopingmiao/main

feat(settings): 模型选择器中增加直接编辑供应商的入口

Author: su-fen

crates/agent-gateway/web/src/app/GatewayApp.tsx

@@ -311,6 +311,7 @@ export default function GatewayApp() {
   const [projectPickerOpen, setProjectPickerOpen] = useState(false);
   const [workspaceCreateModalOpen, setWorkspaceCreateModalOpen] = useState(false);
   const [settingsSection, setSettingsSection] = useState<SectionId>("system");
+  const [settingsProviderId, setSettingsProviderId] = useState<string>();
   const [overlay, setOverlay] = useState<OverlayState>("closed");
   const { settings, setSettings, settingsSyncReady, settingsSyncError, settingsSaveState } =
     useGatewaySettingsSync({ token, api, activeAgentId: activeAgentScope });
@@ -3626,11 +3627,12 @@ export default function GatewayApp() {
 
   const handleComposerBusyChange = useCallback((_isBusy: boolean) => {}, []);
 
-  function openSettings(section: SectionId = "system") {
+  function openSettings(section: SectionId = "system", providerId?: string) {
     if (isMobileSidebarLayout()) {
       setSidebarOpen(false);
     }
     setSettingsSection(section);
+    setSettingsProviderId(section === "providers" ? providerId : undefined);
     setSettingsOpen(true);
     setOverlay("entering");
     requestAnimationFrame(() => requestAnimationFrame(() => setOverlay("open")));
@@ -5203,6 +5205,7 @@ export default function GatewayApp() {
                 saveState={settingsSaveState}
                 onBack={closeSettings}
                 initialSection={settingsSection}
+                initialProviderId={settingsProviderId}
                 hiddenSections={["remote"]}
                 onAgentDirectoryChanged={async () => {
                   if (!api) return;

crates/agent-gateway/web/src/pages/SettingsPage.tsx

@@ -130,11 +130,13 @@ export function SettingsPage(props: SettingsPageProps) {
     saveState,
     onBack,
     initialSection = "system",
+    initialProviderId,
     hiddenSections = [],
     onAgentDirectoryChanged,
   } = props;
   const { t } = useLocale();
   const [section, setSection] = useState<SectionId>(initialSection);
+  const [pendingProviderId, setPendingProviderId] = useState(initialProviderId);
 
   const sectionLabels: Record<SectionId, string> = {
     system: t("settings.navSystem"),
@@ -164,7 +166,8 @@ export function SettingsPage(props: SettingsPageProps) {
 
   useEffect(() => {
     setSection(initialSection);
-  }, [initialSection]);
+    setPendingProviderId(initialProviderId);
+  }, [initialProviderId, initialSection]);
 
   useEffect(() => {
     if (allNavItems.some((item) => item.id === section)) {
@@ -177,7 +180,14 @@ export function SettingsPage(props: SettingsPageProps) {
   const sectionContent = (() => {
     switch (section) {
       case "providers":
-        return <ProvidersSection settings={settings} setSettings={setSettings} />;
+        return (
+          <ProvidersSection
+            settings={settings}
+            setSettings={setSettings}
+            initialProviderId={pendingProviderId}
+            onInitialProviderHandled={() => setPendingProviderId(undefined)}
+          />
+        );
       case "system":
         return <SystemSettingsForm settings={settings} setSettings={setSettings} />;
       case "systemTools":

crates/agent-gateway/web/src/pages/chat/ChatHeader.tsx

@@ -12,6 +12,7 @@ import {
   Moon,
   OpenaiChatgptIcon,
   PanelLeft,
+  Pencil,
   Search,
   Settings,
   Sun,
@@ -64,7 +65,7 @@ export const ChatHeader = memo(function ChatHeader(props: {
   // 模型下拉内嵌的执行模式分段器：请求切到 Chat("text") 或 Agent("tools")。
   // agent-dev 视为 Agent 的一种，由调用方决定是否保持不降级。
   onSelectExecutionMode: (mode: "text" | "tools") => void;
-  onOpenSettings: (section?: SectionId) => void;
+  onOpenSettings: (section?: SectionId, providerId?: string) => void;
   onToggleTheme: () => void;
   onOpenSidebar: () => void;
   preThemeActions?: ReactNode;
@@ -303,28 +304,50 @@ export const ChatHeader = memo(function ChatHeader(props: {
                       return (
                         <div key={group.id} className="flex flex-col gap-0.5">
                           {groupIndex > 0 ? <hr className="my-1 h-px border-0 bg-muted" /> : null}
-                          <button
-                            type="button"
-                            onClick={() => toggleGroup(group.id)}
-                            aria-expanded={expanded}
-                            title={expanded ? t("chat.collapseProvider") : t("chat.expandProvider")}
-                            className="model-selector-group-label sticky top-0 z-10 flex h-[30px] w-full shrink-0 cursor-pointer items-center gap-1.5 bg-popover/95 px-2 py-0 text-left text-xs font-medium text-muted-foreground backdrop-blur transition-colors hover:bg-muted/40 focus-visible:bg-muted/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30 supports-[backdrop-filter]:bg-popover/80 dark:text-white/80"
-                          >
-                            <ProviderBrandIcon
-                              type={group.providerType}
-                              className="h-3.5 w-3.5 opacity-90"
-                            />
-                            <span className="min-w-0 flex-1 truncate">{group.name}</span>
-                            <span className="inline-flex h-4 min-w-[1.1rem] shrink-0 items-center justify-center rounded-full bg-muted/70 px-1 text-[10px] tabular-nums">
-                              {group.opts.length}
-                            </span>
-                            <ChevronDown
-                              className={cn(
-                                "h-3.5 w-3.5 shrink-0 transition-transform duration-200",
-                                expanded && "rotate-180",
-                              )}
-                            />
-                          </button>
+                          <div className="group sticky top-0 z-10 flex h-[30px] shrink-0 items-stretch bg-popover/95 backdrop-blur transition-colors hover:bg-muted/40 focus-within:bg-muted/40 supports-[backdrop-filter]:bg-popover/80">
+                            <button
+                              type="button"
+                              onClick={() => toggleGroup(group.id)}
+                              aria-expanded={expanded}
+                              className="model-selector-group-label flex min-w-0 flex-1 cursor-pointer items-center gap-1.5 px-2 py-0 text-left text-xs font-medium text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30 dark:text-white/80"
+                            >
+                              <ProviderBrandIcon
+                                type={group.providerType}
+                                className="h-3.5 w-3.5 opacity-90"
+                              />
+                              <span className="min-w-0 flex-1 truncate">{group.name}</span>
+                            </button>
+                            <button
+                              type="button"
+                              onClick={() => {
+                                setIsModelPickerOpen(false);
+                                onOpenSettings("providers", group.id);
+                              }}
+                              aria-label={`${t("settings.editProvider")}: ${group.name}`}
+                              className="pointer-events-none flex w-7 max-w-0 shrink-0 cursor-pointer items-center justify-center overflow-hidden text-muted-foreground/70 opacity-0 transition-[max-width,opacity,color,background-color] duration-150 group-hover:max-w-7 group-hover:pointer-events-auto group-hover:opacity-100 group-focus-within:max-w-7 group-focus-within:pointer-events-auto group-focus-within:opacity-100 hover:bg-muted/60 hover:text-foreground focus-visible:max-w-7 focus-visible:pointer-events-auto focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30"
+                            >
+                              <Pencil className="h-3.5 w-3.5" />
+                            </button>
+                            <button
+                              type="button"
+                              onClick={() => toggleGroup(group.id)}
+                              aria-expanded={expanded}
+                              aria-label={`${
+                                expanded ? t("chat.collapseProvider") : t("chat.expandProvider")
+                              }: ${group.name}`}
+                              className="model-selector-group-label flex shrink-0 cursor-pointer items-center gap-1.5 px-2 py-0 text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30 dark:text-white/80"
+                            >
+                              <span className="inline-flex h-4 min-w-[1.1rem] shrink-0 items-center justify-center rounded-full bg-muted/70 px-1 text-[10px] tabular-nums">
+                                {group.opts.length}
+                              </span>
+                              <ChevronDown
+                                className={cn(
+                                  "h-3.5 w-3.5 shrink-0 transition-transform duration-200",
+                                  expanded && "rotate-180",
+                                )}
+                              />
+                            </button>
+                          </div>
                           {expanded
                             ? group.opts.map((option) => {
                                 const isSelected = option.value === selectedValue;

crates/agent-gateway/web/src/pages/settings/ProvidersSection.tsx

@@ -3007,8 +3007,13 @@ function ProviderList(props: {
   );
 }
 
-export function ProvidersSection(props: SettingsSectionProps) {
-  const { settings, setSettings } = props;
+export function ProvidersSection(
+  props: SettingsSectionProps & {
+    initialProviderId?: string;
+    onInitialProviderHandled?: () => void;
+  },
+) {
+  const { settings, setSettings, initialProviderId, onInitialProviderHandled } = props;
   const { t } = useLocale();
 
   const [activeTab, setActiveTab] = useState<ProviderId>("claude_code");
@@ -3019,6 +3024,19 @@ export function ProvidersSection(props: SettingsSectionProps) {
   const { usageByProvider, refreshingProviderIds, refreshProvider } = useProviderUsage(
     settings.customProviders,
   );
+  const openedInitialProviderIdRef = useRef<string | null>(null);
+
+  useEffect(() => {
+    const providerId = initialProviderId?.trim();
+    if (!providerId || openedInitialProviderIdRef.current === providerId) return;
+    const provider = settings.customProviders.find((item) => item.id === providerId);
+    if (!provider) return;
+    openedInitialProviderIdRef.current = providerId;
+    setActiveTab(provider.type);
+    setEditingProvider(provider);
+    setModalOpen(true);
+    onInitialProviderHandled?.();
+  }, [initialProviderId, onInitialProviderHandled, settings.customProviders]);
 
   function openAdd() {
     setEditingProvider(null);

crates/agent-gateway/web/src/pages/settings/types.ts

@@ -21,6 +21,7 @@ export type SettingsPageProps = {
   saveState: WebSettingsSaveState;
   onBack: () => void;
   initialSection?: SectionId;
+  initialProviderId?: string;
   hiddenSections?: SectionId[];
   onAgentDirectoryChanged?: () => void | Promise<void>;
 };

crates/agent-gui/src/App.tsx

@@ -169,6 +169,7 @@ function applyRuntimeSystemDefaults(settings: AppSettings, defaultWorkdir: strin
 export default function App() {
   const [settingsOpen, setSettingsOpen] = useState(false);
   const [settingsSection, setSettingsSection] = useState<SectionId>("system");
+  const [settingsProviderId, setSettingsProviderId] = useState<string>();
   const [settingsReady, setSettingsReady] = useState(false);
   const [settings, setSettingsState] = useState<AppSettings>(() => getDefaultSettings());
   const [settingsSaveState, setSettingsSaveState] = useState<SettingsSaveState>({
@@ -405,8 +406,9 @@ export default function App() {
   );
 
   const openSettings = useCallback(
-    (section: SectionId = "system") => {
+    (section: SectionId = "system", providerId?: string) => {
       setSettingsSection(section);
+      setSettingsProviderId(section === "providers" ? providerId : undefined);
       setSettingsOpen(true);
       setOverlay("entering");
       requestAnimationFrame(() => requestAnimationFrame(() => setOverlay("open")));
@@ -617,6 +619,7 @@ export default function App() {
                 saveState={settingsSaveState}
                 onBack={closeSettings}
                 initialSection={settingsSection}
+                initialProviderId={settingsProviderId}
                 appUpdate={appUpdate}
               />
             </AppErrorBoundary>

crates/agent-gui/src/pages/ChatPage.tsx

@@ -161,7 +161,7 @@ type ChatPageProps = {
   getToolPolicies: () => AppSettings["system"]["toolPolicies"];
   context: Context;
   setContext: (next: Context) => void;
-  onOpenSettings: (section?: SectionId) => void;
+  onOpenSettings: (section?: SectionId, providerId?: string) => void;
   onToggleTheme: () => void;
   appUpdate?: AppUpdateController;
 };

crates/agent-gui/src/pages/SettingsPage.tsx

@@ -137,11 +137,13 @@ export function SettingsPage(props: SettingsPageProps) {
     saveState,
     onBack,
     initialSection = "system",
+    initialProviderId,
     hiddenSections = [],
     appUpdate,
   } = props;
   const { t } = useLocale();
   const [section, setSection] = useState<SectionId>(initialSection);
+  const [pendingProviderId, setPendingProviderId] = useState(initialProviderId);
 
   const sectionLabels: Record<SectionId, string> = {
     system: t("settings.navSystem"),
@@ -172,7 +174,8 @@ export function SettingsPage(props: SettingsPageProps) {
 
   useEffect(() => {
     setSection(initialSection);
-  }, [initialSection]);
+    setPendingProviderId(initialProviderId);
+  }, [initialProviderId, initialSection]);
 
   useEffect(() => {
     if (allNavItems.some((item) => item.id === section)) {
@@ -185,7 +188,14 @@ export function SettingsPage(props: SettingsPageProps) {
   const sectionContent = (() => {
     switch (section) {
       case "providers":
-        return <ProvidersSection settings={settings} setSettings={setSettings} />;
+        return (
+          <ProvidersSection
+            settings={settings}
+            setSettings={setSettings}
+            initialProviderId={pendingProviderId}
+            onInitialProviderHandled={() => setPendingProviderId(undefined)}
+          />
+        );
       case "system":
         return <SystemSettingsForm settings={settings} setSettings={setSettings} />;
       case "shortcuts":